Next.jsの「use client」の書き方を完全ガイド！初心者でもわかるClient Componentsの使いどころ

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

生徒

「Next.jsで use client って書いてある記事を見たんですが、これは何ですか？」

先生

「Next.jsでは、動く場所によって部品の役割が分かれていて、その指定が use client です。」

生徒

「書かないとどうなるんですか？」

先生

「ボタンが動かない、クリックしても反応しない、という状態になります。順番に見ていきましょう。」

1. Next.jsの「use client」とは何か？

Next.jsの use client は、「この部品はブラウザ側で動かします」と宣言するための特別な合言葉です。 Next.jsでは、画面を作る部品を「どこで動かすか」によって分けています。

初心者の方は、まず「パソコンの中には、サーバーとブラウザという二つの場所がある」と考えてください。サーバーは料理を作るキッチン、ブラウザは料理を食べるテーブルのようなものです。

2. Server ComponentsとClient Componentsの違い

Next.jsでは、何も書かない場合、その部品は自動的にServer Componentsになります。サーバーで作られた画面は、完成した状態でブラウザに送られます。

一方で、ボタンを押したときに動く、入力した文字が変わる、といった操作はブラウザ側で処理する必要があります。そのときに使うのがClient Componentsであり、その目印が use client です。

3. 「use client」の基本的な書き方

use client は、ファイルの一番上に書きます。コメントやimport文よりも上に書かなければなりません。


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

（画面に「カウント：0」と表示され、ボタンを押すたびに数字が1ずつ増えます）

4. なぜ「use client」を書かないと動かないのか

Server Componentsでは、ボタンを押す、文字を入力する、といった操作を扱えません。そのため、useState やクリック処理を書くとエラーになります。

use client を書くことで、「この部品はブラウザで動かすので、操作を受け取れます」とNext.jsに伝えることができます。


"use client";

export default function HelloButton() {
  function sayHello() {
    alert("こんにちは！");
  }

  return (
    <button onClick={sayHello}>
      あいさつする
    </button>
  );
}

（ボタンを押すと、画面に「こんにちは！」と表示されます）

5. 「use client」が必要になる代表的な場面

use client が必要になるのは、主に次のような場面です。

ボタンをクリックする
フォームに文字を入力する
表示内容を切り替える
アニメーションを動かす

画面を見るだけの部品はServer Components、操作する部品はClient Componentsと考えると分かりやすくなります。

6. 親コンポーネントと「use client」の関係

Next.jsでは、親の部品がClient Componentsになると、その中の子もすべてClient Componentsになります。そのため、必要な場所だけに use client を書くことが大切です。


"use client";

function Child() {
  return <p>子コンポーネント</p>;
}

export default function Parent() {
  return (
    <div>
      <h3>親コンポーネント</h3>
      <Child />
    </div>
  );
}

（親と子の両方が、ブラウザで動く部品として扱われます）