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 se prerrenderizan 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 pueden accederse 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>
}

Segmentos Comodín

Los Segmentos Dinámicos pueden extenderse 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.

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).