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.*服务器启动时加载文件。因此，除非您重新启动开发/生产服务器，否则不会应用其中的任何修改。

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