「Next.js」の環境を切り替えてビルドする

「Next.js」のビルドを実行する場合、アクセスするAPIを切り替えたりと、検証環境と本番環境を切り替えてビルドしたいことが多数あります。
しかし、「Next.js」がバージョン13になっても、そういった機能はなく「.env.*.local」などの決まった環境ファイルしか読み込みません。
今回はその問題を解決するために、ビルド時に環境を切り分けるようにしたいと思います。

環境

• Next.js 13.2.3
• React 18.2.0
• env-cmd 10.1.0

「env-cmd」をインストール

そこで「env-cmd」を使用します。
これはビルド時に読み込む「.env」ファイルの切り替えができるようになります。
以下のコマンドでインストールします。

$ yarn add env-cmd

環境ファイルを名称を変更

しかし、このままでは「.env.production」があると、切り替えてもこちらを優先して使用するようになります。
そこで以下のようにファイル名称を変更します。

.env.production -> .env.prod

また検証環境切り替えの環境ファイル「.env.staging」を作成します。

ビルドコマンドを修正

「package.json」の「scripts」を以下のように設定します。

{
  ...省略
  "scripts": {
    ...省略
    "build": "env-cmd -f .env.prod next build && next export",
    "build:stg": "env-cmd -f .env.staging next build && next export", 
  },
  ...省略
}

設定後に以下のようにビルドコマンドを切り替えます。

$ yarn run build

$ yarn run build:stg