Frontend Academy · レッスン

Pages RouterとApp Routerの比較

ファイルベースのPages Routerと、ネストされたレイアウト、ローディング、エラーバウンダリーを備えた新しいApp Routerという、Next.jsのルーティング方式を比較します。

「Pages RouterとApp Routerの比較」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

1つのフレームワークに2つのルーター

Next.jsには2つのルーティングシステムがあります。従来のPages Router（pages/ディレクトリ）と、新しいApp Router（app/ディレクトリ、Next 13以降）です。どちらもNext 14/15で引き続き使用できます。

Pages Router — ファイルベースルーティング

pages/配下の各ファイルがルートになります。動的セグメントには角括弧を使います。pages/users/[id].tsxは/users/123に対応します。

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — データ取得

特別なexportによってデータ取得の動作を宣言します。getStaticProps（SSG）、getServerSideProps（SSR）、getStaticPaths（動的ルートを含むSSG）があります。

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — フォルダベースルーティング

App Routerでは、フォルダをルートセグメントとして使用します。フォルダ内のpage.tsxファイルがページを定義します。

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — 特別なファイル

セグメントごとのファイルによって、強力なプリミティブを利用できます。layout.tsx（子要素の周囲に永続的なUIを配置）、loading.tsx（Suspenseのフォールバック）、error.tsx（エラーバウンダリ）、not-found.tsxがあります。

ネストされたレイアウト

App Routerのレイアウトはネストされたルートをラップし、ナビゲーション中も維持されます。再マウントは発生しません。

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

App Routerでのデータ取得

Server Componentsは非同期にでき、直接データを取得できます。getServerSideProps/getStaticPropsは必要ありません。コンポーネントはサーバー上で実行され、クライアントにはHTMLだけが送られます。

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

App RouterのClient Components

ファイルの先頭に'use client'を追加すると、そのコンポーネントがClient Component（インタラクティブで、ブラウザ上で実行されるコンポーネント）としてマークされます。

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

API RoutesとRoute Handlers

Pages Routerでは、pages/api/users.tsがreq/resを受け取るdefault functionをexportします。App Routerでは、app/api/users/route.tsが標準のRequest/Responseを使用し、HTTPメソッド（GET、POST）を名前付きexportします。

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

移行戦略

同じプロジェクト内で両方のルーターを共存させ、ページを1つずつ段階的に移行できます。競合がある場合はApp Routerが優先されます。

どちらを使うべきか

新規プロジェクトではApp Routerが適しています（より強力で、現在も重点的に開発されています）。既存のPages Routerプロジェクトでは、そのまま使い続けるか、段階的に移行してください。レイアウトやRSCが不要な小規模の静的サイトでは、どちらも使用できます。

クイックチェック

Next.js App RouterでコンポーネントをClient Componentとして指定するにはどうしますか？

振り返り：Pages RouterとApp Router

Pages Router：ファイルベースで、getStaticProps/getServerSidePropsを使用します。App Router（Next 13以降）：フォルダーベースで、非同期のServer Components、ネストしたレイアウト、loading/errorファイルを使用します。クライアント側のインタラクティブ性は'use client'で指定します。APIルートは、pages/api/*と、HTTPメソッドをエクスポートするapp/api/*/route.tsです。両方を併用できますが、現在はApp Routerが中心に開発されています。

よくある質問

「Pages RouterとApp Routerの比較」レッスンは無料ですか？

はい。「Pages RouterとApp Routerの比較」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Pages RouterとApp Routerの比較」で何を学びますか？

ファイルベースのPages Routerと、ネストされたレイアウト、ローディング、エラーバウンダリーを備えた新しいApp Routerという、Next.jsのルーティング方式を比較します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Pages RouterとApp Routerの比較」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る