Next.jsのPages RouterとApp Routerの違い

はじめに

Next.jsはバージョン13から App Router が登場しました。
従来の Pages Router と大きな違いがあり、公式もApp Routerの利用を推奨しています。
本記事では、それぞれの特徴や違いを整理して解説します。

Pages Routerとは

特徴

• /pages ディレクトリにファイルを置くことでルーティングされる
• ファイルベースルーティング(例: pages/about.tsx → /about)
• Next.jsの古くからの仕組みで、すでに多くのプロジェクトで利用されている

メリット

• シンプルで直感的
• 学習コストが低い
• ドキュメントや情報が豊富

デメリット

• 機能が限定的(柔軟なレイアウトやデータフェッチ戦略の選択肢が少ない)
• 大規模アプリでの構成が煩雑になりがち

App Routerとは

特徴

• /app ディレクトリに基づく新しいルーティングシステム
• React Server Components(RSC)をデフォルトで採用
• レイアウト・テンプレート・サーバーアクションなど、最新の仕組みを活用できる

メリット

• コンポーネント単位でのサーバーレンダリングが可能
• ページごとに柔軟なレイアウト構造を作れる(layout.tsx)
• データフェッチが柔軟(fetchをサーバー側で直接呼び出せる)
• パフォーマンス改善(バンドルサイズ削減・キャッシュ戦略の最適化)

デメリット

• Pages Routerに比べて学習コストが高い
• Pages Routerからの移行難易度が高い

Pages RouterとApp Routerの比較表

項目	Pages Router	App Router
ディレクトリ	/pages	/app
ルーティング	ファイルベース	ファイルベース(より柔軟)
データフェッチ	getStaticProps, getServerSideProps	サーバーコンポーネント内でfetch
レイアウト	各ページごとに実装	layout.tsxで共通化可能
技術基盤	CSR/SSR/SSG中心	React Server Components
学習コスト	低い	高い
推奨度	既存プロジェクト向け	新規プロジェクト推奨

使い分けの目安

• Pages Routerを選ぶ場合

  • 既存プロジェクトの延長で開発したい
  • 学習コストを抑えて素早く作りたい
  • 小〜中規模のアプリ

• App Routerを選ぶ場合

  • 新規プロジェクトを開始する
  • パフォーマンスや将来性を重視したい
  • 複雑なレイアウトやデータフェッチが必要

まとめ

• Pages Routerは従来のシンプルな仕組み
• App Routerは新しいRSCベースの仕組み
• 新規開発はApp Router推奨、既存プロジェクトはPages RouterでもOK