使うのは以下の2ファイルに限定すると良いでしょう。
.env.development : 開発用ファイル
NODE_ENV が development ( = npm run dev )の時に読み込まれる。
.env.production : 本番用ファイル
NODE_ENV が production ( = npm run build && npm run start )の時に読み込まれる。
書き方(サーバーサイド)
( .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. NEXT_PUBLIC_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";
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)
control + c でいちどプロセスを終了してから再度起動します
npm run dev