App Routerとは？
App Router は、Next.js 13以降で導入された新しいルーティング方式。app/ ディレクトリ配下のファイル構造がURLに対応し、React Server Componentsがデフォルトで動作します。
主な特徴
- ファイルベースルーティング（
page.tsx= URL） - レイアウト継承（
layout.tsx） - Loading/Error UI（
loading.tsx/error.tsx） - Server Componentsデフォルト
- ストリーミング対応
旧Pages Routerとの違い
| 観点 | Pages Router | App Router |
|---|---|---|
| データ取得 | getServerSideProps | async Server Components |
| 共通レイアウト | _app.tsx | layout.tsx |
| JS バンドル | 全体 | 必要な部分のみ |
App Routerは JSバンドルサイズを大幅削減 し、初回表示とCore Web Vitalsを改善。
Tufe Companyの採用
本サイトは Next.js 16 + App Router で構築。SSGで生成される650+ページすべてが App Router の恩恵を受けています。