Next.jsの環境変数設定まとめ

環境変数

Node.jsでは環境変数はprocess.envというオブジェクトに格納される
Next.jsでは以下で紹介する.env*で定義するとビルド時にprocess.envに設定してくれる

.envファイルの種類

ファイル名	概要(何を定義するか)	読み込み	優先順位
.env	環境（開発、本番)に依存しないデフォルト値	常に読み込まれる	4
.env.local	環境に依存しないシークレットなもの (リポジトリに含めず.ignore定義しておく)	常に読み込まれる	2
.env.development	開発環境で使用するデフォルト値	yarn dev実行時に読み込まれる	3 (開発）
.env.development.local	開発環境で使用するシークレットなもの (リポジトリに含めず.ignore定義しておく)	yarn dev実行時に読み込まれる	1 (開発)
.env.production	本番環境で使用するデフォルト値	yarn start, next build実行時に読み込まれる	3 (本番)
.env.production.local	本番環境で使用するシークレットなもの (リポジトリに含めず.ignore定義しておく)	yarn start, next build実行時に読み込まれる	1 (本番)

表の優先順位とは、もし複数のファイルに同じ環境変数名で定義されていた場合にどのファイルの定義が優先されるかということ

.env

TEST=.env

.env.local

TEST=.env.local

.env.development

TEST=.env.development

.env.development.local

TEST=.env.development.local

結果

console.log(process.env.TEST)
=> .env.development.local (優先順位１)

Next.jsバージョンによる挙動の違い（v9.4前後で異なる)

v9.4以上

.env*ファイルを定義すればサーバー、クライアント両方で環境変数を呼び出すことができる

特に設定は必要なく.env*ファイル内に環境変数を定義すればサーバー、クライアント両方で環境変数を呼び出すことができる。ただし、クライアントサイドつまり、ブラウザ上で使用するには環境変数名にプレフィックスを付けなければprocess.env配下に渡されない

クライアントサイドで使用するには定義する変数名のプレフィックスにNEXT_PUBLIC_をつける

プレフィックスがなければNodeJSのサーバー側の処理、つまり、Data Fetching methods (getStaticProps, getStaticPaths, getServerSideProps)とAPI Routesの中でしか使用できず、プレフィックスのないものをクライアント側で使おうとするとundefinedが帰ってくる

.env

TEST=test
NEXT_PUBLIC_TEST=next_public_test

サーバーサイド結果

console.log(process.env.TEST)
=> test

console.log(process.env.NEXT_PUBLIC_TEST
=> next_public_test

クライアントサイド結果

console.log(process.env.TEST)
=> undefined (NEXT_PUBLIC_ プレフィックスがないので undefined になっている)

console.log(process.env.NEXT_PUBLIC_TEST
=> next_public_test

https://github.com/vercel/next.js/tree/canary/examples/environment-variables

v9.4未満(非推奨)

dotenv系のツールを使用することでサーバーサイド、クライアントサイド問わず`値を渡すことができる

dotenv系のツールを使用してnext.config.jsの中で次のように定義することで、.envから環境変数を読み取り、クライアントサイドに値を渡すことができる.

.env

TEST=test

next.config.js

require('dotenv').config();

module.exports = {
  env: {
    // この中に定義していく
    TEST: process.env.TEST
  }
};

サーバーサイド結果

console.log(process.env.TEST)
=> test

クライアントサイド結果

console.log(process.env.TEST)
=> test

https://github.com/vercel/next.js/tree/canary/examples/with-dotenv

早見表

yarn dev起動時

ファイル	環境変数	サーバーサイド	クライアントサイド
.env	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.local	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.development	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.development.local	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.production	ENV=env	undefined	undefined
	NEXT_PUBLIC_ENV=next_public_env	undefined	undefined
.env.production.local	ENV=env	undefined	undefined
	NEXT_PUBLIC_ENV=next_public_env	undefined	undefined

yarn start起動時

ファイル	環境変数	サーバーサイド	クライアントサイド
.env	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.local	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.development	ENV=env	undefined	undefined
	NEXT_PUBLIC_ENV=next_public_env	undefined	undefined
.env.development.local	ENV=env	undefined	undefined
	NEXT_PUBLIC_ENV=next_public_env	undefined	undefined
.env.production	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.production.local	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env

yarn build起動時

ファイル	環境変数	サーバーサイド	クライアントサイド
.env	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.local	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.development	ENV=env	undefined	undefined
	NEXT_PUBLIC_ENV=next_public_env	undefined	undefined
.env.development.local	ENV=env	undefined	undefined
	NEXT_PUBLIC_ENV=next_public_env	undefined	undefined
.env.production	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env
.env.production.local	ENV=env	env	undefined
	NEXT_PUBLIC_ENV=next_public_env	next_public_env	next_public_env

クォーテーションはどちらでも良い

スペースの有無にかかわらずクォーテーションの有無はどちらもよい

.env

TEST1=test1
TEST1_1=test1 1
TEST2="test2"
TEST2_1="test2 1"

console.log(process.env.TEST1)
=> test1
nconsole.log(process.env.TEST1_1)
=> test1 1

console.log(process.env.TEST2)
=> test2
console.log(process.env.TEST2_1)
=> test2 1

デプロイ時の環境変数設定

Vercelでデプロイする場合はEnvironment Variablesの機能を使用しましょう。UI上で直接環境変数を設定し、それらの値は暗号化される