javascript NextJS中的环境变量未定义

rlcwz9us  于 2023-04-10  发布在  Java
关注(0)|答案(4)|浏览(171)

我正在使用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 starttest one end显示出来,但环境变量没有显示出来。对于test two starttest 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中。变量是未定义的,我不知道为什么。
有什么想法吗
谢谢。

6l7fqoea

6l7fqoea1#

.env.*文件是在服务器启动时加载的。因此,除非重新启动您的dev/prod服务器,否则对它们的任何修改都不会应用。
只需暂停进程(Ctrl+C/Z)并重新运行next dev/next start即可使其工作。请注意,如果您在静态生成的页面中使用它们,则可能还需要在启动生产模式之前重新构建项目(next build)。

uidvcgyl

uidvcgyl2#

说清楚,根据最新的文件,你应该
1.将变量放在. env.local文件中
1.然后配置你的next.config.js文件,使它包含一个引用你的变量的env配置,如下所示:

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

1.然后您可以使用典型的process.env.secret_here语法在客户端调用这些变量。
我可能搞错了,但我确实相信NEXT_PUBLIC前缀向客户端公开了env变量,并且应该只在开发环境中进行,以避免安全问题。

oxf4rvwz

oxf4rvwz3#

搜索next.js documentation,我发现:

// 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版本**,则需要将env变量放置到next.config.js
它们还包括一个警告:
Next.js将在构建时用'my-value'替换process.env.customKey。由于webpack DefinePlugin的性质,尝试解构process.env变量将不起作用。
如果你使用的是**9.4+版本,documentation说你可以使用.env.local文件和前缀为NEXT_PUBLIC_的env变量,让它们在浏览器中显示。
使用此方法值得注意的是:为了保证仅服务器机密的安全,Next.js
在构建时将process.env.*替换为正确的值。**这意味着process.env不是标准的JavaScript对象,因此您无法使用对象解构。

41zrol4v

41zrol4v4#

你应该创建一个文件.env.local(如果你的变量在dev或prod上没有不同)下一步,你的env变量应该在next.config.js中:

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

NEXTJS从. env.local获取env变量,而从next.config获取env变量

相关问题