【Next.js】環境変数(.env)の使い方【公式ドキュメント 意訳】
今回は Next.js で環境変数(.env)を使う方法 を解説したいと思います。
今回は、以下の 公式ドキュメントの環境変数の解説ページを参考に、Next.jsでの環境変数(.env)の使い方について、簡単に解説していきたいと思います。
おおよそ、上記ページの流れに沿って、解説を進めていきます。
目次
はじめに
以下の内容は、Next.js の バージョン 9.4 以上 に対しての内容です。9.4 以前の Next.js を使用している場合は、以下のページを参照してください。
Next.js は環境変数に対応しており、以下のような機能が提供されています。
NEXT_PUBLIC_
ではじまるインライン環境変数.env
を使ったカスタム環境変数
インライン環境変数
Next.js は NEXT_PUBLIC_
ではじまる、インライン環境変数に対応しています。
コード中のインライン環境変数は .env
ファイルなどで定義した値と置き換えられます。
例えば、以下のようなページを考えます。
export default function Page() { return <h1>The public value is: {process.env.NEXT_PUBLIC_EXAMPLE_KEY}</h1> }
この場合、以下のように置き換えられます。
export default function Page() { return <h1>The public value is: {'my-value'}</h1> }
環境変数の設定は、後述の .env
ファイルの利用のほか、以下のようなコマンドラインでの定義でも問題ありません。
NEXT_PUBLIC_EXAMPLE_KEY=my-value npx next dev
※ ここでは、npx next dev
コマンドの使用前に、環境変数を設定しています。
Windows環境などの場合は以下のように crosso-env
を使って設定してください。
npx cross-env NEXT_PUBLIC_EXAMPLE_KEY=my-value next dev
注意事項
公開したくない情報は、NEXT_PUBLIC_
をつけずに環境変数を設定してください。(※ 例えば、EXAMPLE_KEY
など)
簡単に確認した限りだと、NEXT_PUBLIC_
がついていない環境変数は、サーバ側の処理でのみ使用され、クライアント側では使用できず、表示もされない ようです。
.envファイルの利用
Next.js は、以下のような .env
ファイルに対応しています。
.env
: 全ての環境に対する環境変数.env.local
: ローカル用環境変数。全ての環境の環境変数を上書き。.env.[environment]
: 特定の環境に対する環境変数。.env.development
など.env.[environment].local
: 特定環境のローカル用環境変数。特定の環境に対する環境変数を上書き。.env.development.local
など
.env と .env.local の使い分け
公式ドキュメントでは、.env
や .env.[environment]
はリポジトリに含めて、デフォルト設定として利用 する事が勧められています。
また、.env.local
や .env.[environment].local
は .gitignore
ファイルに含めて、公開したくない情報や開発用の変数の定義に利用 することが勧められています。
サポートされる環境
Next.js は development
、production
、test
環境に対応しています.
next dev
コマンドでは、development
の環境変数が使用されます。
next build
、next start
コマンドでは production
の環境変数が使用されます。
各.envファイルの優先度
同じ環境変数が複数箇所で設定された場合、以下のような優先度で環境変数が設定されます。(※ 上から順に高優先度)
- すでに定義されている環境変数。環境で定義済みのものや、コマンド実行前に定義された環境変数
.env.[environment].local
.env.local
.env.[environment]
.env
設定例
例として、.env.local
で以下のように環境変数が定義されている場合を考えます。
API_KEY='my-secret-api-key' NEXT_PUBLIC_APP_LOCALE='en-us'
また、以下のようなページでの環境変数の利用を考えます。
export default function Page() { return <h1>The locale is set to: {process.env.NEXT_PUBLIC_APP_LOCALE}</h1> } export async function getStaticProps() { const db = await myDB(process.env.API_KEY) // ... }
NEXT_PUBLIC_
ではじまる process.env.NEXT_PUBLIC_APP_LOCALE
の部分は、ビルド後のアウトプットファイルで 'en-us'
と置き換えられます。
process.env.API_KEY
はビルド時、または実行時には使用されます。
ビルド後のアウトプットファイルには含まれず、getStaticProps
の返り値の props
だけがアウトプットファイルに含まれます。
ここで、以下のような .env
を追加した場合を考えます。
API_KEY='default-api-key' CLIENT_KEY='default-client-key' NEXT_PUBLIC_APP_LOCALE='en-us'
ここで追加した .env
よりも .env.local
の方が優先度が高いため、重複する API_KEY
と NEXT_PUBLIC_APP_LOCALE
は無視されます。
CLIENT_KEY
は .env.local
で定義されていないので、有効となります。
まとめ
以上、Next.js で環境変数(.env)を使う方法について解説してみました。
最後に、今回の内容について、簡単にまとめてみたいと思います。
- Next.js は環境変数サポートあり
- クライアント向け、サーバ処理向けの使い分け定義ができる
- 環境ごとに環境変数を定義できる
.env
はデフォルト定義向け、.env.local
は秘密情報向け