【Next.js】実行環境に応じて環境変数を切り替える

Next.jsプロジェクトで柔軟に環境変数を切り替えたい場合、npm scriptsで環境変数を設定することが便利です。

例えば、以下のようなコードがあったとします。

config.ts

export const environment = {
  dev: {
    api: 'https://dev/api',
  },
  stage: {
    api: 'https://stage/api',
  },
}

dev環境のエンドポイント、stage環境のエンドポイントがそれぞれ用意されていて、実行環境によって使い分けたいです。
ここで活躍するのが、npm scriptsです。

Next.jsに限った話ではありませんが、npm scriptsを利用したプロジェクトではnpm scriptsで任意のシェルコマンドを実行することができます。

この機能を利用してbuildやstart、devコマンドの直前に環境変数を設定するコマンドを埋め込むことによって、dev環境ではdev環境の環境変数、stage環境ではstage環境の環境変数を読み込ませることができます。
実際にdev環境のビルドとstage環境のビルドをするスクリプトが以下です。

package.json

"dev:dev": "NEXT_PUBLIC_ENV=development npm run build"
"dev:stage": "NEXT_PUBLIC_ENV=stage npm run build"

これを利用することで、以下のようにconfigを切り替えることができます。

config.ts

const environment = {
  dev: {
    api: 'https://dev/api',
  },
  stage: {
    api: 'https://stage/api',
  },
}

type Env = keyof typeof environment
export const config = environment[process.env.NEXT_PUBLIC_ENV as Env]

開発チームで使用するOSが統一されていない場合（WindowsとMacなど）共通のコマンドで環境変数を設定することはできないことに注意してください。
そういった場合は、run-script-osパッケージを利用するなどして対応してください。