在 Nextjs v12.0.8 中未定义环境变量答案

【问题标题】：Env vars are undefined in Nextjs v12.0.8在 Nextjs v12.0.8 中未定义环境变量
【发布时间】：2022-01-19 13:46:39
【问题描述】：

我创建了一个 .env.local 文件并尝试控制台 process.env.TEST（测试环境变量），但我得到了 undefined。似乎process.env 总是空的。我重新启动了服务器，但我仍然看不到环境变量。我什至尝试开始一个新的空项目，process.env 仍然是空的。

我错过了什么吗？我看到的所有其他帖子似乎都已经弄清楚了，但我仍然无法。我的 .env.local 文件位于根级别。我还尝试将 var 附加到 NEXT_PUBLIC，但这没有帮助。

【问题讨论】：

你能说明你的变量是如何定义的以及你是如何在代码中使用它们的吗？
.env.local 内部：TEST=testENV
所以它没有任何特殊符号，只是一个字符串testENV?那么你是如何在代码中使用它们的呢？
请提供minimal reproducible example。
我最终使用了接受的答案 (next.config.js) 中详述的方法。我仍然不确定为什么 .env.local 不起作用。

标签： next.js environment-variables

【解决方案1】：

按照惯例，React 环境变量必须以REACT_APP_ 为前缀才能与process.env 一起使用。对于 Next.js，您可以将它们放在 .env.local 中，但它们将仅在 Node.js 环境中可用。如果您需要让它们在浏览器中可用，则需要在它们前面加上 NEXT_PUBLIC_。详情请参考the documentation。

另一种方式（更老派的 Next.js）是拥有一个 next.config.js 文件。一个可能的配置是：

const conf = {
  env: {
    myVar: process.env.MY_VAR,
  },
};

module.exports = conf;

然后你可以简单地在你的代码中使用process.env.myVar。请参阅this page 了解更多信息。

【讨论】：

REACT_APP_ 强制前缀仅适用于 CRA，不适用于 Next.js。