10. Client Components — "use client" でブラウザ上で動かす

クリックへの反応や useState など、ブラウザ上で動く機能が必要なときは、ファイルの先頭に "use client" と書いて Client Component にします。この1行で、そのファイルのコンポーネントはブラウザでも実行されるようになります。

使い分けの基準はシンプルで、「表示するだけなら Server、ユーザーの操作に反応するなら Client」です。ボタン、入力フォーム、開閉するメニューなど、インタラクティブな部品が Client Component の出番です。

つまずきやすいのは、useState を使った瞬間に出る「use client が必要」というエラーです。そのときページ全体に "use client" を付けるのではなく、ボタンなど操作が必要な部分だけを小さな Client Component に分けるのが経験則です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app/counter.tsx — 操作に反応するので Client Component
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count} 回クリック
    </button>
  );
}

公式ドキュメントで詳しく ↗