Next.js 12（带有反应）：无法读取 env 变量，process.env 未定义答案

【问题标题】：Next.js 12 ( with react ): Cannot read env variables, process.env is undefinedNext.js 12（带有反应）：无法读取 env 变量，process.env 未定义
【发布时间】：2022-01-04 03:14:40
【问题描述】：

我正在使用 next.js 12 和一个 react 应用程序。

我有以下 .env.local 文件：

NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE="public_development_variable"

我启动开发服务器并在浏览器中执行以下操作： console.log('###ENV', process.env) 而且我总是不确定。

在日志中，我确认已读取 env 文件： info - Loaded env from /Users/testdash/.env.local

但是 process.env 总是空的

【问题讨论】：

这能回答你的问题吗？ next.js environment variables are undefined (Next.js 10.0.5)
嗨，不。已经试过了
您必须通过其全名引用环境变量。尝试记录console.log(process.env.NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE)。

标签： reactjs next.js environment-variables

【解决方案1】：

文档在这里提到它：https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Next.js 将在构建时将 process.env.customKey 替换为“my-value”。由于 webpack DefinePlugin 的性质，尝试解构 process.env 变量是行不通的。

【讨论】：

从 Next.js 9.4 开始，这不再是注入环境变量的推荐方式。见nextjs.org/docs/basic-features/environment-variables。
编辑了我的答案，设置环境变量的方法并不重要，事实上变量本身在构建时会被它们的值替换。

【解决方案2】：

我只使用 .env 而不是 .env.local，它在 Digitalocean 或 Azure 本地运行良好（使用 nextjs 12）

【讨论】：