1. Next.jsのホットリロードとは何か？

Next.jsのホットリロードとは、プログラムのコードを保存した瞬間に、ブラウザの画面が自動で更新される仕組みのことです。ふつうのウェブ制作では、コードを直したあとに手動でページを更新する必要がありますが、Next.jsではその手間がほとんどありません。

例えるなら、ノートに書いた文字を消して書き直した瞬間に、先生の教科書の内容も同時に書き変わるようなイメージです。初心者にとっては「操作が少ない」「失敗してもすぐ確認できる」という安心感があります。

2. ホットリロードが有効になるNext.jsの開発環境

Next.jsでホットリロードを使うために、特別な設定はほとんど必要ありません。開発用サーバーを起動するだけで、自動的にホットリロードが有効になります。

開発用サーバーとは、パソコンの中だけで動く練習用のウェブサーバーです。本番公開用とは違い、コードを変更しながら確認するための環境だと考えてください。

3. ページを編集してホットリロードを体験する

まずは、Next.jsのページを少し編集してみましょう。以下は、文字を画面に表示するだけの、とてもシンプルなNext.jsのサンプルコードです。


export default function Home() {
  return (
    <div>
      <h1>はじめてのNext.js</h1>
      <p>この文章を書き換えてみましょう。</p>
    </div>
  );
}

（文章を書き換えて保存すると、ブラウザを更新しなくても表示が自動で変わります）

4. コンポーネント変更時のホットリロード

Next.jsでは、画面の部品を「コンポーネント」という単位で管理します。コンポーネントとは、ボタンや見出しなどのパーツを部品として分けたものです。

ホットリロードは、このコンポーネントを変更したときにも自動で反映されます。


function Greeting() {
  return <h2>こんにちは！</h2>;
}

export default function Page() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

（Greetingの文字を変えて保存すると、画面のあいさつ文もすぐに変わります）

5. 状態がある場合のホットリロードの動き

Next.jsでは、ボタンを押した回数などの情報を「状態」として管理できます。状態とは、アプリが今どんな状況かを覚えておく箱のようなものです。

ホットリロードでは、コードの変更内容によっては状態がそのまま保たれる場合もあります。これにより、途中の操作をやり直さずに修正結果を確認できます。


import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        増やす
      </button>
    </div>
  );
}

（ボタンを押して数値を増やし、文字を少し修正しても画面がすぐ反映されます）