Next.js の環境変数（.env）の使い方
はじめに
環境変数はこれまで、next.config.js 内で設定する必要がありましたが v9.4 以降からより直感的に管理できるようになりました。
公開/非公開、開発/本番といった目的によってファイルを使い分けます。個人的に少し混乱した部分などをまとめておきます。
tldr
- 基本的に開発環境では .env.local のみで十分。このファイルには非公開のシークレットキーなどを保存するため .gitignore にリストしておきます。
- 本番環境での環境変数の設定は .env ファイルではなく Vercel や Netlify といったホスティングサービス側でやります。
.env ファイルはリポジトリに含めてもいいのか
.env.local 以外のファイルはリポジトリに入れるべきらしいです。
備考: .env、.env.development、.env.production ファイルはデフォルトを定義しているので、リポジトリに含めるべきです。
Note: .env, .env.development, and .env.production files should be included in your repository as they define defaults.
https://nextjs.org/docs/basic-features/environment-variables#default-environment-variables
公開しても安全な値だけを保存するようにしましょう。
.env ファイルの種類と違い
.env.local
- シークレットキーなどを保存します。なので GitHub などにプッシュしてはいけません。
- 開発環境時（
next devしたとき）に読み込まれます。
.env
- 公開しても安全な値を保存します。
- .env.development や .env.production が無い場合はこのファイルが読み込まれます。
.env.development
- 公開しても安全な値を保存します。
- 開発環境時（
next devしたとき）に読み込まれます。
.env.production
- 公開しても安全な値を保存します。
- 本番環境時（
next startしたとき）に読み込まれます。
.env.test
- jest や cypress などのテスト環境で読み込まれます。
優先度
同じ名前の環境変数が複数の環境変数ファイルに保存されている場合は、以下の優先度になります。
開発環境
.env.local > .env.development > .env
本番環境
.env.production > .env
環境変数を公開する
通常、環境変数は Node.js 実行時、つまりサーバサイドの処理で注入されるためクライアントでの利用はできません。
しかし、NEXT_PUBLIC_を環境変数のプレフィックスにつけると、その値をブラウザ上に公開できます。
1NEXT_PUBLIC_ENV_VARIABLE="public_variable"
1const TestComponent = () => {
2 return <div>{process.env.NEXT_PUBLIC_ENV_VARIABLE}</div>;
3};
ただ、環境変数の実体は標準的な JS オブジェクトではないため Object destructuring は使えません。
1// Does NOT work.
2const { NEXT_PUBLIC_ENV_VARIABLE } = process.env;
とは言ったものの、実際に動かしてみると .env、.env.development、.env.production では Object destructuring が使えました。.env.local ファイルがプロジェクト内に存在すると使えなくなりました。leerob.io という Next.js の中の人が運営するサイトでもやっています。なのでよくわかりません。
環境変数の挙動を試してみたい場合は Next.js の example が勉強になります。
参考
https://nextjs.org/docs/basic-features/environment-variables