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:

Note: In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time. This means that process.env is not a standard JavaScript object.

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

如果您真的想使用动态值，您可以手动创建一个对象来映射暴露的环境常量并使用它来代替 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;

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

Dynamic access of environment variables in NextJS not working

javascript

reactjs

create-react-app

next.js