Rutas dinámicas y slugs en Next.js: Guía de desarrollo

Next.js utiliza enrutamiento basado en el sistema de archivos con sintaxis de corchetes para segmentos dinámicos: [slug].

Ruta dinámica básica

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>;
}

Generar parámetros estáticos

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Rutas catch-all

[...slug] coincide con /a/b/c. [[...slug]] también coincide con la raíz.

Genera slugs

Usa nuestro generador de slugs URL o el conversor a kebab-case.