Next.js 环境变量管理：解决生产环境秘密值失效问题

# .env 或生产环境配置中
NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL=your-client-email@project.iam.gserviceaccount.com
NEXT_PUBLIC_GOOGLE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----
...
-----END PRIVATE KEY-----

NEXT_PUBLIC_GOOGLE_SHEET_ID=your-sheet-id

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

GOOGLE_SHEET_ID=your-sheet-id

import { google } from 'googleapis';

// 移除 dotenv-flow，在 Next.js 环境中通常不需要手动配置
// require('dotenv-flow').config()

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

  const body = req.body;

  try {
    const auth = new google.auth.GoogleAuth({
      credentials: {
        // 直接访问无 NEXT_PUBLIC_ 前缀的变量
        client_email: process.env.GOOGLE_CLIENT_EMAIL,
        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',
      ],
    });
    const sheets = google.sheets({
      auth,
      version: 'v4',
    });

    const submittedAt = new Date().toUTCString();

    const response = await sheets.spreadsheets.values.append({
      spreadsheetId: process.env.GOOGLE_SHEET_ID, // 同样访问无 NEXT_PUBLIC_ 前缀的变量
      range: 'A1:F1',
      valueInputOption: 'USER_ENTERED',
      requestBody: {
        values: [
          [
            body.name,
            body.company,
            body.product,
            body.email,
            body.phone,
            submittedAt,
          ],
        ],
      },
    });

    return res.status(201).json({
      data: response.data,
    });
  } catch (error) {
    console.error('Google Sheets API error:', error); // 使用 console.error 记录错误
    // 错误处理时，避免直接暴露敏感信息，但可以记录错误详情
    return res.status(error.code || 500).send({ message: error.message || 'An unexpected 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;
    }, {});

  // 返回 JSON 格式的公共环境变量
  res.status(200).json(publicEnv);
}

// 例如，在某个 React 组件中
import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [envVars, setEnvVars] = useState({});

  useEffect(() => {
    async function fetchEnvVars() {
      try {
        const response = await fetch('/api/env');
        const data = await response.json();
        setEnvVars(data);
      } catch (error) {
        console.error('Failed to fetch public environment variables:', error);
      }
    }
    fetchEnvVars();
  }, []);

  // 现在可以在组件中使用 envVars.NEXT_PUBLIC_GTM_ID 等变量
  return (
    <div>
      <p>GTM ID: {envVars.NEXT_PUBLIC_GTM_ID || 'Loading...'}</p>
      {/* ... 其他使用公共变量的代码 */}
    </div>
  );
}

export default MyComponent;