web-dev-qa-db-ja.com

Next.jsはクライアントにNODE_ENVを渡します

Next.jsを使用して、React SSRアプリを作成しています。

クライアント側でNODE_ENVにアクセスできるようにしたいと思います。これにより、使用するAPIエンドポイントがアプリに通知されます。

このための適切なアプローチを見つけるのに苦労しています。最初にサーバーでページをレンダリングするときにNODE_ENVをウィンドウ変数として定義し、次にAPI呼び出しを行うヘルパー関数で、サーバーまたはクライアントでコードが呼び出されているかどうかを確認します、必要に応じてwindowまたはprocess.env変数を使用します。

誰もがそのような問題の良い解決策を持っていますか。これは一般的な問題であるに違いありませんが、良い解決策は見つかりません。

javascriptnode.jsreactjsenvironment-variablesnext.js
10
Jack Wild

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
  }
}

参照： here

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]]
}

index.js

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

参照： here

3. next/configを使用：

next.config.js

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

index.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>
  }
}

参照： here

31
Darryl R. Norbert

Nextのビルド時構成を使用する

@DarrylRはすでにnext.config.jsとNextの 実行時構成 を使用して言及しましたが、Nextの ビルド時構成 を使用することもできます。

これにより、process.env.XXXXをコードに直接挿入でき（以下の手順3に示すように）、何もインポートする必要はありません。ただし、 Next.js でローカルにビルドするときと ZEIT Now にデプロイするときの両方でenv変数を設定する必要がある場合、それらを保持できるかどうかわかりませんこのメソッドを使用して、1つのファイルで作成します（以下の手順2を参照）。

ランタイム構成ドキュメントでは、通常、ビルド時構成を使用することを推奨しています。

警告：通常、ビルド時間構成を使用して構成を提供します。これは、ランタイム構成がレンダリング/初期化オーバーヘッドを追加し、自動プリレンダリング 。と互換性がないためです。

手順：

1.ビルドプロセスにNODE_ENVを設定します

1.1 ZEIT Now の使用

ZEIT Nowを使用してデプロイする場合、now.jsonで ビルド時に使用されるenv変数 を設定できます。

{
  "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を設定することもできます。

2.次のインライン値をprocess.env.NODE_ENVにします

説明に従って、これをnext.config.jsに追加します here ：

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")
}
1
ArneHugo