Rutas dinámicas
Cuando no conoces los nombres exactos de los segmentos con anticipación y deseas crear rutas a partir de datos dinámicos, puedes usar Segmentos Dinámicos que se completan en tiempo de solicitud o prerrenderizados en tiempo de construcción.
Convención
Un Segmento Dinámico se puede crear envolviendo un nombre de archivo o carpeta entre corchetes: [nombreSegmento]. Por ejemplo, [id] o [slug].
Los Segmentos Dinámicos se pueden acceder desde useRouter.
Ejemplo
Por ejemplo, un blog podría incluir la siguiente ruta pages/blog/[slug].js donde [slug] es el Segmento Dinámico para las entradas del blog.
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>Publicación: {router.query.slug}</p>
}| Ruta | URL de ejemplo | 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' } |
Segmentos comodín
Los Segmentos Dinámicos se pueden extender para capturar todos los segmentos subsiguientes agregando puntos suspensivos dentro de los corchetes [...nombreSegmento].
Por ejemplo, pages/shop/[...slug].js coincidirá con /shop/clothes, pero también con /shop/clothes/tops, /shop/clothes/tops/t-shirts, y así sucesivamente.
| Ruta | URL de ejemplo | 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'] } |
Segmentos comodín opcionales
Los Segmentos Comodín pueden hacerse opcionales incluyendo el parámetro en dobles corchetes: [[...nombreSegmento]].
Por ejemplo, pages/shop/[[...slug]].js también coincidirá con /shop, además de /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.
La diferencia entre los segmentos comodín y comodín opcionales es que con los opcionales, la ruta sin el parámetro también coincide (/shop en el ejemplo anterior).
| Ruta | URL de ejemplo | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | {} |
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'] } |