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 中。 变量未定义，我不知道为什么。

有任何想法吗？

谢谢。

Answer 1

.env.*文件在服务器启动时加载。 因此，除非您重新启动 dev/prod 服务器，否则不会应用其中的任何修改。

只需停止该过程（ Ctrl+C/Z ）并重新运行next dev / next start以使它们工作。 请注意，如果您在静态生成的页面中使用它们，您可能还需要在开始生产模式之前重新构建项目（ next build ）。

Answer 2

搜索 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>

看来，如果您使用9.4 或之前的 next.js 版本，则将环境变量放入next.config.js

它们还包括一个警告：

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

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

这种方法值得注意的是：为了保证服务器机密的安全，Next.js在构建时将process.env.*替换为正确的值。 这意味着process.env不是标准的 JavaScript 对象，因此您不能使用对象解构。

Answer 3

需要明确的是，根据最新的文档，您应该

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

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

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