App Routerとは？Next.js 13 以降で導入された新しいルーティング方式

「App Router」とは、Next.js 13 以降で導入された新しいルーティング方式で、
従来の Pages Router（/pages） を置き換えるために設計された 次世代のアプリ構築用ルーティングシステムです。

Next.jsについては、こちらで記事にしています↓

App Router とは（Next.js 13+）

App Router は /app ディレクトリを使ってルーティング・UI構築・データ取得を行う新システムです。
React Server Components（RSC）を前提に作られており、パフォーマンス改善と柔軟性が大きな特徴です。

App Routerは、Reactの最新機能であるServer Componentsなどを使用するファイルシステムベースのルーターです。

出典：Next.js App Router https://nextjs.org/docs/app

公式ドキュメント

• Next.js – App Router 公式ドキュメント
  Next.js Documentation – App Router
  https://nextjs.org/docs/app
• Next.js – Routing 基本
  Next.js – Routing Fundamentals
  https://nextjs.org/docs/app/building-your-application/routing
• Next.js – App Router
  https://nextjs.org/docs/13/app
• App Router 上に構築されたアプリケーションサンプル
  Next.js Commerce
  https://vercel.com/templates/next.js/nextjs-commerce

App Router の特徴

ファイル構造 = UI 構造

フォルダ構造がそのまま URL になる。

app/
 ├─ page.tsx        →  /（トップページ）
 ├─ about/
 │    └─ page.tsx   →  /about
 └─ blog/
      └─ [id]/
           └─ page.tsx → /blog/:id

• Project structure and organization
  https://nextjs.org/docs/app/getting-started/project-structure
• Dynamic Route Segments
  https://nextjs.org/docs/app/api-reference/file-conventions/dynamic-routes
• Next.js Layouts and Pages
  https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

React Server Components（RSC）を標準採用

• デフォルトでコンポーネントは サーバー側で実行
• クライアント側 JS を減らし高速化
• 必要なら "use client" を付けてクライアントコンポーネントも使える

• Opting specific segments into a layout
  https://nextjs.org/docs/app/building-your-application/rendering/server-components

新しいデータ取得方式

App Router では：

• fetch() が標準化され、キャッシュ戦略も指定可能
• サーバーコンポーネント内で DB 直接操作も可能

• Next.js Fetching Data
  https://nextjs.org/docs/app/building-your-application/data-fetching/fetching

並列ルート・インターセプトルートなど高度な機能

• モーダル遷移
• 多重ルーティング
• 差し替え UI など

• Next.js Parallel Routes
  https://nextjs.org/docs/app/building-your-application/routing/parallel-routes

Pages Routerとの関連

Next.js 13 より前は、Pages Router が Next.js でルートを作成する主な方法でした。これは Next.js の新しいバージョンでも引き続きサポートされていますが、React の最新機能を活用するには、新しい
App Routerへの移行をお勧めします。

出典：Next.js Pages Router https://nextjs.org/docs/pages

• Next.js Pages Router
  https://nextjs.org/docs/pages

まとめ

App Router は、Next.js 13+ の新しいルーティングとアプリ構築の仕組みで、
React Server Components を前提とした高速・柔軟なアーキテクチャです。