Enrutamiento Dinámico en Next.js: Crear Estructura URL SEO-Friendly

Aprende a crear estructuras URL SEO-friendly usando enrutamiento dinámico con Next.js App Router. Parámetros slug, rutas catch-all y optimización de metadatos.

Next.js es uno de los frameworks React más populares para aplicaciones web modernas. Las características de enrutamiento dinámico del App Router proporcionan herramientas poderosas para crear estructuras URL SEO-friendly.

Fundamentos del App Router de Next.js

El App Router en Next.js 13+ usa un sistema de enrutamiento basado en archivos.

Parámetros de Ruta Dinámica

Parámetro Único [slug]

Para contenido singular como posts de blog.

Rutas Catch-All [...slug]

Para URLs de múltiples segmentos.

Optimización de Metadatos SEO

Creación de metadatos SEO para páginas dinámicas con generateMetadata.

Generación Estática con SEO

Creación de páginas estáticas en tiempo de compilación con generateStaticParams.

Función de Generación de Slug

Convierte texto en slugs amigables para URL.

Mejores Prácticas

• Usar URLs en minúsculas
• Usar guiones como separadores de palabras
• Mantener URLs bajo 75 caracteres

Conclusión

El enrutamiento dinámico con Next.js App Router proporciona un sistema poderoso para estructuras URL SEO-friendly.