開発と本番環境で使用する環境変数の設定の仕方を調べる

[Kotaro666-dev]

設定ファイルの概要

• 共通デフォルトの環境変数: .env （絶対に読み込まれる）
• 開発環境の環境変数: .env.development （next dev で読み込まれる）
• 本番環境の環境変数: .env.production （next start で読み込まれる）

.env*.local should be added to .gitignore, as those files are intended to be ignored.

適用される優先順位

NODE_ENV=production

• .env.production.local
• .env.local
• .env.production
• .env

NODE_ENV=development

• .env.development.local
• .env.local
• .env.development
• .env

環境変数の設定ファイル戦略

開発・検証・本番環境で共通

• .env

開発

• .env.development.local: 検証環境に設置。DBのログイン情報を配置（.gitignoreに設置する）
• .env.development: 開発環境で使用する環境変数を設置

本番

• .env.production.local: 本番環境に設置。DBのログイン情報を配置（.gitignoreに設置する）
• .env.production: 本番環境で使用する環境変数を設置

NODE_ENV で環境により分岐させる

if (process.env.NODE_ENV === "development") {
  // 開発環境
} else if (process.env.NODE_ENV === "production") {
  // 本番環境
}

https://github.com/vercel/next.js/blob/7e370134fb46dede3809df664db95c603a5a2997/packages/next/bin/next.ts#L87-L95

早見表

以下の早見表は分かりやすい。

環境変数名の prefix として「NEXTPUBLIC」を追加しないと、クライアント側には表示されずに undefined になってしまう。

https://qiita.com/ktanoooo/items/64cad61096cf45f18c24#yarn-dev%E8%B5%B7%E5%8B%95%E6%99%82

設定ファイルのディレクトリ分け

以下のような方法で、環境ごとに読み込む環境変数ファイルを変更できる

https://zenn.dev/aktriver/articles/2022-04-nextjs-env

参考資料

https://nextjs.org/docs/basic-features/environment-variables