Nextjs环境变量在js页面中不起作用答案

【问题标题】：Nextjs environment variables not working in js pagesNextjs环境变量在js页面中不起作用
【发布时间】：2022-01-13 13:25:42
【问题描述】：

我正在创建一个 nextjs 网站。在我的 js 文件中，我正在获取 API 数据并通过 .env.local 文件分配令牌。但是当我尝试访问我创建的.env variable 时，它没有返回任何内容。我的意思是，它返回 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。
在我的 git bash 中，它像这样返回，没有变量值：

https://website.com?token=

更新： 我发现的是，当我将任何令牌/哈希分配给 env 变量时，变量返回未定义。如果我分配 https url，那么变量可以正常工作。所以，我虽然用https://website.com?token=jhasvdiasvdjkagdg8catscuas 之类的令牌分配完整的url，但它不起作用并返回未定义。变量仅适用于 https url 值，但没有参数。这很奇怪。

有人可以帮我解决这个问题吗？我不想将我的token/api_token 暴露给浏览器/公众。

【问题讨论】：

您是否尝试过在 getstatisprops 函数之外记录您的环境？
另外，请记住在更改环境时重新启动服务器
@PCPbiscuit 是的，它在控制台日志中返回undefined。我总是重启
您的代码看起来不错，应该可以工作。也许您需要用" 包装价值？另外，你确定你没有解构process.env吗？您是否 100% 内联使用它，就像在您的示例中一样？还是不使用存储在某个变量中的动态密钥访问它？
@Danila Wrapping in " 是多余和不必要的，但我同意你的观点，这段代码应该可以工作。我刚刚试了一下

标签： javascript reactjs next.js environment-variables

【解决方案1】：

Next.js 将自动在您的 .env* 文件中扩展变量 $VAR，因此您需要使用 \ 转义 $ 符号，因此如果您的令牌是 $abcd$ef，它应该如下所示：@ 987654326@

用" 引号包裹值也是个好主意，因为标记通常还有其他符号，例如= 等：

PRAISES_TOKEN="\$abcd\$ef"

More info

【讨论】：

它起作用了，我只是用双引号括起来。现在，正如您告诉我关于转义 $ 符号的那样，它以这种方式工作。谢谢朋友