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

生徒

「Next.jsを勉強していたら、App RouterとかServer Componentsって言葉が出てきて混乱しました…」

先生

「最近のNext.jsでは、とても大事な考え方ですね。役割を分けて理解すると分かりやすくなります。」

生徒

「App RouterとServer Componentsって、別々の機能なんですか？」

先生

「実は深くつながっています。一緒に整理してみましょう。」

1. App Routerとは何かをやさしく理解しよう

App Routerは、Next.jsでページを管理するための新しい仕組みです。 Webサイトでは、ページごとにURLという住所があります。 App Routerでは、フォルダ構成がそのままURLになります。

たとえば、appフォルダの中にpage.jsを置くと、それだけで1つのページとして表示されます。難しい設定を書かなくても、自然な形でページが増えていきます。

本棚に本を並べるとき、棚の場所でジャンルが分かるように、 App Routerではフォルダ構成でサイト全体が整理されます。

2. Server Componentsとは何をするものか

Server Componentsは、画面をサーバー側で作る仕組みです。サーバーとは、インターネットの向こう側にあるコンピュータのことです。

画面をサーバーで作ってから送ることで、ブラウザ側の負担を減らし、表示を速くできます。重たい処理を裏側で済ませるイメージです。

App Routerでは、何も指定しなければ、すべてのコンポーネントがServer Componentsとして動きます。これが、最近のNext.jsの大きな特徴です。


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

（このページはサーバー側で作られ、完成した画面がブラウザに届きます）

3. App RouterとServer Componentsの関係

App Routerはページの構造を決める役割を持ち、 Server Componentsはその中身を作る役割を持っています。

建物で例えると、 App Routerは間取り図、 Server Componentsは部屋の中に置く家具のような関係です。

App Routerがあることで、 Server Componentsを自然に使える環境が整います。この2つはセットで考えると理解しやすくなります。

4. 画面で動かしたいときはClient Componentを使う

すべてをサーバーで作ると、ボタン操作などの動きが作れません。そこで使うのがClient Componentです。

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

（ボタンを押すと数字が増え、ブラウザ側で動いていることが分かります）

5. Server ComponentとClient Componentの使い分け

App Routerでは、Server ComponentとClient Componentを同じページの中で組み合わせられます。

画面の大部分はServer Componentで作り、動きが必要な部分だけをClient Componentにすると、サイト全体が軽くなります。

これは、家事を分担する考え方に似ています。大きな作業はまとめて行い、細かい作業だけを手元で行うイメージです。


import Counter from "./Counter";

export default function Page() {
  return (
    <div>
      <h1>Server Componentのページ</h1>
      <Counter />
    </div>
  );
}

（ページ全体はサーバーで作られ、ボタン部分だけがブラウザで動きます）

6. 初心者が押さえておきたいポイント

初心者のうちは、すべてを完璧に理解しなくても大丈夫です。 App Routerはページの整理係、 Server Componentsは裏側で画面を作る仕組み、というイメージを持つだけで十分です。

「基本はサーバー、動きたいときだけクライアント」この考え方が、App Router時代のNext.jsの基本です。

まとめ

App RouterとServer Componentsを振り返る

ここまで、Next.jsのApp RouterとServer Componentsの関係について、初心者向けに順番に見てきました。最初は聞き慣れない言葉が多く、難しく感じたかもしれませんが、役割ごとに整理すると全体像は意外とシンプルです。 App Routerは「ページやURLの構造を整理する仕組み」であり、Server Componentsは「画面の中身をサーバー側で作る仕組み」でした。この二つが組み合わさることで、Next.jsは表示が速く、管理しやすいWebサイトやWebアプリを作れるようになっています。

従来のWeb開発では、画面のほとんどをブラウザ側で動かすことが多く、ページが重くなったり、設定が複雑になったりしがちでした。しかし、App Router時代のNext.jsでは、何も指定しなければServer Componentsとして動作するため、「まずはサーバー側で画面を作る」という考え方が自然に身につきます。その結果、最初から速く表示されるページを作りやすくなり、初心者でも失敗しにくい構成になります。

Server ComponentsとClient Componentsの役割

Server Componentsは、データ取得や計算処理、文章や見出しの表示など、「最初に決まった形で表示して問題ない部分」を担当します。一方で、ボタンを押したときに画面が変わる、入力内容に応じて表示が切り替わるといった動きは、 Client Componentsが担当します。 App Routerでは、この二つを同じページの中で自然に組み合わせられるため、無理にすべてを動かそうとせず、必要な部分だけを動かす設計がしやすくなっています。

この考え方は、Webサイト制作だけでなく、Webアプリ開発でもとても重要です。画面全体を動かすのではなく、「本当に動かしたい場所はどこか」を考えることで、軽くて使いやすいユーザー体験につながります。初心者の方は、まずServer Componentsを基本としてページを作り、「ここは動かしたい」と感じた部分だけClient Componentsに切り替える、という流れを意識すると理解しやすくなります。

シンプルな構成を意識したサンプル

App RouterとServer Componentsの考え方を活かすと、ページ構成はとてもシンプルになります。画面全体はサーバーで作り、その中に必要な動きだけを組み込む、という形です。以下は、そのイメージを確認するための簡単な構成例です。


import Counter from "./Counter";

export default function Page() {
  return (
    <div>
      <h1>App Routerのページ</h1>
      <p>この部分はサーバーで作られています。</p>
      <Counter />
    </div>
  );
}

（ページの文章は最初から表示され、ボタン部分だけがブラウザ側で動きます）

このように構成することで、ページを開いた瞬間に内容が表示され、操作が必要な部分だけがスムーズに動く状態を作れます。 App RouterとServer Componentsを理解すると、「なぜNext.jsは速いと言われるのか」「なぜ管理しやすいのか」が実感しやすくなります。

先生と生徒の振り返り会話

生徒

「最初はApp RouterとServer Componentsの違いが分からなかったですけど、ページの整理役と、画面を作る役って考えると分かりやすくなりました。」

先生

「それで十分ですよ。細かい仕組みはあとからでも覚えられます。まずは役割のイメージをつかむことが大切です。」

生徒

「基本はサーバーで作って、動かしたいところだけクライアントにする、という考え方も覚えやすかったです。」

先生

「その考え方が身につけば、Next.jsのApp Router時代の開発はかなり楽になります。まずは小さなページから作って、Server Componentsを使う感覚に慣れていきましょう。」

今回学んだ内容を踏まえて、実際に手を動かしてページを作ってみると、 App RouterとServer Componentsの便利さがよりはっきり分かってきます。 Next.jsは、初心者でも段階的に理解を深められる設計になっているため、焦らず少しずつ試しながら学んでいくのがおすすめです。