TL;DR
パスパラメータを持つ Route。Next.js の App Router では、フォルダ名を [ ] で囲むと、パスパラメータに応じた画面を提供できる。
仕組み
Dynamic Segment の書き方には 3 種類ある。
[slug]
layout.tsx や page.tsx で、パスパラメータを文字列として取得できる。app/blog/[slug]/page.tsx の場合は次のようになる。
| URL リクエスト | params |
|---|---|
/blog/a | { slug: 'a' } |
/blog/b | { slug: 'b' } |
/blog/c | { slug: 'c' } |
[...slug]（Catch-all Segment）
ネストしたパスに対応し、すべてのパスパラメータを配列として取得できる。app/blog/[...slug]/page.tsx の場合は次のようになる。
| URL リクエスト | params |
|---|---|
/blog/a | { slug: ['a'] } |
/blog/a/b | { slug: ['a', 'b'] } |
/blog/a/b/c | { slug: ['a', 'b', 'c'] } |
[[...slug]]（Optional Catch-all Segment）
[...slug] と似ているが、パスパラメータがないパスにも対応する。app/blog/[[...slug]]/page.tsx の場合は次のようになる。
| URL リクエスト | params |
|---|---|
/blog | {} |
/blog/a | { slug: ['a'] } |
/blog/a/b | { slug: ['a', 'b'] } |
/blog/a/b/c | { slug: ['a', 'b', 'c'] } |
注意点
パスに影響を与えずにフォルダをまとめたいときは、Dynamic Routes ではなく Route Groups を使う。