はじめに

Next.js には 2 つのルーティングシステムがあります。

1. Page Router (pages/ を使用)
2. App Router (app/ を使用)（Next.js 13 で導入、Next.js 14 で推奨）

これらの違いを理解することで、どちらを使うべきか判断できるようになります。

1. Page Router (pages/)

Next.js 12 以前から使われている従来のルーティング方式。

基本的なページの作成

JSX
// pages/index.js
export default function Home() {
  return <h1>Page Router のホームページ</h1>;
}

• pages/index.js → /
• pages/about.js → /about

データ取得の方法

getServerSideProps や getStaticProps を使う。

JSX
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

export default function Home({ data }) {
  return <h1>{data.message}</h1>;
}

✅ メリット

• シンプルなディレクトリ構成（pages/ にファイルを追加するだけ）
• getServerSideProps や getStaticProps でデータ取得を明示的に管理できる
• useEffect を使ってクライアントサイドでデータ取得も可能

❌ デメリット

• getServerSideProps などの API は Next.js 固有のもので、標準的な React の流れと異なる
• pages/api/ を使った API 作成が必要
• すべてのコンポーネントが クライアントサイドレンダリング（CSR） 前提

2. App Router (app/)

Next.js 13 で導入され、Next.js 14 で推奨されている新しいルーティング方式。

基本的なページの作成

JSX
// app/page.js
export default function Home() {
  return <h1>App Router のホームページ</h1>;
}

• app/page.js → /
• app/about/page.js → /about

データ取得の方法（fetch を直接使える）

JSX
async function getData() {
  const res = await fetch("https://api.example.com/data");
  return res.json();
}

export default async function Home() {
  const data = await getData();
  return <h1>{data.message}</h1>;
}

✅ メリット

• fetch() を 直接 async 関数内で使える（getServerSideProps が不要）
• デフォルトで サーバーコンポーネント（クライアント側の JavaScript を減らせる）
• layout.js による ネスト可能なレイアウト
• Streaming や Suspense に対応（部分的にレンダリング可能）

❌ デメリット

• app/ を使うには 従来の useEffect ではなく fetch を組み込む必要がある
• API の作成方法が変わる（app/api/route.js などを使う）

3. Page Router と App Router の比較

4. どちらを選ぶべき？

• ✅ 新規プロジェクト → App Router（app/）を推奨
• ✅ 既存の Page Router プロジェクト → そのままでも OK、移行は検討

App Router の方が新しく、Next.js 公式の推奨方式 なので、今後のプロジェクトでは App Router を使うのがベストです。

しかし、Page Router の getServerSideProps などを使っている既存プロジェクトを 無理に App Router に移行する必要はありません。

まとめ

• Page Router（pages/）は 従来の Next.js のルーティング方式 で、getServerSideProps などを使う
• App Router（app/）は 新しい方式 で、サーバーコンポーネントを活用し、データ取得がシンプル
• Next.js 14 では App Router が推奨 されているので、新規プロジェクトでは app/ を使うのがベスト