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

Posted 2023-03-08

【中文标题】next.js 环境变量未定义（Next.js 10.0.5）

【英文标题】：next.js environment variables are undefined (Next.js 10.0.5)

【发布时间】：2022-01-21 09:39:23

【问题描述】：

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

NEXT_PUBLIC_DB_HOST=localhost

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

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

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

【问题讨论】：

您是否尝试过重新加载下一个服务器？

我不确定你的意思。我停止了我的 vscode 终端中的内容并再次进行了纱线开发。重新加载下一个服务器还有什么事情要做吗？

是的，就是这样。它没有帮助吗？您确定.env 文件与package.json 处于同一级别吗？不太确定还有什么可以帮助的。

好吧，我傻了！我发现我的错误......我放了一个“：”而不是一个“=”。我很惭愧……

非常感谢@FlorieAnstett 我犯了同样的错误，浪费了2个多小时

【参考方案1】：

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

这边：

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

【讨论】：

从 Nextjs 版本 9.4 开始，不再建议将 next.config.js 作为环境策略。您是在使用旧版本的 NextJS，还是认为这是获得成功的唯一途径？

我只是遇到了这个问题，这解决了我在 Next 10.0.3 上的错误

在 Next +9 上，使用 NEXT_PUBLIC_ 为变量添加前缀。这将在浏览器上公开它们。

【参考方案2】：

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

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

> klout@0.1.0 dev
> next dev

Loaded env from [path]/.env.local

【讨论】：

谢谢，这正是我所需要的。

重启是服务器是关键

【参考方案3】：

创建.env（所有环境）、.env.development（开发环境）和.env.production（生产环境） .

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

NEXT_PUBLIC_API_URL=http://localhost:3000/

与前缀 process.env 一起使用

process.env.NEXT_PUBLIC_API_URL

停止服务器并重新启动它：

npm 运行开发

我希望它有效。 此解决方案适用于最新版本的 nextJs（9 以上）

【参考方案4】：

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

（9.4 之前）https://nextjs.org/docs/api-reference/next.config.js/environment-variables（与this answer 相同）

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

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

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

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

【讨论】：

呃，这对我来说是关键。我已经使用 npm 脚本设置了这些变量，但它是在构建时间之后，但在启动我的服务器之前。

【参考方案5】：

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

NEXT_PUBLIC_ANALYTICS_ID=123456789

见documentation for reference。