動的ルート
正確なセグメント名が事前にわからず、動的データからルートを作成したい場合は、リクエスト時に設定される動的セグメント、またはビルド時にプリレンダリングされる動的セグメントを使用できます。
規約
動的セグメントは、ファイルまたはフォルダ名を角かっこで囲むことで作成できます。 [segmentName]
。たとえば、[id]
または [slug]
です。
動的セグメントには、useRouter
からアクセスできます。
例
ルート | URL例 | パラメータ |
---|---|---|
pages/blog/[slug].js | /blog/a | { slug: 'a' } |
pages/blog/[slug].js | /blog/b | { slug: 'b' } |
pages/blog/[slug].js | /blog/c | { slug: 'c' } |
キャッチオールセグメント ルート URL例 パラメータ
pages/shop/[...slug].js
/shop/a
{ slug: ['a'] }
pages/shop/[...slug].js
/shop/a/b
{ slug: ['a', 'b'] }
pages/shop/[...slug].js
/shop/a/b/c
{ slug: ['a', 'b', 'c'] }
ルート | URL例 | パラメータ |
---|---|---|
pages/shop/[...slug].js | /shop/a | { slug: ['a'] } |
pages/shop/[...slug].js | /shop/a/b | { slug: ['a', 'b'] } |
pages/shop/[...slug].js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |