フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest <アプリ名> ) または pnpm create next-app@latest <アプリ名> または bun create next-app <アプリ名> )

next.js で .env.staging を使用したい

● next.js 16 でのやり方

dotenv-cli はうまくいかないので、.env にコピーしてからビルドするというのがシンプルで良いかもです。

(ただし .env.local , .env.production が存在するとそれらがローカルサーバやビルド時に読み込まれるので、別名で運用する必要があります。)

package.json

    "build:staging": "rm -f .env && cp .env.staging .env && next build",

● next.js 15 以前でのやり方

dotenv-clienv-cmd どちらか好きな方を使用しましょう

● A. dotenv-cli を使って Next.js のビルドで .env.staging を使用できるようにする

・1. dotenv-cli のインストール

npm i -D dotenv-cli

・2. .env.staging ファイルを指定しながら staging用のビルドコマンドを実行する

npx dotenv -e .env.staging -- next build

.env.production も .env.prod に変更しておいて、明示的に指定してやるとうっかり読み込まれることがなくなるのでおすすめです。

dotenv で .env.prod を指定してビルド

mv .env.production .env.prod
npx dotenv -e .env.prod -- next build

Dockerfile で .env.prod を .env にコピーしてからビルド

RUN COPY .env.prod  .env && \
    npm run build

なお、.env.local がある場合は .env.development にリネームしておきましょう

● B. env-cmd を使って Next.js のビルドで .env.staging を使用できるようにする

・1. env-cmd のインストール

npm i -D env-cmd

・2. .env.staging ファイルを指定しながら staging用のビルドコマンドを実行する

env-cmd -f .env.staging  next build
No.2439
06/26 15:39

edit