Homekimizuy.dev

Next.js の環境変数（.env）の使い方

はじめに

環境変数はこれまで、next.config.js 内で設定する必要がありましたが v9.4 以降からより直感的に管理できるようになりました。

公開/非公開、開発/本番といった目的によってファイルを使い分けます。個人的に少し混乱した部分などをまとめておきます。

tldr

  • 基本的に開発環境では .env.local のみで十分。このファイルには非公開のシークレットキーなどを保存するため .gitignore にリストしておきます。
  • 本番環境での環境変数の設定は .env ファイルではなく Vercel や Netlify といったホスティングサービス側でやります。

Vercel CLI の基本的な使い方

.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_を環境変数のプレフィックスにつけると、その値をブラウザ上に公開できます。

.env.local
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