为什么解构 next.js 环境变量会导致 undefined？答案

【问题标题】：Why are destructured environment variables undefined in Next.js?为什么解构 next.js 环境变量会导致 undefined？
【发布时间】：2021-08-06 12:43:43
【问题描述】：

我用 api_key 创建了一个 .env 文件解构值时

const { api_key } = process.env; // = undefined
const key = process.env.api_key; // = value

有人可以帮忙解释一下吗？

【问题讨论】：

删除{} 并重试。有多个导入时使用{}
@HimanshuSaxena 这并不能解释为什么节点结果未定义。这是 es6 的用法 - 使用解构，否则适用于其他所有内容。
你能显示你试过的实际代码吗？我的意思是你使用了一些console.log，对吧？或者你怎么知道 api_key 是未定义的？你能创建一个最小的例子来证明这一点吗？
这两行应该是一样的。你究竟是如何运行这个脚本的？在什么环境下？你如何加载.env 文件？您使用的是转译器/构建管道吗？
@Bergi 我正在使用 Next.js。我的 console.log 在我的反应组件中。

标签： javascript node.js environment-variables next.js

【解决方案1】：

来自the docs：

注意：为了保证仅服务器机密的安全，Next.js 在构建时将process.env.* 替换为正确的值。这意味着process.env 不是标准的 JavaScript 对象，因此您无法使用对象解构。

对于客户端 React 组件

由于 NEXT_PUBLIC_ 前缀，该值将内联到发送到浏览器的 JavaScript。这种内联发生在构建时，因此需要在构建项目时设置各种NEXT_PUBLIC_ env。

【讨论】：