Next.jsで環境変数を使用する方法

Next.jsには環境変数の組み込みサポートがあり、以下のことが可能です：

.envを使用して環境変数を読み込む
NEXT_PUBLIC_をプレフィックスとしてブラウザ用に環境変数をバンドルする

警告: デフォルトのcreate-next-appテンプレートは、すべての.envファイルが.gitignoreに追加されることを保証します。これらのファイルをリポジトリにコミットすることはほとんどありません。

環境変数の読み込み

Next.jsは.env*ファイルからprocess.envに環境変数を読み込む組み込みサポートを提供しています。

.env

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

これにより、process.env.DB_HOST、process.env.DB_USER、process.env.DB_PASSがNode.js環境に自動的に読み込まれ、Next.jsのデータフェッチングメソッドやAPIルートで使用できるようになります。

例えば、getStaticPropsを使用する場合：

pages/index.js

export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}

`@next/env`を使用した環境変数の読み込み

Next.jsのランタイム外で環境変数を読み込む必要がある場合（ORMやテストランナーのルート設定ファイルなど）、@next/envパッケージを使用できます。

このパッケージはNext.js内部で.env*ファイルから環境変数を読み込むために使用されています。

使用するには、パッケージをインストールし、loadEnvConfig関数を使用して環境変数を読み込みます：

npm install @next/env

import { loadEnvConfig } from '@next/env'

const projectDir = process.cwd()
loadEnvConfig(projectDir)

その後、必要に応じて設定をインポートできます。例えば：

import './envConfig.ts'

export default defineConfig({
  dbCredentials: {
    connectionString: process.env.DATABASE_URL!,
  },
})

他の変数の参照

Next.jsは、.env*ファイル内で$を使用して他の変数を参照する変数（例：$VARIABLE）を自動的に展開します。これにより、他のシークレットを参照できます。例えば：

.env

TWITTER_USER=nextjs
TWITTER_URL=https://x.com/$TWITTER_USER

上記の例では、process.env.TWITTER_URLはhttps://x.com/nextjsに設定されます。

豆知識: 実際の値に$を含む変数を使用する必要がある場合、エスケープする必要があります（例：\$）。

ブラウザ用の環境変数のバンドル

NEXT_PUBLIC_がプレフィックスされていない環境変数はNode.js環境でのみ利用可能で、ブラウザからはアクセスできません（クライアントは別の環境で実行されます）。

ブラウザで環境変数の値を利用可能にするために、Next.jsはビルド時に値をJavaScriptバンドルに「インライン化」し、process.env.[variable]へのすべての参照をハードコードされた値に置き換えます。これを行うには、変数にNEXT_PUBLIC_をプレフィックスするだけです。例えば：

Terminal

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

これにより、Next.jsはNode.js環境内のprocess.env.NEXT_PUBLIC_ANALYTICS_IDへのすべての参照を、next buildを実行する環境の値で置き換え、コード内のどこでも使用できるようになります。これはブラウザに送信されるJavaScriptにインライン化されます。

注記: ビルド後、アプリはこれらの環境変数の変更に応答しなくなります。例えば、Herokuパイプラインを使用して1つの環境でビルドしたスラグを別の環境にプロモートする場合、または単一のDockerイメージを複数の環境にビルド・デプロイする場合、すべてのNEXT_PUBLIC_変数はビルド時に評価された値で固定されるため、プロジェクトのビルド時にこれらの値を適切に設定する必要があります。ランタイム環境値にアクセスする必要がある場合は、クライアントに提供する独自のAPIを設定する必要があります（オンデマンドまたは初期化時）。

pages/index.js

import setupAnalyticsService from '../lib/my-analytics-service'

// 'NEXT_PUBLIC_ANALYTICS_ID'は'NEXT_PUBLIC_'がプレフィックスされているためここで使用可能。
// ビルド時に`setupAnalyticsService('abcdefghijk')`に変換されます。
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

function HomePage() {
  return <h1>Hello World</h1>
}

export default HomePage

動的ルックアップはインライン化されないことに注意してください：

// これは変数を使用しているためインライン化されません
const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])

// これは変数を使用しているためインライン化されません
const env = process.env
setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)

ランタイム環境変数

Next.jsはビルド時とランタイムの両方の環境変数をサポートします。

デフォルトでは、環境変数はサーバーでのみ利用可能です。ブラウザに環境変数を公開するには、NEXT_PUBLIC_をプレフィックスする必要があります。ただし、これらの公開環境変数はnext build中にJavaScriptバンドルにインライン化されます。

ランタイム環境変数を読み取るには、getServerSidePropsを使用するか、App Routerを段階的に採用することを推奨します。

これにより、異なる値を持つ複数の環境でプロモートできる単一のDockerイメージを使用できます。

豆知識:

register関数を使用してサーバー起動時にコードを実行できます。
スタンドアロン出力モードでは動作しないため、runtimeConfigオプションの使用は推奨しません。代わりに、この機能が必要な場合はApp Routerを段階的に採用することを推奨します。

developmentとproduction環境に加えて、3番目のオプションとしてtest環境があります。開発や本番環境のデフォルトを設定できるのと同じように、testing環境用に.env.testファイルで設定できます（ただし、これは前の2つほど一般的ではありません）。Next.jsはtesting環境では.env.developmentや.env.productionから環境変数を読み込みません。

これは、jestやcypressなどのツールでテストを実行する際に、テスト目的のみに特定の環境変数を設定する必要がある場合に便利です。NODE_ENVがtestに設定されている場合、テストのデフォルト値が読み込まれますが、通常はテストツールがこれを処理するため手動で行う必要はありません。

test環境とdevelopmentおよびproduction環境には小さな違いがあります：.env.localは読み込まれません。これは、テストがすべての人に対して同じ結果を生成することを期待しているためです。これにより、.env.local（デフォルトセットを上書きすることを意図しています）を無視することで、異なる実行間で同じ環境デフォルトが使用されます。

豆知識: デフォルトの環境変数と同様に、.env.testファイルはリポジトリに含めるべきですが、.env.test.localは含めるべきではありません。.env*.localは.gitignoreを通じて無視されることを意図しています。

ユニットテストを実行する際、@next/envパッケージのloadEnvConfig関数を活用して、Next.jsと同じ方法で環境変数を読み込むことができます。

// 以下はJestのグローバルセットアップファイルなどで使用可能
import { loadEnvConfig } from '@next/env'

export default async () => {
  const projectDir = process.cwd()
  loadEnvConfig(projectDir)
}

環境変数の読み込み順序

環境変数は以下の場所で順番に検索され、変数が見つかると停止します。

process.env
.env.$(NODE_ENV).local
.env.local（NODE_ENVがtestの場合はチェックされません）
.env.$(NODE_ENV)
.env

例えば、NODE_ENVがdevelopmentで、.env.development.localと.envの両方で変数を定義している場合、.env.development.localの値が使用されます。

豆知識: NODE_ENVに許可される値はproduction、development、testです。

豆知識

/srcディレクトリを使用している場合、.env.*ファイルはプロジェクトのルートに残す必要があります。
環境変数NODE_ENVが割り当てられていない場合、Next.jsはnext devコマンド実行時にはdevelopmentを、その他のコマンドではproductionを自動的に割り当てます。

バージョン履歴

バージョン	変更点
`v9.4.0`	`.env`と`NEXT_PUBLIC_`のサポートが導入されました。