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番上なので、すベて用意する必要はありません。というより、基本的には以下のどちらかの方法で管理します。
.env.local
だけ使う.env.development
と.env.production
を使う
サイトにも注意書きがありますが、.env*.local
ファイルは.gitignore
ファイルに追加して管理の対象外とします。
一方、.env
と.env.development
と.env.production
のファイルは.gitignore
ファイルには追加せずに管理します。