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

我在创建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。

- bdmason

---

@brc-dd，是的，请检查您的控制台，它正在记录未定义。 - bdmason

我需要浏览器中的值，这就是问题所在。 - bdmason

Answer 1

根据官方文档的说明：

注意：为了保护仅存在于服务器端的机密信息，Next.js 会在构建时替换 process.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;

- brc-dd

---

干杯，真遗憾是这样的。Create React App实现了相同级别的安全性（只允许通过前缀的环境变量），而不会破坏对象。 - bdmason

@bdmason 你可以尝试创建一个对象，将所有公共环境映射到该对象中，并使用它来代替 process.env。 - brc-dd

@bcr-dd 我看到有一种方法可以进行配置，但我希望它被 gitignore。似乎也有一种按环境设置的方法，对于我的项目来说，这可能是最好的解决方案，因为客户端环境变量从来不是机密的，并且这样可以避免我们传递环境变量文件。感谢您的帮助。 - bdmason