本地构建React项目时如何区分开发/生产环境API密钥配置？

问题原因 #

执行npm run build时，Node默认会将NODE_ENV设为production，导致你的key.js逻辑切换到生产环境分支，尝试读取Vercel配置的环境变量，但本地未配置这些变量，因此抛出auth/invalid-api-key错误。

解决方案 #

方法一：修改构建脚本，强制本地构建使用开发环境 #

在项目根目录的package.json中，修改build脚本，指定NODE_ENV为development：

"scripts": {
  "build": "NODE_ENV=development next build",
  // Windows系统请使用以下命令：
  // "build": "set NODE_ENV=development && next build"
}

本地构建时会直接走key.js的开发分支，加载firebase.dev.js中的密钥。注意：此方法构建出的产物是开发环境配置，仅适合本地测试，不影响Vercel线上部署（Vercel会自动将NODE_ENV设为production）。

方法二：添加本地生产环境.env文件 #

在项目根目录创建.env.production文件，填入本地测试用的Firebase生产密钥：

NEXT_PUBLIC_FIREBASE_API_KEY=你的本地测试API密钥
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=你的认证域名
NEXT_PUBLIC_FIREBASE_PROJECT_ID=你的项目ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=你的存储桶地址
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=你的消息发送ID
NEXT_PUBLIC_FIREBASE_APP_ID=你的应用ID

Next.js会自动读取.env.production文件中的变量，本地执行npm run build时就能获取到有效密钥，无需修改key.js逻辑。

方法三：修改密钥判断逻辑，区分Vercel环境 #

Vercel部署时会自动设置VERCEL环境变量（值为true），利用这个变量调整key.js的判断逻辑，让非Vercel环境的生产构建也使用本地密钥：

// key.js - 根据环境和部署平台选择密钥
if (process.env.NODE_ENV === 'production' && process.env.VERCEL) {
    // Vercel生产环境，使用平台配置的环境变量
    const firebaseConfig = {
        apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
        authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
        projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
        storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
        appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    };
    module.exports = firebaseConfig;
} else {
    // 本地开发/本地构建，使用本地dev密钥
    module.exports = require('./firebase.dev.js');
}

此方法最灵活，既保留了生产模式的构建特性，又能确保本地构建使用本地密钥，同时不影响Vercel线上部署的配置。

内容的提问来源于stack exchange，提问作者Dan Lee