Nextjs 环境变量在 js 页面中不起作用
Nextjs environment variables not working in js pages
我正在创建一个 nextjs 网站。在我的 js 文件中,我正在获取 API 数据并通过 .env.local
文件分配令牌。但是当我尝试访问我创建的 .env variable
时,它没有返回任何内容。我的意思是,它 returns empty/undefined
.
我的js文件代码:
export async function getStaticProps() {
const response = await fetch(`https:/mywebsite.com?token=${process.env.PRAISES_TOKEN}`);
const body = await response.json();
console.log(body);
return {
props: {
naats: body
}
}
}
.env.local
PRAISES_TOKEN=MY_TOKEN
我的 nextjs
项目版本是 12
.
在我的gitbash中,它returns是这样的,变量没有值:
https://website.com?token=
更新:
我发现的是,当我将任何 token/hash 分配给 env 变量时,变量 returns 未定义。如果我分配 https url 那么变量工作正常。所以,我虽然用像 https://website.com?token=jhasvdiasvdjkagdg8catscuas
这样的标记来分配完整的 url,但它不起作用并且 returns 未定义。变量仅适用于 https url 值但没有参数。
这很奇怪。
有人可以帮我解决这个问题吗?我不想让 token/api_token
暴露给 browser/public。
Next.js 会在你的 .env* 文件中自动扩展变量 $VAR
,所以你需要用 \
转义 $
符号,所以如果你的令牌是$abcd$ef
它应该是这样的:PRAISES_TOKEN=$abcd$ef
用 "
引号包裹值也是个好主意,因为令牌通常还有其他符号,如 =
等:
PRAISES_TOKEN="$abcd$ef"
我正在创建一个 nextjs 网站。在我的 js 文件中,我正在获取 API 数据并通过 .env.local
文件分配令牌。但是当我尝试访问我创建的 .env variable
时,它没有返回任何内容。我的意思是,它 returns empty/undefined
.
我的js文件代码:
export async function getStaticProps() {
const response = await fetch(`https:/mywebsite.com?token=${process.env.PRAISES_TOKEN}`);
const body = await response.json();
console.log(body);
return {
props: {
naats: body
}
}
}
.env.local
PRAISES_TOKEN=MY_TOKEN
我的 nextjs
项目版本是 12
.
在我的gitbash中,它returns是这样的,变量没有值:
https://website.com?token=
更新:
我发现的是,当我将任何 token/hash 分配给 env 变量时,变量 returns 未定义。如果我分配 https url 那么变量工作正常。所以,我虽然用像 https://website.com?token=jhasvdiasvdjkagdg8catscuas
这样的标记来分配完整的 url,但它不起作用并且 returns 未定义。变量仅适用于 https url 值但没有参数。
这很奇怪。
有人可以帮我解决这个问题吗?我不想让 token/api_token
暴露给 browser/public。
Next.js 会在你的 .env* 文件中自动扩展变量 $VAR
,所以你需要用 \
转义 $
符号,所以如果你的令牌是$abcd$ef
它应该是这样的:PRAISES_TOKEN=$abcd$ef
用 "
引号包裹值也是个好主意,因为令牌通常还有其他符号,如 =
等:
PRAISES_TOKEN="$abcd$ef"