環境変数
例
Next.jsには環境変数の組み込みサポートがあり、以下のことが可能です:
環境変数の読み込み
Next.jsは.env.localからprocess.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を使用する場合:
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.jsは.env*ファイル内で$を使用して他の変数を参照する場合（例: $VARIABLE）、自動的に変数を展開します。これにより他のシークレットを参照できます。例えば:
TWITTER_USER=nextjs
TWITTER_URL=https://twitter.com/$TWITTER_USER上記の例では、process.env.TWITTER_URLはhttps://twitter.com/nextjsに設定されます。
知っておくと良いこと: 実際の値に
$を含む変数を使用する必要がある場合、エスケープする必要があります（例:\$）。
ブラウザ用の環境変数のバンドル
NEXT_PUBLIC_がプレフィックスされていない環境変数はNode.js環境でのみ利用可能で、ブラウザ（クライアントは別の環境で実行されます）からはアクセスできません。
環境変数の値をブラウザで利用可能にするために、Next.jsはビルド時に値をjsバンドルに「インライン化」し、process.env.[variable]へのすべての参照をハードコードされた値に置き換えます。これを行うには、変数にNEXT_PUBLIC_をプレフィックスするだけです。例えば:
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijkこれにより、Next.jsはNode.js環境内のprocess.env.NEXT_PUBLIC_ANALYTICS_IDへのすべての参照をnext buildを実行する環境の値で置き換え、コード内のどこでも使用できるようになります。これはブラウザに送信されるJavaScriptにインライン化されます。
注意: ビルド後、アプリはこれらの環境変数の変更に反応しなくなります。例えば、Herokuパイプラインを使用してある環境から別の環境にスラッグをプロモートする場合、または単一のDockerイメージを複数の環境にビルドしてデプロイする場合、すべての
NEXT_PUBLIC_変数はビルド時に評価された値で固定されるため、プロジェクトのビルド時にこれらの値を適切に設定する必要があります。ランタイム環境値にアクセスする必要がある場合は、クライアントに提供する独自のAPIを設定する必要があります（オンデマンドまたは初期化時に）。
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)デフォルトの環境変数
一般的には.env.localファイル1つだけで十分です。しかし、development（next dev）またはproduction（next start）環境のデフォルトを追加したい場合があります。
Next.jsでは、.env（すべての環境）、.env.development（開発環境）、.env.production（本番環境）でデフォルトを設定できます。
.env.localは常に設定されたデフォルトを上書きします。
知っておくと良いこと:
.env、.env.development、.env.productionファイルはデフォルトを定義するためリポジトリに含めるべきです。.env*.localは.gitignoreに追加するべきです。これらのファイルは無視されることを意図しています。.env.localはシークレットを保存する場所です。
Vercel上の環境変数
Next.jsアプリケーションをVercelにデプロイする場合、環境変数はプロジェクト設定で設定できます。
すべてのタイプの環境変数をそこで設定する必要があります。開発で使用される環境変数も含まれます。これらはローカルデバイスにダウンロードできます。
開発環境変数を設定している場合、以下のコマンドを使用してローカルマシンで使用するために.env.localにプルできます:
vercel env pull .env.localテスト環境変数
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を割り当てます。