從客戶端訪問環境變量

Question

我正在使用fetch從我的組件中進行很多 API 調用。 每次我必須編寫這個邏輯來確定我所處的環境所以，我創建了一個 Utils class，它返回正確的基礎 url：

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 所以我這樣做了，但問題仍然存在。 處理這個問題的理想方法是什么？

Answer 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,; 

Answer 2

您的 class 實際上看起來像這樣：-

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前綴都將確保在構建時這些值被拾取並內聯，然后再將其發送到瀏覽器。