Next.jsでの（env）環境変数の扱い方

説明の流れ

1. envの設定方法
2. フロントでのenvの呼び出し方

envの設定方法

React同様に本番環境や検証環境でのenvファイルの読み込みするファイルを変更したい時が有ると思います。 今回は以下の方法で設定しました。

まず環境ごとのenvファイルをプロジェクトファイル直下に作成します。

プロジェクト名
├── README.md
├── env.production
├── env.staging
├── next.config.js
├── node_modules

次にnext.config.jsファイルにenvの参照先を設定します。
doteenvのpackageの追加は不要です。

↓この一行を追加
require('dotenv').config({ path: `.env.${process.env.ENVIRONMENT}` })

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

package.jsonのscriptsを修正します。

  "dev:production": " ENVIRONMENT=production next dev",
  "dev:staging": " ENVIRONMENT=staging next dev",

このENVIRONMENTの変数の値がnext.config.jsのpathのprocess.env.ENVIRONMENTに値が入ってきてファイルの参照先を切り替えています。

フロント側での環境変数の参照方法

フロント側でenvの値を参照したい時には、NEXT_PUBLICという、おまじないをつける必要があります。

まず環境変数を用意します。
今回は.envproductionファイル内にNEXT_PUBLIC_TEXT="production"
.env.stagingファイル内にはNEXT_PUBLIC_TEXT="staging"という風にしました。

この変数をフロントで呼び出します。

<h1>{process.env.NEXT_PUBLIC_TEXT}</h1>

これで環境変数にアクセスして値を表示することができます。
設定方法も簡単なので、これからNext.jsを触って環境を切り替えたい方の参考になれば嬉しいです！

記事と同じように作成したプロジェクトのリポジトリのURLも貼っておきますので
こちらも参考にしてみてください。