Next.jsで本番モードと開発モードで変数の値を変えたい

動作環境

• Linux
• Node.js
• Next.js

本番モードと開発モードの違い

ソースマップ

開発モードではソースマップが有効になり、 デバッグ時に元のソースコードと対応するようになる。
これにより、エラーやデバッグ情報の読み取りが容易になる。
一方、本番モードではソースマップは無効になり、ファイルサイズの削減やセキュリティの向上が図られる。

ホットリロード

開発モードではホットリロードが有効になる。
ファイルの変更が自動的に反映され、ブラウザをリロードする必要がない。
これにより、開発プロセスが迅速かつ効率的になります。本番モードではホットリロードは無効になる。

クリティカルCSSのインライン化

本番モードでは、クリティカルCSS（ページの表示に必要な最低限のCSS）がインライン化される。
これにより、ページの表示速度が向上します。開発モードではこの最適化は適用されない。

エラーページ

開発モードではエラーページにデバッグ情報が表示され、エラーの原因を特定しやすくなる。
本番モードではエラーページに詳細な情報は表示されず、シンプルなエラーページが表示される。

これらの違いにより、開発モードと本番モードで異なる挙動を持つことで、開発中に便利なツールや機能を提供し、本番環境ではパフォーマンスやセキュリティを最適化することが可能になる。
これにより、開発と本番でのスムーズな運用が実現される。

packege.jsonを確認

package.jsonファイルを確認してコマンドが使えるか確認する

package.json

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

scriptにdev,build,startの記述があるか確認

変数の値を変えたい

strの変数を用意して、値を本番モードと開発モードで変えてみる

index.tsx

import Image from 'next/image'
import { Inter } from 'next/font/google'
import { NextPage } from "next";

const Home:NextPage = () => {
  let str;
  // 本番モードと開発モードの判断
  if(process.env.NODE_ENV === 'development'){
    // 開発モード
    str = 'hoge'
  }else {
    // 本番モード
    str = 'fuge'
  }
  return (
    <>{str}</>
  )
}

export default Home;

開発モードからやってみる

npm run dev

hogeと表示された。

次に本番モード

npm run build
npm run start

fugaと表示された。

結論

process.env.NODE_ENV === 'development'で判断できるみたい