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

根据official docs：

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

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

如果您真的想使用动态值，您可以手动创建一个映射公开环境常量的对象并使用它来代替 process.env。

Here is an example:

// 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;