可以使用动态密钥访问进程.env值

我有一个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

---

解决方案

首先要注意的一点是，如果要在客户端使用env变量，则need to prefix使用NEXT_PUBLIC_，或使用older way将它们公开给客户端next.config.js。

至于这个问题，这是因为webpackDefinePlugin是如何工作的，我相信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。因此，这可能是最终的解决方案。