我正在使用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中。变量是未定义的,我不知道为什么。
有什么想法吗
谢谢。
4条答案
按热度按时间6l7fqoea1#
.env.*
文件是在服务器启动时加载的。因此,除非重新启动您的dev/prod服务器,否则对它们的任何修改都不会应用。只需暂停进程(
Ctrl+C/Z
)并重新运行next dev
/next start
即可使其工作。请注意,如果您在静态生成的页面中使用它们,则可能还需要在启动生产模式之前重新构建项目(next build
)。uidvcgyl2#
说清楚,根据最新的文件,你应该
1.将变量放在. env.local文件中
1.然后配置你的next.config.js文件,使它包含一个引用你的变量的env配置,如下所示:
1.然后您可以使用典型的process.env.secret_here语法在客户端调用这些变量。
我可能搞错了,但我确实相信NEXT_PUBLIC前缀向客户端公开了env变量,并且应该只在开发环境中进行,以避免安全问题。
oxf4rvwz3#
搜索next.js documentation,我发现:
看起来,如果您使用的是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对象,因此您无法使用对象解构。41zrol4v4#
你应该创建一个文件.env.local(如果你的变量在dev或prod上没有不同)下一步,你的env变量应该在next.config.js中:
NEXTJS从. env.local获取env变量,而从next.config获取env变量