1. Next.jsとは何かを超かんたんに説明

Next.js（ネクストジェイエス）は、WebサイトやWebアプリを作るための道具です。 Webサイトとは、ブラウザで見るページのことです。ブラウザとは、ChromeやSafariなどのことを指します。 Next.jsを使うと、表示が速く、検索にも強いWebサイトを作ることができます。

Next.jsは、JavaScriptというプログラミング言語を使って書きます。 JavaScriptとは、ボタンを押したときに動きをつけたり、文字を変えたりできる言語です。

2. Server Componentsとは何か

Server Components（サーバーコンポーネント）とは、サーバー側で動く部品のことです。サーバーとは、インターネットの向こう側にある高性能なコンピュータです。私たちのパソコンの代わりに、重たい処理をしてくれます。

たとえるなら、レストランのキッチンがサーバーです。料理はキッチンで作られて、お客さんの席に運ばれます。 Server Componentsは、完成した画面を作ってから、ブラウザに送ります。

3. Client Componentsとは何か

Client Components（クライアントコンポーネント）は、あなたのパソコンやスマホで動く部品です。ブラウザの中で動き、ボタン操作や画面の切り替えを担当します。

レストランで例えると、お客さんの席でメニューを選んだり、ボタンを押して注文する行動がClient Componentsです。すぐに反応が必要な動きに向いています。

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

一番の違いは、「どこで動くか」です。 Server Componentsはサーバーで動き、Client Componentsはブラウザで動きます。

Server Componentsは、データの取得や重たい計算が得意です。 Client Componentsは、クリックや入力などの操作が得意です。 Next.jsでは、この2つを使い分けることで、速くて使いやすいWebサイトを作れます。

5. Server Componentsのシンプルなサンプル


export default function Page() {
  return <h1>これはServer Componentです</h1>;
}

（画面に「これはServer Componentです」と表示されます）

特別な設定を書いていない場合、Next.jsでは自動的にServer Componentsになります。データを表示するだけの画面に向いています。

6. Client Componentsの基本的な書き方


"use client";

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      クリック数：{count}
    </button>
  );
}

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

「use client」と書くことで、この部品はClient Componentsになります。 useStateとは、数字や文字を覚えておくための仕組みです。

7. Server ComponentsとClient Componentsを組み合わせる例


import Counter from "./Counter";

export default function Page() {
  return (
    <div>
      <h1>サーバーで作った画面</h1>
      <Counter />
    </div>
  );
}

（見出しは最初から表示され、ボタンはクリックで動きます）

Server Componentsの中でClient Componentsを使うことができます。これにより、表示は速く、操作は快適になります。