Next.jsのルーティングの概要
Next.jsのルーティングには、大きく分けてpageルーターとappルーターの2種類があります。今回は、ファイルシステムベースで直感的なルーティングが可能なpageルーターについて詳しく解説していきます。
Pageルーティングについて
pageルーターは、Next.jsの初期から存在するルーティング方式です。pagesディレクトリ内に配置されたファイルが、そのままURLに対応するページとして扱われます。つまり、ファイルシステムの構造とURLの構造がほぼ一致するため、直感的にルーティングを設定することができます。
通常のルーティング
ファイル構造とルーティングの対応
pagesディレクトリ内に作成したファイルが、そのままURLに対応します。
-
pages/about.js: /about にアクセスすると表示されます -
pages/blog/post.js: /blog/post にアクセスすると表示されます
ネストしたルーティング
pagesディレクトリ内にフォルダを作成することで、ネストしたルーティングを実現できます。
-
pages/products/index.js: /products にアクセスすると表示されます -
pages/products/[id].js: /products/123 のような動的なURLを実現できます
ダイナミックルーティング
動的なURLを実現するために、Next.jsではダイナミックルーティングという機能を提供しています。
[id]、[...]、[[...id]]といった特別な記法を使用することで、動的なパスを実現することができます。
[id]
例: pages/products/[id]/index.jsxは、/products/123のようなURLを実現します
[...]
例: pages/blog/[...slug]/index.jsxは、以下のURLすべてにアクセスできます。
/blog/hello/blog/hello/world/blog/deeply/nested/path
[[...id]]
例: pages/blog/[[...slug]]/index.jsx は、以下のURLすべてにアクセスできます。
/blog/blog/hello/blog/hello/world/blog/deeply/nested/path
[...]の場合は、/blogにアクセスできませんが、[[...slug]]の場合は、/blogでもアクセス可能となります。
まとめ
pageルーターは、Next.jsのルーティングの基礎となる機能です。ファイルシステムベースの直感的な設定が可能であり、静的サイト生成との親和性も高いです。ダイナミックルーティング機能を活用することで、様々な種類のURLに対応することができます。