Rutas dinámicas

Cuando no conoces los nombres exactos de los segmentos con anticipación y deseas crear rutas desde datos dinámicos, puedes usar Segmentos Dinámicos que se completan en tiempo de solicitud o pre-renderizados en tiempo de construcción.

Convención

Un Segmento Dinámico puede crearse envolviendo el nombre de una carpeta entre corchetes: [nombreCarpeta]. Por ejemplo, [id] o [slug].

Los Segmentos Dinámicos se pasan como prop params a las funciones layout, page, route, y generateMetadata.

Ejemplo

Por ejemplo, un blog podría incluir la siguiente ruta app/blog/[slug]/page.js donde [slug] es el Segmento Dinámico para las entradas del blog.

export default function Page({ params }: { params: { slug: string } }) {
  return <div>Mi entrada: {params.slug}</div>
}

export default function Page({ params }) {
  return <div>Mi entrada: {params.slug}</div>
}

Consulta la página generateStaticParams() para aprender cómo generar los parámetros para el segmento.

Nota importante: Los Segmentos Dinámicos son equivalentes a Rutas Dinámicas en el directorio pages.

Generación de Parámetros Estáticos

La función generateStaticParams puede usarse en combinación con segmentos de ruta dinámicos para generar estáticamente rutas en tiempo de construcción en lugar de bajo demanda en tiempo de solicitud.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

El beneficio principal de la función generateStaticParams es su recuperación inteligente de datos. Si el contenido se obtiene dentro de la función generateStaticParams usando una solicitud fetch, las solicitudes se memorizan automáticamente. Esto significa que una solicitud fetch con los mismos argumentos a través de múltiples generateStaticParams, Layouts y Pages solo se hará una vez, lo que reduce los tiempos de construcción.

Usa la guía de migración si estás migrando desde el directorio pages.

Consulta la documentación de la función de servidor generateStaticParams para más información y casos de uso avanzados.

Segmentos comodín

Los Segmentos Dinámicos pueden extenderse para capturar todos los segmentos subsiguientes añadiendo puntos suspensivos dentro de los corchetes [...nombreCarpeta].

Por ejemplo, app/shop/[...slug]/page.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: [[...nombreCarpeta]].

Por ejemplo, app/shop/[[...slug]]/page.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).

TypeScript

Cuando uses TypeScript, puedes añadir tipos para params dependiendo de tu segmento de ruta configurado.

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>Mi página</h1>
}

export default function Page({ params }) {
  return <h1>Mi página</h1>
}

Nota importante: Esto puede hacerse automáticamente por el plugin de TypeScript en el futuro.