App Routerとは？
App Router は、Next.js 13以降で導入された新しいルーティングシステムです。
従来の pages/ ディレクトリを使ったルーティング（Pages Router）に代わり、
app/ ディレクトリを使ってより柔軟でモダンなページ設計ができるようになりました。
特徴
app/ディレクトリでルーティングを管理- ファイルとフォルダ構成＝URL構造
- サーバーコンポーネント対応（デフォルト）
- レイアウトやエラー画面を個別に管理できる
- 並列ルーティングや部分的ローディングが可能
従来（Pages Router）との違い
| 項目 | Pages Router (pages/) |
App Router (app/) |
|---|---|---|
| ルート管理 |
pages/ フォルダ |
app/ フォルダ |
| ページ作成方法 | ファイル単位（例：about.js） |
フォルダ+page.tsx（例：about/page.tsx） |
| レイアウト管理 |
_app.jsで一括管理 |
各ディレクトリでlayout.tsx
|
| サーバーコンポーネント | 利用不可 | デフォルトで利用可能 |
| 柔軟なUI制御 | △ | ◎ |
App Routerのフォルダ構成例
app/ layout.tsx // 全体レイアウト
page.tsx // トップページ
about/ page.tsx // /about ページ
blog/ [slug]/ page.tsx // /blog/任意のslug（動的ルーティング）
error.tsx // エラーページ
各ファイル・フォルダの意味
-
layout.tsx
- 全体共通の見た目や構成を作る
- 例えば、ヘッダー・フッターをここで設定する
-
page.tsx
- 実際に表示するページの中身を書く
- 例えば、トップページならここに書く
-
[slug]/page.tsx
- URLによって中身が変わるページを作る
- 例えば
/blog/first-postと/blog/second-postみたいに、記事ごとにページを自動生成できる
-
error.tsx
- ページがエラーになった時（例えば 404）に表示する画面を作る
まとめ
- ファイルやフォルダを作るだけで自動的にルーティングされる
- 共通レイアウトも各ページ専用レイアウトも自由に作れる
- ブログみたいに記事がたくさんあるサイトも、動的に楽に作れる