Dynamische Routen
Wenn Sie die genauen Segmentnamen nicht im Voraus kennen und Routen aus dynamischen Daten erstellen möchten, können Sie dynamische Segmente verwenden, die zum Zeitpunkt der Anfrage oder während des Builds vorgerendert werden.
Konvention
Ein dynamisches Segment kann erstellt werden, indem man einen Datei- oder Ordnernamen in eckige Klammern setzt: [segmentName]. Zum Beispiel [id] oder [slug].
Auf dynamische Segmente kann über useRouter zugegriffen werden.
Beispiel
Ein Blog könnte beispielsweise die folgende Route pages/blog/[slug].js haben, wobei [slug] das dynamische Segment für Blogbeiträge ist.
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>Post: {router.query.slug}</p>
}| Route | Beispiel-URL | params |
|---|---|---|
pages/blog/[slug].js | /blog/a | { slug: 'a' } |
pages/blog/[slug].js | /blog/b | { slug: 'b' } |
pages/blog/[slug].js | /blog/c | { slug: 'c' } |
Catch-all-Segmente
Dynamische Segmente können erweitert werden, um nachfolgende Segmente zu erfassen, indem man Auslassungspunkte innerhalb der Klammern hinzufügt [...segmentName].
Zum Beispiel wird pages/shop/[...slug].js /shop/clothes abdecken, aber auch /shop/clothes/tops, /shop/clothes/tops/t-shirts und so weiter.
| Route | Beispiel-URL | params |
|---|---|---|
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'] } |
Optionale Catch-all-Segmente
Catch-all-Segmente können optional gemacht werden, indem man den Parameter in doppelte eckige Klammern setzt: [[...segmentName]].
Zum Beispiel wird pages/shop/[[...slug]].js auch /shop abdecken, zusätzlich zu /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.
Der Unterschied zwischen Catch-all- und optionalen Catch-all-Segmenten besteht darin, dass bei optionalen Segmenten auch die Route ohne Parameter abgedeckt wird (/shop im obigen Beispiel).
| Route | Beispiel-URL | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | { slug: undefined } |
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'] } |