NextJS 中环境变量的动态访问不起作用

Question

我无法在 NextJS 中动态访问环境变量。在.env.local我有：

NEXT_PUBLIC_TEST=test

在_app.tsx我有：

const test = "NEXT_PUBLIC_TEST";
console.log(process.env.NEXT_PUBLIC_TEST); // = 'test'
console.log(process.env[test]); // = undefined

我在 Create React APP 中尝试了同样的事情：

# .env
const test = 'REACT_APP_TEST'
console.log(process.env.REACT_APP_TEST) // = 'test'
console.log(process.env[test]) // = 'test'

有谁知道为什么 NextJS 不允许这样做以及如何覆盖它？我知道next.config.js这是一件事，但我想使用.env.

Answer 1

根据官方文档：

注意：为了确保仅服务器机密的安全，Next.jsprocess.env.*在构建时替换为正确的值。这意味着这process.env不是标准的 JavaScript 对象。

因此，您尝试做的事情只能在开发模式下进行，在服务器端代码中也是如此。

您可以手动创建一个映射公开环境常量的对象并使用它，而不是process.env如果您确实想使用动态值。

这是一个例子：

// utils/config.js

export default {
  TEST: process.env.NEXT_PUBLIC_TEST
};

// pages/index.js

import config from "../utils/config";

const test = "TEST";
console.log(config[test]);

const IndexPage = () => <div>Hello World</div>;
export default IndexPage;