无法从Nextjs项目读取环境变量

Question

我在 NextJS 项目中设置和读取环境变量时遇到问题。我有两个控制台日志：

console.log('env', process.env.NODE_ENV);
console.log('backend url', process.env.BACKEND_URL);

运行代码而不执行任何操作会返回我所期望的结果：

env development
backend url undefined

像这样导出变量：

NODE_ENV=production
BACKEND_URL=url

不仅打印之前的值，还在控制台中显示以下消息：

⚠ You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://nextjs.org/docs/messages/non-standard-node-env

像这样导出：

export NODE_ENV=production
export BACKEND_URL=url

也打印相同的内容，包括警告。

像这样运行nodeJS：

BACKEND_URL=url NODE_ENV=production npm run dev 

打印相同。

echo

对变量打印正确的值。

不仅仅是 console.logs，我尝试在代码的其他部分使用这些值，它们的行为就好像这些值仍然是

development

和

undefined

。

我也尝试过使用

.env

文件：

NODE_ENV=production
BACKEND_URL=url

我可以看到它正在被读取，因为当我启动 nextJS 服务器时，我看到以下内容：

next dev -p 8080

▲ Next.js 14.1.4
- Local:        http://localhost:8080
- Environments: .env

当文件不存在时，不会出现

Environment: .env

所在的行。

最后，我检查了

~/.bashrc

和

~/.zshrc

，他们没有提到

NODE_ENV

或

BACKEND_URL

。

可能会发生什么？

Answer 1

如果您在前端调用

env

变量（我假设是这样），则必须在变量上添加

NEXT_PUBLIC_

前缀。

在此处查看其官方文档的更多信息 - https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser