Next.jsの環境変数の使い方の基本と、Vercelの環境変数との関係性について

Next.jsの公式サイトDefault Environment Variables を参考に、Next.jsの環境変数の取り扱い方法と、Vercel上の環境変数との関係性について調べ、ユースケースをまとめてみました。

Next.jsの環境変数の取り扱い方法について

• 後述の通り、環境変数の設定ファイルにXXXXX=Yの形で環境変数を定義しておけば、プログラム中でprocess.env.XXXXX の形式で環境変数を参照できる。

• ただし、普通に環境変数を定義した場合、これらはブラウザ上からは見えないので(サーバーサイドで実行されるコードでのみ見える)、ブラウザ上で環境変数を使えるようにしたい場合(例えば、クライアントサイドでHTTP Requestを送信したい場合に環境変数を使いたい場合)には、環境変数名をNEXT_PUBLIC_で始めるようにすれば(ex. NEXT_PUBLIC_XXXXX)、クライアントサイドのJavaScript上から参照できる。

.env系

特徴

リポジトリに含めても良い環境変数を書く。

各ファイルの特徴

• .env

  • すべての環境のデフォルト設定となる。

• .env.development

  • next dev で起動した際に使われる。
  • .env に優先する。

• .env.production

  • next start で起動した際に使われる。
  • .env に優先する。

.env.local系

特徴

リポジトリに含めてはいけない環境変数を書く。(シークレット等)
リポジトリのトラッキング対象とはしない。

各ファイルの特徴

• .env.local

  • 上記の.env系のすべて(.env, .env.developmentもしくは.env.production)に優先する。

• .env.development.local

  • next dev で起動した際に使われる。
  • .env, .env.development, .env.local に優先する。

• .env.production.local

  • next start で起動した際に使われる。
  • .env, .env.production, .env.local に優先する。

Next.jsでどこに何を記述すべきなのか

• .env

  • 環境に影響されない設定かつシークレット系ではない設定を記述。
    • ex. リージョン名とか
  • リポジトリでのトラッキング対象に含めるファイル。

• .env.{ENV}

  • 環境によって変わる設定かつシークレット系ではない設定を記述。
    • ex. バケット名とか
  • リポジトリでのトラッキング対象に含めるファイル。

• .env.local

  • 環境に影響されない設定かつシークレット系の設定を記述。
    • ex. 環境に左右されない接続情報とか
  • リポジトリでのトラッキング対象に含めてはいけないファイル。
  • この情報をVercel上に管理する画面はないので、このファイルは使わずに冗長的に.env.{ENV}.localに書くのも一つの手。

• .env.{ENV}.local

  • 環境によって変わる設定かつシークレット系の設定を記述。
    • ex. 環境ごとのアクセスキーとか
  • リポジトリでのトラッキング対象に含めてはいけないファイル。

Next.jsの各環境変数ファイルの優先度

• .env.{ENV}.local > .env.local > .env.{ENV} > .env となる。

• つまり、全てのファイルに環境変数を定義した場合には、.env.{ENV}.localの値が使われることになる。

Vercel上の環境変数とVercelコマンドについて

• Vercel上では、Next.jsで設定した環境変数ファイル(.env, .env.production, .env.development)がそのまま使用される。

  • .env.developmentで設定された環境変数は、Previewで使用される。

• .env.{ENV}.localで設定していた環境変数は、GUI上で、Production用、Preview/Development用にそれぞれ設定できるので、画面から普通にセットすればよい。

  • ただし、環境によらないシークレットを保存する方法がVercelにはないので、.env.localの情報をVercelでは設定できない。

• Vercel上でDevelopment環境変数を設定している場合、vercel env pull [ファイル名。デフォルトは.env] で、指定したファイル名、もしくは.envにdevelopment系の環境変数を引き抜くことができる。

  • 上述の通り、.env.local を管理する方法がVercelにはないので、.local.envを使っている場合にはその内容もpullされてくることになる。

• 上記のNext.jsの環境変数のスタンダードとして、シークレット系は.localに書くのがいいので、もしVercel上に環境変数を設定していたら、vercel env pull .env.local で環境変数を引き抜きが良いかな・・・。

参考

Default Environment Variables