为什么解构 next.js 环境变量会导致未定义？

Question

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

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

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

Answer 1

从文档：

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

对于客户端 React 组件

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