【Next.js】環境変数の取り扱いについて

Next.jsまとめシリーズ。
アウトプットとしてまとめていきます。
初心者記事のため、内容に誤った点等ありましたらご指摘いただけると嬉しいです。

環境変数とは

ここでの環境変数とは、アプリケーション内で利用できる変数のこと。
例えばAPIによって外部アプリケーションからデータ取得する際に必要になるAPIキーなど、環境変数として定義します。

Next.jsがサポートする環境

Next.jsでは、

• development
• production
• test

の3つの環境をサポートしています。

ファイルの種類

.env : すべての環境に対する環境変数（デフォルト値）
.env.local : リポジトリに含めてはいけない環境変数を書く（前述のAPIキーなど外部に露出したら困る秘密情報）。すべての環境の環境変数を上書きする。
.env.[environment] : 特定の環境に対する環境変数（デフォルト値）。.env.development など
.env.[environment].local : 特定環境のローカル用環境変数。特定の環境に対する環境変数を上書き。.env.development.local など

.env.[environment]と.env.[environment].local について

.env.developmentと.env.development.localは、next devコマンド実行時に使用されます。
.env.productionと.env.production.localは、next buildとnext startコマンド実行時に使用されます。
.env.testと.env.test.localは、テスト目的に特定の環境変数を設定する必要がある場合に作成します。また、テスト環境においては.env.localファイルはロードされないため注意が必要です。

各ファイルの優先順位

**.env.[environment].local > .env.local > .env.[environment] > .env**の順で優先されます。

環境変数の設定方法と参照方法

設定方法

ルートに.env.localファイルを作成し、変数を定義します。

API_KEY='my-secret-api-key'

参照方法

下記のように、process.env.XXXXXと書くことで参照することができます。

index.jsx

export async function getStaticProps() {
  const db = await myDB(process.env.API_KEY)
  // ...
}

クライアント側で使いたいとき

クライアント側で使う環境変数にはNEXT_PUBLIC_　をつけて定義することで、ブラウザに送信されるJavaScript内に環境変数の値がインライン化され、クライアント側で使用できます。

NEXT_PUBLIC_ID=advresgfsl

index.jsx

export default function Page(){
const { NEXT_PUBLIC_ID } = process.env
console.log(NEXT_PUBLIC_ID) // advresgfsl
// ...

当然ですが、公開したくない秘密情報についてはNEXT_PUBLIC_　をつけず定義します。

#.gitignoreへ追加
.env.lovalと.env.[environment].localについては秘密情報を定義するので、.gitignoreファイルに追加しておきます。
公式ドキュメントによると、その他.envファイルについてはリポジトリに含めてデフォルト値設定のため使用することが推奨されています。

Note: .env, .env.development, and .env.production files should be included in your repository as they define defaults. .env*.local should be added to .gitignore, as those files are intended to be ignored. .env.local is where secrets can be stored.
公式Docより

参考