Open1
【React Next】Nextにおけるpages/配下のルーティング
yu.miyoshi概要
Next.jsにおけるルーティングについて書きます。
Next.jsにおけるルーティング
pagesディレクトリ配下にファイルを追加すれば、自動的にルーティングが作成される。
Index routes
indexという名前(index.tsx, index.js)のファイルを自動的にそのディレクトリのrootとして認識する。
pages/index.js → /
pages/blog/index.js → /blog
Nested routes
ネストされたファイルもネストのディレクトリ構造に基づき、自動的にルーティングを作成してくれる。
pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username
ダイナミックル-ティング(Dynamic route segments)
大括弧でくくったファイル名のファイルを追加すると、動的にルーティングを作成してくれる。
pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)
参考サイト