【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 は秘密情報向け

作って学ぶ　Next.js/React　Webサイト構築

作者:エビスコム
マイナビ出版

Amazon

mlog

備忘録とかメモとか