Next.js 將 NODE_ENV 傳遞給客戶端

Question

我正在使用 Next.js 構建一個 React SSR 應用程序。

我希望能夠在客戶端訪問 NODE_ENV，因為這將告訴我的應用程序要使用哪些 API 端點。

我正在努力為此找到一個合適的方法。 當我第一次在服務器上呈現頁面時，我想將 NODE_ENV 定義為窗口變量，然后在我進行 API 調用的輔助函數中，我會檢查代碼是在服務器上還是在客戶端上調用，並根據需要使用 window 或 process.env 變量。

有沒有人對這樣的問題有很好的解決方案。 這一定是一個常見問題，但我找不到任何好的解決方案。

Answer 1

1. 你可以將它包含在 webpack 配置中（使用 dotenv-webpack 依賴）：

 require('dotenv').config() const path = require('path') const Dotenv = require('dotenv-webpack') module.exports = { webpack: (config) => { config.plugins = config.plugins || [] config.plugins = [ ...config.plugins, // Read the .env file new Dotenv({ path: path.join(__dirname, '.env'), systemvars: true }) ] return config } }

參考： 這里

---

2. 使用 babel 插件將變量導入到整個應用程序：

env-config.js

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  'process.env.BACKEND_URL': prod ? 'https://api.example.com' : 'https://localhost:8080'
}

.babelrc.js

const env = require('./env-config.js')

module.exports = {
  presets: ['next/babel'],
  plugins: [['transform-define', env]]
}

索引.js

export default () => (
  <div>Loading data from { process.env.BACKEND_URL }</div>
)

參考： 這里

3.使用next/config：

下一個.config.js

module.exports = {
  publicRuntimeConfig: {
    API_URL: process.env.API_URL
  }
}

索引.js

import React from 'react'
import getConfig from 'next/config'

const {publicRuntimeConfig} = getConfig()
const {API_URL} = publicRuntimeConfig

export default class extends React.Component {
  static async getInitialProps () {
    // fetch(`${API_URL}/some-path`)
    return {}
  }

  render () {
    return <div>
            The API_URL is {API_URL}
    </div>
  }
}

參考： 這里

Answer 2

使用 Next 的構建時配置

@DarrylR 已經提到使用next.config.js和 Next 的運行時配置，但您也可以使用 Next 的構建時配置。

這使您可以將process.env.XXXX直接放入代碼中（如下面的第 3 步所示），並且您無需導入任何內容。 但是，如果您在使用Next.js本地構建和部署到ZEIT Now時都應設置環境變量，我不知道您是否可以使用此方法將它們保存在一個文件中（請參閱下面的第 2 步）。

運行時配置文檔建議您通常希望使用構建時配置：

警告：通常您希望使用構建時配置來提供您的配置。 這樣做的原因是運行時配置增加了渲染/初始化開銷，並且與自動預渲染不兼容。

---

腳步：

1. 為構建過程設置NODE_ENV

1.1立即使用ZEIT

如果您使用 ZEIT Now 進行部署，則可以在now.json設置構建時使用的環境變量：

{
  "version": 2,
  "build": {
    "env": {
      "NODE_ENV": "production"
    }
  }
}

1.2 本地運行時（可選）

如果你想NODE_ENV在本地以及運行時進行設置，這樣就不會被設置now.json 。 但是，您可以通過其他方式設置它，例如：

$ NODE_ENV=production npm run build

或將package.json的構建腳本更改為

"build": "NODE_ENV=production next build"

如果需要，您當然也可以為其他腳本設置NODE_ENV ，而不是 build。

2. 使process.env.NODE_ENV下一個內聯值

這增加了next.config.js描述在這里：

module.exports = {
  env: {
    NODE_ENV: process.env.NODE_ENV
  }
};

3.在代碼中使用

if (process.env.NODE_ENV === "production") {
  console.log("In production")
} else {
  console.log("Not in production")
}

Answer 3

另一個簡單的解決方案：

在根文件夾上創建 2 個文件：

.env.development
.env.production

在里面根據需要添加變量，例如在 .env.development 文件中：

NEXT_PUBLIC_ENV="development"

並在 .env.production 文件中：

NEXT_PUBLIC_ENV="production"

然后使用它例如：

console.log('Version: ', process.env.NEXT_PUBLIC_ENV);

Answer 4

從 Next.js 9.4 開始，NextJs 現在內置了對環境變量的支持，這允許您使用 .env 文件執行以下操作：

一個例子.env.local：

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

如果要將 env 變量公開給客戶端，則必須在變量前加上NEXT_PUBLIC_前綴，例如：

NEXT_PUBLIC_API_PORT=4000

如果你想使用這個變量，你可以像這樣使用它： process.env.NEXT_PUBLIC_API_PORT

有關文檔，請參見此處