next.jsでdotenvで環境変数を設定するのは間違い！たった3分で環境変数を設定する方法

概要

・next.jsでは「.env.local」ファイルで環境変数を設定できる。
・クライアント側でも環境変数を設定したいときは接頭語に「NEXT_PUBLIC_」をつける
・開発環境は「.env.development」、本番環境は「.env.production」でそれぞれの環境変数を設定できる

環境変数を設定する（サーバー編）

next.jsでは簡単に環境変数を変更する仕組みがあります。
ルートディレクトリに「.env.local」ファイルを置き、その中で定義した環境変数はアプリの中で使うことができます。

たとえば、開発環境と本番環境で異なるデータベースを使いますよね。そんな時に「.env.local」ファイルに設定すれば環境変数をアプリ内で利用できます。

env.local

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=root

環境変数の使用.js

export async function getServerSideProps(context) {
  console.log(process.env.DB_HOST) //コンソールに「localhost」を出力（サーバー側）
  return {props: {}}
}

環境変数に他の環境変数を設定したい場合

また、「.env.local」で設定した環境変数を別の環境変数で使うには、「$」を使います。
たとえば、ホスト名にポート番号を追加したいときには以下のように定義します。

env.local

PORT=3000
HOST=http://localhost:$PORT

index.js

export async function getServerSideProps(context) {
  console.log(process.env.HOST) //コンソールに「http:localhost:3000」を出力（サーバー側）
  return {props: {}}
}

環境変数を設定する（クライアント編）

先ほどの、「.env.local」で設定した環境変数はnode.jsのみで適用されます。そのため、ブラウザ側で動くプログラムでは使うことができません、
クライアント側でも環境変数を使いたいときにはどうすればいいのでしょうか？

この問題を解決するのが環境変数の接頭語の「NEXT_PUBLIC_」です。環境変数の接頭語に「NEXT_PUBLIC_」をつければ、クライアント側でも使うことができます。
これにより、ブラウザ側、サーバー側どちらでも環境変数を利用できるのです。

env.local

NEXT_PUBLIC_TEST=client-server

index.js

export async function getServerSideProps(context) {
  console.log(process.env.NEXT_PUBLIC_TEST) //コンソールに「client-server」を出力（サーバー側）
  return {props: {}}
}

const index = () => {
  return <p>{process.env.NEXT_PUBLIC_TEST}</p>  //画面に「client-server」を出力（クライアント側)
}

export default index

環境によって読み込むファイルを変更する方法

環境ごとに読み込む環境変数を変更したい場合があります。
たとえば、開発環境では開発用のDBを使うけど、本番環境では本番用のDBを使いたいなど環境ごとにDBを切り替えたい場面などです。

そんな時は環境ごとのenvファイルを用意します。以下の4種類でそれぞれの環境変数を設定できます。
・.env：全環境共通の環境変数
・.env.development：開発環境（next dev）の環境変数
・.env.production：本番環境（next start）の環境変数
・.env.local：デフォルトの環境変数（すべての環境変数を上書き）

これの環境変数の優先順位は以下の通りです。
①.env.local
②.env.development/.env.production
③.env

基本的に、「.env」にデフォルトで全ての環境変数を設定して、「.env.development」、「.env.production」で上書きするのがいいのではないでしょうか？

参考

next.jsの環境変数の設定