1. Next.jsとは？まずは全体像を知ろう

Next.js（ネクストジェイエス）は、WebサイトやWebアプリを作るための道具です。パソコンやスマートフォンの画面に表示されるページを、効率よく安全に作ることができます。難しそうに聞こえますが、「ホームページを作るための便利なセット」と考えてください。

Next.jsは、React（リアクト）という仕組みをベースにしています。 Reactとは、画面を小さな部品に分けて作る考え方です。この部品のことを「コンポーネント」と呼びます。

2. コンポーネントとは何かを超かんたんに説明

コンポーネントとは、画面の一部分を担当する部品です。たとえば、ボタン、文字の見出し、入力フォームなどがそれぞれ部品になります。レゴブロックのように、小さな部品を組み合わせて大きな画面を作るイメージです。

Next.jsでは、このコンポーネントを「Client Components」と「Server Components」に分けて使います。

3. Client Componentsとは？できることを理解しよう

Client Components（クライアントコンポーネント）は、見る人のパソコンやスマートフォン側で動く部品です。ボタンを押したときに画面が変わる、文字を入力すると反応する、といった「動きのある処理」が得意です。

たとえば、ボタンをクリックして文字を変える処理は、Client Componentsで書きます。


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

export default function SampleClient() {
  const [text, setText] = useState("はじめまして");

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => setText("ボタンが押されました")}>
        クリック
      </button>
    </div>
  );
}

（画面に「はじめまして」と表示され、ボタンを押すと文字が変わります）

4. Server Componentsとは？裏側で働く存在

Server Components（サーバーコンポーネント）は、サーバー側で動く部品です。サーバーとは、インターネットの向こう側にあるコンピューターのことです。私たちの代わりにデータを準備したり、ページを作ってくれます。

Server Componentsは、画面の動きよりも「表示の速さ」や「安全さ」を重視します。基本的に、Next.jsではこちらが標準です。


export default function SampleServer() {
  return (
    <div>
      <h1>サーバーで作られたページ</h1>
      <p>この文章はサーバー側で準備されています。</p>
    </div>
  );
}

5. ClientとServerの一番大きな違い

一番の違いは「どこで動くか」です。 Client Componentsは見る人の端末で動き、 Server Componentsはサーバーで動きます。

料理に例えると、Server Componentsは厨房で料理を完成させてから運ぶ役割です。 Client Componentsは、目の前でソースをかけたり味を変える役割です。

6. Client Componentsが必要になる場面

次のような場合は、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>
  );
}

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

7. 「use client」とは何を書いているのか

Client Componentsでは、ファイルの一番上に「use client」と書きます。これは「この部品は利用者の端末で動かします」という宣言です。これを書くことで、クリックや入力といった操作が使えるようになります。

8. Client ComponentsとServer Componentsの使い分けの考え方

基本はServer Componentsを使い、動きが必要なところだけClient Componentsにします。こうすることで、ページが速く表示され、使いやすい画面になります。

最初は「ボタンや入力がある＝Client Components」と覚えておけば十分です。慣れてくると、自然に使い分けられるようになります。


import ClientPart from "./ClientPart";

export default function Page() {
  return (
    <div>
      <h1>メインページ</h1>
      <ClientPart />
    </div>
  );
}