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

生徒

「Next.jsって、最近pagesじゃなくてappって聞くんですが、何が変わったんですか？」

先生

「Next.jsは途中で大きな進化をして、ページの作り方そのものが変わったんです。」

生徒

「パソコンもあまり触ったことがないので、できるだけ簡単に知りたいです。」

先生

「では、昔のNext.jsと今のNext.jsを比べながら、やさしく説明していきましょう。」

1. Next.js 12以前は「pages」フォルダの時代

Next.js 12以前では、Webページを作る中心はpagesフォルダでした。 pagesフォルダの中にファイルを置くと、それがそのままWebページになります。

たとえば、pages/index.jsというファイルを作ると、トップページになります。これは「紙に書いた住所が、そのまま地図になる」ような、とても単純な仕組みです。

初心者でも理解しやすく、Next.jsが人気になった理由のひとつです。


export default function Home() {
  return <h1>pages時代のトップページ</h1>;
}

（ブラウザに「pages時代のトップページ」と表示されます）

2. pages時代のNext.jsの特徴と考え方

pages時代のNext.jsは、「1ページ＝1ファイル」という考え方が基本でした。ページごとに役割がはっきりしているため、初心者でも迷いにくい構造です。

ただし、ページ全体の共通デザインや、読み込みの仕組みを細かく制御するのは少し大変でした。

家にたとえると、部屋ごとに家具を全部置いている状態です。同じ家具を何度も置く必要がありました。

3. Next.js 13以降で登場した「app」フォルダ

Next.js 13からは、appフォルダが新しく導入されました。これにより、ページの作り方が大きく変わりました。

appフォルダでは、「ページ」「レイアウト」「部品」を分けて考えます。これは、家全体の設計図を先に作るようなイメージです。


export default function Page() {
  return <p>app時代のページ表示</p>;
}

（appフォルダのページとして文字が表示されます）

4. app時代の大きな特徴「レイアウト」

app時代では、layoutという仕組みが重要になります。 layoutは、すべてのページに共通する枠のようなものです。

ヘッダーやメニューを一度書くだけで、すべてのページに反映できます。


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>共通ヘッダー</header>
        {children}
      </body>
    </html>
  );
}

（どのページにも「共通ヘッダー」が表示されます）

5. app時代で増えた「サーバーで動く考え方」

app時代のNext.jsでは、サーバーで処理する考え方がより強くなりました。サーバーとは、Webサイトの裏側で動いているコンピュータです。

表示に必要な準備を先にサーバーで行うことで、画面表示が速くなります。


export default async function Page() {
  return <div>サーバーで準備された画面</div>;
}

（あらかじめ準備された内容が表示されます）

6. pagesとappの考え方の違いをたとえで理解

pages時代は、1枚ずつ完成したチラシを作る感覚です。 app時代は、本の目次や構成を先に決めてから中身を書く感覚です。

app時代の方が最初は難しく見えますが、規模が大きくなるほど整理しやすくなります。

7. これからNext.jsを始める人が知っておくこと

これからNext.jsを学ぶ場合、appフォルダの考え方が基本になります。ただし、古い情報ではpagesが出てくることもあります。

pagesとappの違いを知っておくことで、記事や解説が理解しやすくなります。

まとめ

ここまで、Next.jsの劇的な進化である「pages」から「app」への移行について詳しく解説してきました。Web開発の世界では、技術の進歩とともに「より効率的に、より速く、より管理しやすく」という方向へルールが変わっていきます。Next.jsにおけるApp Routerの登場は、まさにその象徴と言えるでしょう。

Pages RouterとApp Routerの決定的な違い

これまでのPages Router（Next.js 12以前）は、シンプルさが最大の武器でした。ファイルを作ればそれが即座にURLになるという直感的な仕組みは、多くの開発者に愛されてきました。しかし、プロジェクトが大規模になるにつれて、ページ間で共通する部品の管理や、データの読み込み効率において限界が見えてきたのも事実です。

それに対してApp Router（Next.js 13以降）は、**「React Server Components」**という強力な機能をベースに設計されています。これにより、ブラウザ（ユーザーのパソコン）で頑張って動かしていた処理の多くを、サーバー側で肩代わりできるようになりました。結果として、ユーザーに届くデータの量が減り、Webサイトの表示速度が劇的に向上しています。

SEOに強いWebサイトを作るためのApp Router活用術

検索エンジン最適化（SEO）の観点からも、App Routerは非常に有利です。ページごとにメタデータ（タイトルや説明文）を簡単に、かつ動的に設定できる仕組みが標準で用意されています。また、表示速度の向上はGoogleの評価基準である「コアウェブバイタル」の改善に直結するため、モダンなWebサイト制作においてApp Routerの採用は避けて通れない道となっています。


import React from "react";

// メタデータの設定例（SEO対策に重要！）
export const metadata = {
  title: "Next.js学習まとめ | 最新のApp Routerをマスターしよう",
  description: "pagesフォルダからappフォルダへの変化を、サンプルコードを交えて分かりやすく解説します。",
};

export default function SummaryPage() {
  return (
    <article style={{ padding: "20px", lineHeight: "1.8" }}>
      <h1 style={{ borderBottom: "2px solid #0070f3" }}>進化を続けるNext.js</h1>
      <p>
        新しい技術を学ぶのは大変ですが、App Routerを使いこなすことで、
        ユーザーにとっても開発者にとっても最高の環境を作ることができます。
      </p>
      <section style={{ marginTop: "30px", backgroundColor: "#f0f0f0", padding: "15px" }}>
        <h2>学習のポイント</h2>
        <ul>
          <li>サーバーコンポーネントとクライアントコンポーネントの使い分け</li>
          <li>layout.jsによる効率的な共通デザインの管理</li>
          <li>高速なデータフェッチング（データ取得）の実現</li>
        </ul>
      </section>
    </article>
  );
}

（ブラウザのタブに指定したタイトルが表示され、整理されたまとめページが表示されます）

これからのフロントエンド開発に向けて

「以前のやり方のほうが楽だった」と感じることもあるかもしれません。しかし、コンポーネントをサーバー側で実行するという新しい常識に慣れてしまえば、今まで複雑だったコードが驚くほどスッキリすることに気づくはずです。特にNext.jsは、Reactの機能を最大限に引き出すためのフレームワークとして、今後も業界の標準であり続けるでしょう。

まずは小さなコンポーネントから「app」ディレクトリでの構築に挑戦してみてください。レイアウトの共通化や、Loading、Errorといった特別なファイルの便利さを体感することで、次世代のWeb開発の楽しさが見えてくるはずです。

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

生徒

「先生、まとめを読んでやっと全体像がつかめてきました！pages時代は『1枚の紙』を作るイメージだったけど、app時代は『システム全体の設計図』を描くようなイメージなんですね。」

先生

「その通りです。素晴らしい洞察ですね。appフォルダを使うことで、今までバラバラに管理していたヘッダーやサイドバーを、layout.jsという一つの場所で賢く管理できるようになったのが大きな進歩なんです。」

生徒

「サンプルコードを見て思ったんですけど、metadataというのを書くだけで検索結果に反映されやすくなるんですか？」

先生

「はい。以前は少し特殊な書き方が必要でしたが、今はエクスポートするだけでNext.jsが自動的に適切なHTMLタグに変えてくれます。これもSEOを意識したモダンな開発では欠かせない機能ですね。」

生徒

「なるほど。でも、サーバーコンポーネントとかクライアントコンポーネントとか、まだ少し難しそうな言葉も出てきました…。」