LoginSignup
211
123

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-28

環境変数

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 (優先順位1)

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上で直接環境変数を設定し、それらの値は暗号化される

image.png

211
123
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
211
123