TL;DR
Next.js の、ファイルシステムに基づくルーター。app ディレクトリのフォルダとファイルでルートを定義し、Server Components、Suspense、Server Functions など React の新しい機能を使う。
なぜ必要か
Next.js のルーターには、App Router と Pages Router（pages ディレクトリ）の 2 つがあり、ドキュメントも分かれている。App Router では、レイアウト、読み込み中の UI、エラー時の UI などを決まった名前のファイルとして置くだけで、React の仕組みに組み込める。create-next-app でも App Router を使うかを最初に聞かれ、推奨されている。
仕組み
app ディレクトリのフォルダが URL Segment を定め、フォルダを入れ子にするとセグメントも入れ子になる。ルートが公開されるのは、そのフォルダに page か route のファイルがあるときだけである。そのため、ルートのフォルダにほかのファイルを置いても、誤ってルーティングされない（コロケーション）。
特別なファイルには、layout、page、loading、not-found、error、global-error、route、template、default がある。これらは layout、template、error（Error Boundary）、loading（Suspense の境界）、not-found、page の順に入れ子でレンダリングされ、子のセグメントは親のセグメントの中に入る。
フォルダ名の書き方でも挙動を変えられる。
[slug]: パスパラメータを持つ Dynamic Routes(group): URL に影響させずにルートをまとめる Route Groups_folder: ルーティングの対象から外す Private Folder@slot: Parallel Routes の名前付きスロット(.)folderなど: 別のルートを今のレイアウトの中に表示する Intercepting Routes
例
| パス | URL |
|---|---|
app/layout.tsx | 全ルートを包む |
app/page.tsx | / |
app/blog/page.tsx | /blog |
app/blog/[slug]/page.tsx | /blog/my-post |
app/(shop)/cart/page.tsx | /cart |