🐥
Pages RouteとApp Routerのまとめ
この記事について
Nextの開発をしていて最初からApp Routerだったため完全にルーティングを意識せずに実装していました。最近、知人から「Routerはどっちを使っていますか？」と聞かれ、恥ずかしいことにちゃんと答えられなかったため改めて勉強してまとめました。
Pages Router
概要
Next.js13以前、Pages Routerがルートを作成する主な方法だった。直感的なファイルシステムルーターを使用して各ファイルをルートにマッピングできる。Next.jsの新バージョンでも引き続きサポートはされているが、Reactの最新機能を活用するにあたりApp Routerが推奨とのこと。
ルーティング
pagesディレクトリ配下にファイルを作成し、exportを作成するとアクセスできるようになる。
src/pages/about.js -> /about
export default function About() {
return <div>About</div>
}
ネストされたルート
src/pages/blog/first-post.js -> /blog/first-post
src/pages/dashboard/settings/username.js -> /dashboard/settings/username
動的なルート
src/pages/posts/[id].js
App Router
ルーティング
src/appディレクトリ配下にルーティングしたいファイルを追加する。ディレクトリ構成がルーティングとなる。page.jsが必須。
src/app/about/page.js -> /about
ネストされたルート
src/app/blog/first-post/page.js -> /blog/first-post
src/app/dashboard/settings/username/page.js -> /dashboard/settings/username
動的なルート
src/app/posts/[id]/page.js
ファイルの種別
page.jsと同じ階層に以下のファイルを配置することで特定の動作を持つUIを作成することができる。
セグメントとは階層のこと（例えばURL/blog/postなら/はルートセグメント、blogやpostがセグメント）。
| ファイル名 | 機能 |
|---|---|
| layout | セグメントとその配下の共有UI |
| page | ルートの固有なUIとルートをパブリックにアクセス可能にする |
| loading | セグメントとその配下のUIをローディングUI |
| not-found | セグメントとその配下のnot found UI |
| error | セグメントとその配下のエラーUI |
| global-error | グローバルエラーUI |
| route | サーバー側APIエンドポイント |
| template | 特殊に再レンダリングされたレイアウトUI |
| default | 並列ルートのフォールバック UI |
補足
App RouterとPages Routerは両方同時に使用できるためディレクトリごとに移行することができます。また、App RouterはPages Routerよりも優先されるらしい。
参考
以下公式ドキュメント
pages router
app router
他に気になることがあれば追記予定です！
Discussion