Next.jsで環境変数を使うには

公開日:2021/8/27更新日:2023/1/21

Next.js環境変数を使うには、ルートフォルダに.env.localファイルを作成します。next.config.jsへの記述などは不要です。process.env.変数名で、どのファイルからも参照できます。

サンプルコード

.env.localファイルにAPI_TOKEN変数を定義します。

API_TOKEN=tw&K35LHN->mnQvD

これで、他のファイルからprocess.env.API_TOKENを参照すると、値を取得できます。

const token = process.env.API_TOKEN;
console.log(token);

// コンソール結果 => tw&K35LHN->mnQvD

環境別に定義する

Nuxt.jsの環境変数とは違い、Next.jsには環境変数用の拡張システムがあり、開発環境と本番環境とで別々の変数を定義することができます。

  • .env.development(開発用)
  • .env.production(本番用)

力関係は.env.localが1番上なので、すベて用意する必要はありません。というより、基本的には以下のどちらかの方法で管理します。

  1. .env.localだけ使う
  2. .env.development.env.productionを使う

サイトにも注意書きがありますが、.env*.localファイルは.gitignoreファイルに追加して管理の対象外とします。

一方、.env.env.development.env.productionのファイルは.gitignoreファイルには追加せずに管理します。