Next.jsで環境変数を設定する方法

Next.jsでは、フロント側の環境変数とバックエンド(api)側の環境変数で呼び出し方が異なる。

フロント側では、NEXT_PUBLIC_ というプレフィックスをつけなくてはいけない。

.envに定義

バックエンド: HOST=xxxxxxx
フロントエンド: NEXT_PUBLIC_HOST=xxxx

定義した環境変数の使い方

バックエンド:   process.env.HOST
フロントエンド: proccess.env.NEXT_PUBLIC_HOST

また、.envは種類別に管理することができる。

ファイル名概要(何を定義するか)読み込み優先順位
.env環境(開発、本番)に依存しないデフォルト値常に読み込まれる4
.env.local環境に依存しないシークレットなもの
(リポジトリに含めず.ignore定義しておく)
常に読み込まれる2
.env.development開発環境で使用するデフォルト値yarn dev実行時に読み込まれる3 (開発)
.env.development.local開発環境で使用するシークレットなもの
(リポジトリに含めず.ignore定義しておく)
yarn dev実行時に読み込まれる1 (開発)
.env.production本番環境で使用するデフォルト値yarn startnext build実行時に読み込まれる3 (本番)
.env.production.local本番環境で使用するシークレットなもの
(リポジトリに含めず.ignore定義しておく)
yarn startnext build実行時に読み込まれる1 (本番)

個人的には、.env , .env.local , .env.development , .env.production の4つを使えばOKだと思う。

コメント