next.js 环境变量未定义（Next.js 10.0.5）

Question

我正在使用 Next.js 编写一个网站，并尝试添加谷歌标签管理器。
我遵循了 Next.js Github 示例中的教程，但由于某些原因，我无法访问我的环境变量。
它说我的变量未定义。
我在我的项目文件夹中创建了一个文件 .env.local（与组件、node_modules、页面等处于同一级别）
在这个文件中我创建了一个这样的变量（测试目的）：

NEXT_PUBLIC_DB_HOST=localhost

在我的索引页面上，我尝试了以下代码：

console.log("test ", process.env.NEXT_PUBLIC_DB_HOST);

但是在我的控制台中，我得到了一个“未定义的测试”。
我试图将我的变量放入 .env 文件中，但没有成功。
我做错了什么？

Answer 1

\n

1. 创建\xc2\xa0 .env（所有环境）、\xc2\xa0 .env.development（开发环境）和\xc2\xa0 .env.Production（生产环境）。

   \n
\n

2. 将前缀 NEXT_PUBLIC 添加到所有环境变量中。

   \n
\n

\n

\n

NEXT_PUBLIC_API_URL=http://localhost:3000/

\n

\n

\n
3. 与前缀 process.env 一起使用
\n

\n

\n

process.env.NEXT_PUBLIC_API_URL

\n

\n

\n
4. 停止服务器并重新启动它：
\n

\n

\n

npm 运行开发

\n

\n

\n
5. 我希望它能起作用。\n此解决方案适用于最新版本的 nextJs（9 以上）
\n

\n

Answer 2

对于那些使用 NextJS +9 并在浏览器中查找环境变量的人，您应该使用前缀NEXT_PUBLIC_。例子：

NEXT_PUBLIC_ANALYTICS_ID=123456789

请参阅参考文档。

Answer 3

重新启动服务器对我有用。

1. 编辑并保存.env.local
2. 停止服务器并重新启动它，npm run dev
3. 您应该在下一行得到如下输出：

> klout@0.1.0 dev
> next dev

Loaded env from [path]/.env.local

Answer 4

在花费了无数时间之后，我发现 nextjs 9.4 的前后文档中都有一个小段落：

• （9.4之前）https://nextjs.org/docs/api-reference/next.config.js/environment-variables （与此答案相同）

  Next.js 将在构建时将 process.env.customKey 替换为 'my-value' 。

• (^9.4) https://nextjs.org/docs/basic-features/environment-variables

  为了确保仅服务器机密的安全，Next.js 在构建时将 process.env.* 替换为正确的值。

关键词是构建时间。这意味着您必须在运行时设置这些变量next build，而不仅仅是next start在客户端可以访问这些变量。

Answer 5

此 envs 仅适用于服务器端。要在客户端访问此环境，您需要在 next.config.js 中声明

这边走：

module.exports = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  }
}

Answer 6

视频参考代码grepper 链接 https://youtu.be/6qhF9l_AgAk

process.env 仅在服务器中工作，而不在浏览器中工作，因此它将显示未定义，以使用 .env.local 或 .env 中的 NEXT_PUBLIC_before APi 密钥修复它，此解决方案仅适用于 nextjs 版本 9。

NEXT_PUBLIC_BACKEND_API="http://localhost:1337/graphql"

像 MongoURl 和 openAi 密钥这样的秘密环境不应该使用 Next_PUBLIC_ 放置，否则它将暴露给浏览器并且每个人都可以使用它。

MONGO_URL=

OPENAI_API_KEY=