无法使用动态键访问 process.env 值

Question

我有一个 nextjs（不确定它是否具有任何相关性或它是否适用于整个 nodejs）项目，我想在其中process.env使用动态键访问值：

const myKey = 'MY_KEY'
console.log(process.env[myKey]) //undefined

作为参考，我尝试过：

console.log(process.env['MY_KEY']) // gives value under MY_KEY
console.log(process.env.MY_KEY) // works too

Answer 1

首先，有一点需要注意，如果你想env在客户端使用变量，那么你需要给它们加上前缀NEXT_PUBLIC_，或者使用旧的方式将它们暴露给客户端内部next.config.js。

至于问题，这是由于 Webpack DefinePlugin工作方式的性质，我相信 NextJs 在内部使用。它在构建时直接替换文本，简单来说它只是查找process.env.MY_KEY字符串并用值替换它。但是当你解构它时，插件就再也找不到process.env.MY_KEY字符串了，你什么也得不到（仍然有process.env对象生成，但它会是空的）。

虽然这仅适用于客户端代码，因为对于服务器端 Next 实际上使用真实process.env对象并且解构将起作用。

例如，如果我们有NEXT_PUBLIC_MY_KEY=somevalue并将其记录在代码中的某处：

  const key = 'NEXT_PUBLIC_MY_KEY';

  console.log(process.env.NEXT_PUBLIC_MY_KEY);
  console.log(process.env['NEXT_PUBLIC_MY_KEY']);
  console.log(process.env[key]);
  console.log(process.env);

在客户端，您将获得：

somevalue
somevalue
undefined
{} // empty object

在服务器端，您将获得：

somevalue
somevalue
somevalue
{ ... } // object with all available env values, even system ones

在旧的env docs中有一些关于它的信息。

解决方法

您可能可以使用Runtime Configuration，但它有自己的局限性，例如，我认为页面应该是动态的（应该使用getInitialProps或getServerSideProps）才能工作。

// next.config.js
module.exports = {
  publicRuntimeConfig: {
    myEnv: 'somevalue',
    // or actually use process.env variables, they are all available here
    myEnv2: process.env.MY_ENV
  },
};

import getConfig from 'next/config';

const key = 'myEnv';

getConfig().publicRuntimeConfig[key] // 'somevalue' 

或者只是getServerSideProps像提到的其他答案一样传递你的变量。

编辑： 我实际上刚刚测试过publicRuntimeConfig，它甚至可以在静态页面上工作，至少在您使用next start. 不知道为什么文档说页面应该有getServerSideProps. 所以这可能是最终的解决方案。