NextJS 中的环境变量未定义

Question

我正在使用next-auth库，该库需要使用以下环境变量：

  Providers.GitHub({
    clientId: process.env.GITHUB_ID,
    clientSecret: process.env.GITHUB_SECRET,
  }),

然而，当我测试next-auth时，它没有起作用，我认为原因是这些变量没有正确加载。因此，我进行了一些测试，以查看是否可以在我的应用程序中访问环境变量，测试结果表明我无法访问。

测试过程如下：

// .env.local (root level)

NEXT_PUBLIC_ENV_LOCAL_VARIABLE="public_variable_from_env_local"

我接着在我的网站上添加了以下代码：

  <h2>test one start</h2>
    {process.env.NEXT_PUBLIC_TEST_ONE}
  <h2>test one end</h2>

  <Spacer />

  <h2>test two start</h2>
    {process.env.TEST_TWO}
  <h2>test two end</h2>

在这种情况下，test one start和test one end都会出现，但环境变量不会出现。对于test two start和test two end也是如此。

我用console.log做了类似的测试：

  console.log("test one", process.env.NEXT_PUBLIC_TEST_ONE)
  console.log("test two", process.env.TEST_TWO)

这将显示如下：

test one undefined
test two undefined

简而言之，由于某种原因，我似乎无法在我的nextjs应用程序中加载环境变量。 无论是来自next-auth，还是代码中的环境变量，或者是console.log中的环境变量，它们都是未定义的，我不知道为什么。

有任何想法吗？

谢谢。

- Moshe

---

修改.env.*后，您需要重新启动开发服务器。然后它会显示一个信息，例如：从.env.local加载环境变量。 - brc-dd

谢谢 - 这就解决了。如果你愿意，请随意留下答案，我会将其标记为正确答案。再次感谢。 - Moshe

Answer 1

.env.* 文件在服务器启动时被加载，因此除非你重新启动 dev/prod 服务器，否则对它们进行的任何修改都不会生效。

只需停止进程（Ctrl+C/Z）并重新运行 next dev/next start 即可使其生效。请注意，如果您在静态生成的页面中使用这些文件，则还需要在生产模式下重新构建项目 (next build) 后再启动。

- brc-dd

Answer 2

需要明确的是，根据最近的文档，你应该：

1. 将变量放置在.env.local文件中
2. 然后配置你的next.config.js文件，使其包含一个环境配置，引用你的变量，如下所示：

    module.exports = {
     env: {
        secretKey: process.env.your_secret_here,
     },
    }

3. 然后您可以使用典型的process.env.secret_here语法在客户端调用变量。
   我可能错了，但我确信NEXT_PUBLIC前缀将环境变量暴露给客户端，并且应该仅在开发环境中执行，以避免安全问题。

- QCarter92

---

这种方法还会将环境变量暴露给客户端。任何在客户端使用的环境变量都将被其所暴露。 - juliomalves

Answer 3

在查阅 next.js 文档 后，我找到了以下内容：

// file: next.config.js

module.exports = {
 env: {
    customKey: 'my-value',
 },
}

// Now you can access process.env.customKey 

// For example, the following line:
// return <h1>The value of customKey is: {process.env.customKey}</h1>

// Will end up being:
// return <h1>The value of customKey is: {'my-value'}</h1>

所以，如果您使用的是next.js版本 9.4或之前的版本，则将env变量放置在next.config.js中。

他们还包括一个警告：

Next.js将在构建时使用'my-value'替换process.env.customKey。由于webpack DefinePlugin的本质，尝试解构process.env变量将不起作用。

如果您使用的是 9.4+版本，则文档中提到可以使用.env.local文件，并使用NEXT_PUBLIC_前缀环境变量以在浏览器中公开它们。

这种方法需要注意的是：为了保护仅限服务器的机密信息，Next.js在构建时将process.env.*替换为正确的值。这意味着process.env不是标准的JavaScript对象，因此您无法使用对象解构。

- mikep17

---

@juliomalves 是的，你说得对，谢谢。我已经更新了我的答案。昨晚我尝试使用.env文件的方法，但没有成功，不知怎么地，我找到了放置在next.config.js文件中的旧版本，并且一切都正常工作，所以我也在这里用那些信息回答了。 - mikep17

Answer 4

如果您的变量在开发环境和生产环境中没有区别，您应该创建一个名为.env.local的文件。接下来，您的环境变量应该在next.config.js中设置：

env : { EXAMPLE : process.env.URL } // you should write URL env variable in .env.local

NEXTJS 从你的 .env.local 文件中获取环境变量，而这些环境变量是从 next.config 文件中获取的。

- Canonne Gregory