javascript - 无法使用动态键访问 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客户端上的变量然后你need to prefix他们与 NEXT_PUBLIC_ , 或使用 older way将它们暴露给内部的客户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 .所以这可能是最终的解决方案。