如何在 Vercel 上管理 process.env.NODE_ENV

Question

我在 Vercel 上有一个 Next Js 应用程序，并且设置了与数据库等相关的各种环境变量，用于开发和生产。所有这些变量都有效。

但我不知道如何使用在开发版本的本地环境中使用的process.env.NODE_ENV 。例如，如果我想更改 dev 中的文本徽标，它不起作用（在本地可以，但在 Vercel 上不行）

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

我设置了 dev 分支进行预览。

我也尝试过这样设置这些变量，但是当然不行

这是处理这件事的正确方法吗？例如，我如何根据环境更改用户界面？谢谢

Answer 1

Vercel 文档指出：

NODE_ENV如果未分配环境变量，Next.js 会development在运行next dev 命令或production所有其他命令时自动分配。

在您的情况下，请考虑完全避免使用NODE_ENV，而是使用Vercel System Variables；特别VERCEL_ENV是它告诉您应用程序部署和运行的 Vercel 环境。

Answer 2

自动运行next build设置NODE_ENV=production。

由于 Vercel 上的生产和预览部署都运行next build，因此它们都会NODE_ENV=production自动设置，因为next build执行生产优化，其中之一是确保 React 使用生产版本。

我建议为您的用例使用不同的环境变量名称，例如SITE_NAME=Dev. 然后你可以编写如下代码：

<span>{process.env.SITE_NAME || siteConfig.name}</span>