[英]Environment Variables in NextJS are Undefined
I am using the next-auth
library which requires the use of environment variables as follows:我正在使用需要使用环境变量的
next-auth
库,如下所示:
Providers.GitHub({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
However, when I test out next-auth
it is not working and it seems to me the reason why is because those variables are not loading properly.但是,当我测试
next-auth
时,它不起作用,在我看来,原因是因为这些变量没有正确加载。 As such, I did a little test to see if I can access environment variables in my app and the test showed that I cannot.因此,我做了一个小测试,看看我是否可以访问我的应用程序中的环境变量,测试表明我不能。
This is how the test went:测试是这样进行的:
// .env.local (root level)
NEXT_PUBLIC_ENV_LOCAL_VARIABLE="public_variable_from_env_local"
I then add the following code to my site:然后我将以下代码添加到我的网站:
<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>
In this case, test one start
shows up and test one end
shows up, but the environmental variable does NOT show up.在这种情况下,
test one start
出现, test one end
出现,但环境变量没有出现。 The same is true for test two start
and test two end
. test two start
和test two end
也是如此。
I did a similar test with console.log - namely:我用 console.log 做了一个类似的测试——即:
console.log("test one", process.env.NEXT_PUBLIC_TEST_ONE)
console.log("test two", process.env.TEST_TWO)
That turns up as follows:结果如下:
test one undefined
test two undefined
In short, for whatever reason I seem unable to load environment variables in my nextjs app.简而言之,无论出于何种原因,我似乎无法在我的 nextjs 应用程序中加载环境变量。 Not from
next-auth
, not in the code and not in a console.log.不是来自
next-auth
,不是在代码中,也不是在 console.log 中。 The variables are undefined and I do not know why.变量未定义,我不知道为什么。
Any ideas?有任何想法吗?
Thanks.谢谢。
.env.*
files are loaded when server starts. .env.*
文件在服务器启动时加载。 Hence, any modification in them is not applied unless you restart your dev/prod server.因此,除非您重新启动 dev/prod 服务器,否则不会应用其中的任何修改。
Just halt the process ( Ctrl+C/Z
) and re-run next dev
/ next start
to make them work.只需停止该过程(
Ctrl+C/Z
)并重新运行next dev
/ next start
以使它们工作。 Note that you may also need to re-build the project ( next build
) before starting in production mode if you are using them in pages that are statically generated.请注意,如果您在静态生成的页面中使用它们,您可能还需要在开始生产模式之前重新构建项目(
next build
)。
Searching the next.js documentation I found this:搜索 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>
So it seems, if you are using next.js version at or before 9.4 you place env variables into next.config.js
看来,如果您使用9.4 或之前的 next.js 版本,则将环境变量放入
next.config.js
They also include one warning:它们还包括一个警告:
Next.js will replace process.env.customKey with 'my-value' at build time.
Next.js 将在构建时将 process.env.customKey 替换为“my-value”。 Trying to destructure process.env variables won't work due to the nature of webpack DefinePlugin.
由于 webpack DefinePlugin 的性质,试图解构 process.env 变量是行不通的。
If you are using version 9.4+ the documentation says you can use .env.local
files and prefix env variables with NEXT_PUBLIC_
to have them exposed in the browser.如果您使用的是9.4+版本,文档说您可以使用
.env.local
文件并在 env 变量前加上NEXT_PUBLIC_
前缀,以便在浏览器中公开它们。
Of note with this method is: In order to keep server-only secrets safe, Next.js replaces process.env.*
with the correct values at build time.这种方法值得注意的是:为了保证服务器机密的安全,Next.js在构建时将
process.env.*
替换为正确的值。 This means that process.env
is not a standard JavaScript object, so you're not able to use object destructuring.这意味着
process.env
不是标准的 JavaScript 对象,因此您不能使用对象解构。
To be clear, according to the most recent docs, you are supposed to需要明确的是,根据最新的文档,您应该
module.exports = { env: { secretKey: process.env.your_secret_here, }, }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.