掌握Next.js生产环境中的环境变量：避免秘密值不可见的陷阱

# .env 或生产环境配置
GOOGLE_CLIENT_EMAIL=your-client-email@example.com
GOOGLE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----
...
-----END PRIVATE KEY-----

GOOGLE_SHEET_ID=your-sheet-id

// pages/api/submit.js
import { google } from 'googleapis';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).send('Only POST requests are allowed!');
  }

  try {
    const auth = new google.auth.GoogleAuth({
      credentials: {
        client_email: process.env.GOOGLE_CLIENT_EMAIL, // 注意：不再有 NEXT_PUBLIC_ 前缀
        private_key: process.env.GOOGLE_PRIVATE_KEY?.replace(/\n/g, '
'),
      },
      scopes: [
        'https://www.googleapis.com/auth/drive',
        'https://www.googleapis.com/auth/drive.file',
        'https://www.googleapis.com/auth/spreadsheets',
      ],
    });
    // ... 后续逻辑
    return res.status(201).json({ data: response.data });
  } catch (error) {
    console.error('API submission error:', error);
    return res.status(error.code || 500).send({ message: error.message || 'An unknown error occurred.' });
  }
}

// pages/api/env.js
export default function handler(req, res) {
  // 过滤出所有以 'NEXT_PUBLIC_' 开头的环境变量
  const publicEnv = Object.keys(process.env)
    .filter((key) => key.startsWith('NEXT_PUBLIC_'))
    .reduce((acc, key) => {
      acc[key] = process.env[key];
      return acc;
    }, {});

  // 返回这些公共环境变量
  res.status(200).json(publicEnv);
}

// components/MyClientComponent.js (或任何需要客户端环境变量的地方)
import React, { useEffect, useState } from 'react';

function MyClientComponent() {
  const [envConfig, setEnvConfig] = useState({});

  useEffect(() => {
    async function fetchEnv() {
      try {
        const response = await fetch('/api/env'); // 请求你创建的API路由
        const data = await response.json();
        setEnvConfig(data);
      } catch (error) {
        console.error('Failed to fetch public environment variables:', error);
      }
    }
    fetchEnv();
  }, []);

  // 现在你可以通过 envConfig 访问这些变量，例如：
  // const gtmId = envConfig.NEXT_PUBLIC_GTM_ID;

  return (
    <div>
      {envConfig.NEXT_PUBLIC_GTM_ID ? (
        <p>Google Tag Manager ID: {envConfig.NEXT_PUBLIC_GTM_ID}</p>
      ) : (
        <p>Loading GTM ID...</p>
      )}
    </div>
  );
}

export default MyClientComponent;