Next.js 环境变量在生产环境中加载失败的排查与解决方案

NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL=your_client_email
NEXT_PUBLIC_GOOGLE_PRIVATE_KEY=your_private_key
NEXT_PUBLIC_GOOGLE_SHEET_ID=your_sheet_id

GOOGLE_CLIENT_EMAIL=your_client_email
GOOGLE_PRIVATE_KEY=your_private_key
GOOGLE_SHEET_ID=your_sheet_id

// pages/api/submit.js
import { google } from 'googleapis';
// 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({
      // 移除 NEXT_PUBLIC_ 前缀
      spreadsheetId: process.env.GOOGLE_SHEET_ID,
      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('Error submitting form:', 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);
}

// components/MyClientComponent.js
import React, { useEffect, useState } from 'react';

function MyClientComponent() {
  const [envVars, setEnvVars] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchPublicEnv() {
      try {
        const response = await fetch('/api/env'); // 调用上面创建的 API 路由
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setEnvVars(data);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }
    fetchPublicEnv();
  }, []);

  if (loading) return <div>Loading public environment variables...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>Public Environment Variables:</h2>
      <ul>
        {Object.entries(envVars).map(([key, value]) => (
          <li key={key}>
            <strong>{key}:</strong> {value}
          </li>
        ))}
      </ul>
      {/* 示例：使用 GTM ID */}
      {envVars.NEXT_PUBLIC_GTM_ID && (
        <p>Google Tag Manager ID: {envVars.NEXT_PUBLIC_GTM_ID}</p>
      )}
    </div>
  );
}

export default MyClientComponent;