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

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

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

● 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
03/10 10:28

edit