未定义next.js环境变量(Next.js 10.0.5)

Question

我正在用Next.js编码一个网站，我试图添加谷歌标签管理器。

我遵循了Next.js Github示例的教程，但由于某些原因，我无法访问我的环境变量。

它说我的变量是未定义的。

我在项目文件夹中(与components、node_modules、pages等处于同一级别)创建了一个.env.local文件。

在这个文件中，我创建了一个这样的变量(测试目的)：

NEXT_PUBLIC_DB_HOST=localhost

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

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

但在我的控制台中，我得到了一个“测试未定义”。

我尝试将变量放入.env文件中，但没有成功。

我做错了什么？

Answer 1

这个环境只能在服务器端工作。要在客户端访问此环境，您需要在next.config.js中声明

这样：

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

Answer 2

1. 创建.env(所有环境)、.env.development(开发环境)和.env.production(生产环境)。

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

NEXT_PUBLIC_API_URL=http://localhost:3000/

1. 与prefix process.env

一起使用

process.env.NEXT_PUBLIC_API_URL

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

npm运行开发

1. 我希望它能工作。此解决方案适用于最新版本的nextJs (9以上)

Answer 3

重新启动服务器对我来说很有效。

编辑并保存.env.local

• Stop服务器并重新启动它，npm run dev

• You应该会在下一行得到如下输出：

1. ：

> klout@0.1.0 dev
> next dev

Loaded env from [path]/.env.local