Next.js での環境変数の参照方法

更新日：2025/02/02

環境変数の使用方法

環境変数は process.env.環境変数名 で参照できます。

NEXT_PUBLIC_の使い方

通常、環境変数はサーバーサイドでのみアクセス可能ですが、NEXT_PUBLIC_を付けることで、クライアントサイドのJavaScriptからも安全にアクセスできるようになります。

クライアント側で使用する場合

  • NEXT_PUBLIC_ をつけた変数のみ参照可能
  • NEXT_PUBLIC_ がないと undefined になる

サーバー側で使用する場合

  • NEXT_PUBLIC_ の有無に関わらず参照可能

環境変数が参照されるファイルの種類

Next.js では、以下の .env ファイルが自動的に参照されます。

ファイル名役割
.env基本の環境変数を定義
.env.localローカル開発専用（.gitignore 推奨）
.env.developmentnext dev 実行時に適用
.env.productionnext build や next start 実行時に適用
.env.testNODE_ENV=test のときに適用
  • 優先順位
    .env.local > .env.環境名 > .env
    (.env.local が最優先)
新規記事

すべてを見る
人気記事ランキング
SEOサンプル記事
話題のキーワードから探す