先生と生徒の会話形式で理解しよう

生徒

「Next.jsって聞いたら、Server ComponentsとかClient Componentsとか出てきて混乱しました…」

先生

「Next.jsでは、動く場所によってコンポーネントを使い分けます。」

生徒

「Client Componentsって、どんなときに必要なんですか？」

先生

「それでは、Client Componentsが必要な具体的なケースを順番に見ていきましょう。」

1. Next.jsのClient Componentsとは？

Next.jsのClient Componentsとは、ブラウザ（パソコンやスマホの画面側）で動く部品のことです。ボタンを押したり、文字を入力したり、その場で画面が変わるような動きは、Client Componentsで実現します。

たとえるなら、Server Componentsは「料理を作る厨房」、Client Componentsは「お客さんの目の前で動く配膳ロボット」です。ユーザーの操作にすぐ反応する必要がある場合、Client Componentsが必要になります。

2. ボタンやクリック操作がある場合

クリックして画面の表示を変えたい場合は、Client Componentsが必須です。これは、ブラウザで状態（データ）を覚えておく必要があるからです。


"use client";
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>
  );
}

（画面に数字が表示され、ボタンを押すたびに数が増えていきます）

3. フォーム入力や文字入力を扱う場合

名前やメールアドレスを入力するフォームも、Client Componentsが必要です。入力中の文字をその場で反映したり、チェックしたりするためです。


"use client";
import { useState } from "react";

export default function InputSample() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        placeholder="名前を入力"
        onChange={(e) => setName(e.target.value)}
      />
      <p>こんにちは、{name}さん</p>
    </div>
  );
}

（文字を入力すると、すぐ下に挨拶文が表示されます）

4. useStateやuseEffectを使う場合

Next.jsでは、useStateやuseEffectといったReactの仕組みを使う場合、Client Componentsにする必要があります。これらはブラウザで動く機能だからです。


"use client";
import { useEffect } from "react";

export default function EffectSample() {
  useEffect(() => {
    alert("画面が表示されました");
  }, []);

  return <p>Client Componentsのサンプル</p>;
}

5. ブラウザ専用の機能を使う場合

localStorageやwindowなど、ブラウザにしか存在しない機能を使う場合もClient Componentsが必要です。これらはサーバーでは使えません。


"use client";
export default function BrowserSample() {
  const saveData = () => {
    localStorage.setItem("message", "保存しました");
  };

  return <button onClick={saveData}>保存</button>;
}