Routes dynamiques
Lorsque vous ne connaissez pas à l'avance les noms exacts des segments et que vous souhaitez créer des routes à partir de données dynamiques, vous pouvez utiliser des segments dynamiques qui sont remplis au moment de la requête ou prérendus au moment de la construction.
Convention
Un segment dynamique peut être créé en entourant un nom de fichier ou de dossier de crochets : [segmentName]. Par exemple, [id] ou [slug].
Les segments dynamiques sont accessibles via useRouter.
Exemple
Par exemple, un blog pourrait inclure la route suivante pages/blog/[slug].js où [slug] est le segment dynamique pour les articles de blog.
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>Article : {router.query.slug}</p>
}| Route | Exemple d'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' } |
Segments attrape-tout
Les segments dynamiques peuvent être étendus pour attraper les segments suivants en ajoutant des points de suspension à l'intérieur des crochets [...segmentName].
Par exemple, pages/shop/[...slug].js correspondra à /shop/clothes, mais aussi à /shop/clothes/tops, /shop/clothes/tops/t-shirts, et ainsi de suite.
| Route | Exemple d'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'] } |
Segments attrape-tout optionnels
Les segments attrape-tout peuvent être rendus optionnels en incluant le paramètre dans des doubles crochets : [[...segmentName]].
Par exemple, pages/shop/[[...slug]].js correspondra également à /shop, en plus de /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.
La différence entre les segments attrape-tout et attrape-tout optionnels est qu'avec les optionnels, la route sans le paramètre est également prise en compte (/shop dans l'exemple ci-dessus).
| Route | Exemple d'URL | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | { slug: [] } |
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'] } |