如何为Firebase+Next.js+Vercel切换开发/生产数据库配置？

核心原因 #

Vercel仅在部署环境（生产/预览）中自动注入NEXT_PUBLIC_VERCEL_ENV变量，本地开发环境不会自动设置该值，导致客户端渲染页面中变量为undefined。

解决方案 #

1. 手动配置本地环境变量

在项目根目录创建.env.local文件（Next.js会自动加载该文件中的环境变量，且该文件默认被.gitignore排除，不会提交到代码仓库），添加以下内容：

NEXT_PUBLIC_VERCEL_ENV=development

保存后重启本地开发服务器（npm run dev），此时本地客户端渲染页面中该变量值会变为development。

2. 优化配置逻辑（可选）

为了避免因环境变量未设置导致的异常，可以在代码中增加默认值兜底：

const firebaseDevConfig = await import("./configs/dev-config.json");
const firebaseProdConfig = await import("./configs/prod-config.json");

// 若变量不存在，默认使用development环境
const currentEnv = process.env.NEXT_PUBLIC_VERCEL_ENV || "development";
const firebaseConfig = currentEnv === "production" ? firebaseProdConfig : firebaseDevConfig;

这样即使本地未配置环境变量，也会自动使用开发环境配置，同时不影响Vercel部署环境的变量识别。

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