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

Next.js を使うプロジェクトでの開発をいくつか経験した結果、環境変数の取り扱いについての知見が溜まりましたので共有します！

こんな読者の方を対象にしています。
• Next.js 標準の環境変数機能に物足りなさを感じている • デプロイする環境に合わせて環境変数を切り替えたい。 • 環境変数の TypeScript 型定義が欲しい • 環境変数に対してテストをしたい • 複雑な実装やライブラリの導入なしで上記を実現したい

サンプルリポジトリへのリンクを後半に記載しています。実装ベースで確認したい方は後半へどうぞ 💁‍♂️

Next.js 標準の環境変数機能に不足していること

Next.js には標準で環境変数を管理する機能があります。（以後 .env と呼びます。）

.env の方法は提供されている機能が最小限となっており、次の 3 つのタイミングに合わせてしか環境を切り替えることができません。

Untitled

dev-1, dev-2, staging など複数の環境を切り替えたい場合にこの方法だと少し物足りなくなってきます。 また、定義した環境変数が自動で TypeScript の型定義に反映されることもありません。

以降の章からそんな不足している機能を補う実装を紹介します。

その前に

標準の .env の方法でも複数の環境を切り替えられる方法は一応あります。 ビルド時に反映したい env ファイルを .env.production にコピーする方法です。

これで必要十分な方もいらっしゃるかも知れません。プロジェクト規模や各自の方針に合わせてでどう対応するか検討してみてください。

デプロイする環境に合わせて環境変数を切り替える

まずこちらを満たす最小構成を作ります。

env/ ディレクトリを作成し、デフォルトの環境変数ファイルとなる env/env.local.json を作成します。

以降、環境変数に関係するファイルは env/ ディレクトリに閉じて配置するようにします。 ディレクトリ名は env/ 以外でも大丈夫です。

環境の切り替えを確認するために staging 環境のファイルを作成してみます。 JSON だとコメントを挿入できないので不便ですよね？ JavaScript でも作成できます 👍

env/env.staging.js