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"

More info