如何在Vercel上让Next.js的process.env.NODE_ENV生效以切换UI

你的做法之所以不生效，核心原因是Vercel的预览环境（包括dev分支的预览构建）默认将process.env.NODE_ENV设为production——不管是正式生产还是预览部署，Vercel都会用生产模式构建应用，所以你通过NODE_ENV === "development"的判断在Vercel预览环境里永远不会成立。

下面是两种可行的解决方案：

方案1：使用Vercel自带的环境变量VERCEL_ENV #

Vercel会自动为不同环境设置VERCEL_ENV变量，无需手动配置：

• production：正式生产环境
• preview：预览环境（分支预览、PR预览都属于这个范畴）
• development：本地通过Vercel CLI运行的开发环境

修改代码如下：

<span>{process.env.VERCEL_ENV === "preview" ? `${siteConfig.name} DEV` : siteConfig.name}</span>

方案2：自定义带前缀的环境变量 #

如果需要更灵活的环境标识，可以在Vercel中自定义环境变量，注意客户端组件能访问的变量必须添加NEXT_PUBLIC_前缀（Next.js的规则）：

1. 进入Vercel项目的「Settings」→「Environment Variables」
2. 选择「Preview」环境，添加变量NEXT_PUBLIC_APP_ENV=development，勾选「Automatically expose to Runtime」
3. 修改代码判断这个变量：

<span>{process.env.NEXT_PUBLIC_APP_ENV === "development" ? `${siteConfig.name} DEV` : siteConfig.name}</span>

关键注意点 #

• 本地开发时NODE_ENV为development是正常的，但Vercel的所有部署构建（包括预览）都会以生产模式执行，所以NODE_ENV始终是production，不能用它来区分Vercel上的预览和生产环境。

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