可以使用动态密钥访问进程.env值 [英] Can't access process.env values using dynamic keys

查看:17
本文介绍了可以使用动态密钥访问进程.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,但它有自己的限制,例如,我认为页面应该是动态的(应该使用getInitialPropsgetServerSideProps)。

// 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。因此,这可能是最终的解决方案。

这篇关于可以使用动态密钥访问进程.env值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆