从客户端访问环境变量[重复]答案

【问题标题】：Access environment variables from client [duplicate]从客户端访问环境变量[重复]
【发布时间】：2022-01-02 14:43:22
【问题描述】：

我正在使用 fetch 从我的组件中进行大量 API 调用。每次我必须编写这个逻辑来确定我在哪个环境中所以，我创建了一个返回正确基 url 的 Utils 类：

export default class Utils {
  static get baseUrl() {
    const inDev = process.env.NODE_ENV !== 'production';
    const { NEXT_PUBLIC_DEV_URL, NEXT_PUBLIC_PROD_URL } = process.env;
    return inDev ? NEXT_PUBLIC_DEV_URL : NEXT_PUBLIC_PROD_URL;
  }
}

但现在我在加载组件时收到此错误：

ReferenceError: process is not defined

我环顾四周，发现我需要将我的变量标记为 NEXT_PUBLIC，所以我这样做了，但问题仍然存在。处理这个问题的理想方法是什么？

【问题讨论】：

您是否尝试通过 浏览器 中的代码执行此操作？
是的，但我想next.js 使用 webpack 将环境变量替换为实际值，对吧？
process 对象在浏览器中不可用；它没有任何意义。您必须进行从客户端到服务器的 ajax 调用，或者确保您的服务器将上下文信息作为标准页面模板的一部分提供。
这是否回答了您的问题：Dynamic access of environment variables in NextJS not working？ “Next.js 在构建时将process.env.* 替换为正确的值。这意味着process.env 不是标准的JavaScript 对象。” - 意味着您不能在客户端解构process.env -side，您必须按原样使用process.env.NEXT_PUBLIC_DEV_URL。

标签： javascript reactjs next.js

【解决方案1】：

如果您想向客户端公开 ENV 变量，您可以在 NextJS 配置 (next.config.js) 中使用 publicRuntimeConfig。你可以这样做：

publicRuntimeConfig: {
  myEnvVar: process.env.MY_ENV_VAR
}

然后在文件中你想使用你的 ENV 变量：

import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();

const envVar = publicRuntimeConfig.myEnvVar // store in it a 'const' or do whatever you want with it,;

【讨论】：

【解决方案2】：

您的课程实际上可能是这样的：-

export default class Utils {
  static get baseUrl() {
    return process.env.NEXT_PUBLIC_URL;
  }
}

NEXT_PUBLIC 前缀应该可以很好地内联在构建时替换并按照docs 发送到浏览器的值。

在您的 .env.development（或任何您的开发环境文件被称为）文件中，您可以让 NEXT_PUBLIC_URL 指向 http://localhost:8000 并且在您的生产中，您可能会有生产环境变量使用 GUI 进行设置（例如在 Netlify 或 Vercel 中），因此 NEXT_PUBLIC_URL 可以是 https://blablasite.com。

无论哪种方式，NEXT_PUBLIC 前缀都将确保在构建时这些值在发送到浏览器之前被提取和内联。

【讨论】：