Next.js の 環境設定ファイル(.env)と サーバーサイド・クライアントサイドの判別

● Next.js の 環境設定ファイル(.env)

使うのは以下の2ファイルに限定すると良いでしょう。

.env.development : 開発用ファイル

NODE_ENV が development ( = npm run dev )の時に読み込まれる。

.env.production : 本番用ファイル

NODE_ENV が production ( = npm run build && npm run start )の時に読み込まれる。

● .envファイルの書き方と呼び出し方

書き方(サーバーサイド)
( .env.development または .env.production)

HOGE=mySettingValue

呼び出し方(サーバーサイド)
( xxx.js や xxx.ts ファイル )

console.log( process.env.HOGE );

書き方(フロントエンド)
( .env.development または .env.production)

NEXT_PUBLIC_HOGE=mySettingValue

呼び出し方(フロントエンド)
( xxx.js や xxx.ts ファイル )

console.log( process.env.HOGE );
alert( process.env.HOGE );

● 現在「開発用」か「本番用」かどちらが読み込まれているのかをチェックする

NODE_ENV で判断すると良いでしょう

console.log( process.env.NODE_ENV );

● 現在「サーバーサイド」か「フロントエンド」かを判別する

typeof window === "undefined"

windowオブジェクトがないのがサーバーサイド
windowオブジェクトがあるのがフロントエンド
です。

デバッグ用にサーバーがクライアントを返したい場合はメソッドにしておいても良いかもです

export default function ServerOfClient() {
  return (typeof window === "undefined") ? 'Server' : 'Client';
}

Booleanの場合はそのまま利用しても良いですし以下のようにしても良いです

const isProduction = process.env.NODE_ENV === "production";

● envの値を確認するサンプル

  console.error(`● process.env.APOLLO_FETCH_POLICY は (${process.env.APOLLO_FETCH_POLICY}) / NODE_ENVは(${process.env.NODE_ENV}) / Server or Client は(${ServerOfClient()})`);

結果例

● process.env.APOLLO_FETCH_POLICY は (network-only-S) / NODE_ENVは(development) / Server or Client は(Server)

● .envファイルを書き換えたのに値が更新されない時は?

control + c でいちどプロセスを終了してから再度起動します
npm run dev
No.2088
10/28 09:01

edit