# Introducción

Las rutas dinámicas en Next.js permiten crear páginas con URLs personalizadas que contienen variables, como un slug único para cada artículo. Esto es ideal para blogs, catálogos o cualquier contenido con identificadores únicos. En este artículo, verás cómo implementar rutas dinámicas con `slug`, `generateStaticParams` y parámetros tipados en TypeScript, incluyendo ejemplos prácticos con su salida esperada.

## ¿A quién va dirigido?

Este contenido está diseñado para desarrolladores que ya manejan Next.js y quieren profundizar en rutas dinámicas. Si buscas automatizar la generación de URLs o mejorar la mantenibilidad de tu aplicación, este artículo te aportará valor.

## Qué aprenderás

- Cómo crear rutas dinámicas con `[slug]` en Next.js.
- Uso de `generateStaticParams` para pre-renderizar páginas estáticamente.
- Implementación de parámetros tipados para evitar errores en tiempo de ejecución.
- Ejemplos con salida verificable.

## Creando Rutas Dinámicas con [slug]

En Next.js, una ruta dinámica se define agregando `[slug]` a la ruta. Por ejemplo, `pages/blog/[slug].js` generará una página para cada slug que cumpla con el patrón.

### Ejemplo de archivo `pages/blog/[slug].js`:
```javascript
// pages/blog/[slug].js
import { useRouter } from 'next/router';

const BlogPost = () => {
  const router = useRouter();
  const { slug } = router.query;

  if (!slug) {
    return <h1>Error 404: Artículo no encontrado</h1>;
  }

  // Aquí accedemos al contenido usando el slug
  const content = getPostBySlug(slug); // Función que obtendría datos de una base de datos

  return <div>Artículo: {content.title}</div>;
};

export default BlogPost;

Salida esperada:

Si visitas http://tu-dominio.com/blog/mi-primer-post, verás:

Artículo: Mi Primer Post

Generando Parámetros Estáticos con generateStaticParams

Para optimizar el rendimiento, Next.js permite pre-renderizar páginas estáticamente. generateStaticParams permite definir cuáles slugs deben generarse durante el build.

Paso 1: Definir la función generateStaticParams

// En `pages/blog/[slug].js`
export async function getStaticPaths() {
  // Simulamos obtener slugs desde una base de datos
  const allPosts = await fetchPostsFromDatabase();
  const paths = allPosts.map(post => `/blog/${post.slug}`);

  return {
    paths,
    // Cada ruta será pre-renderizada
    fallback: 'blocking'
  };
}

Paso 2: Uso de getStaticPaths

// En `pages/_app.js`
export default function MyApp({
  Component, pageProps 
}) {
  return <Component {...pageProps} />;
};

// En `next.config.js`
export default {
  generateStaticParams: {
    '/blog/[slug]': () => getStaticPaths() // Reutiliza la función anterior
  }
};

Salida esperada durante el build:

Next.js generará automáticamente páginas estáticas para cada slug en allPosts, como:

/blog/mi-primer-post
/blog/segundo-articulo

Parámetros Tipados con TypeScript

Usar TypeScript en rutas dinámicas evita errores en tiempo de ejecución. Definimos una interfaz para los parámetros de la ruta.

Ejemplo con TypeScript:

// pages/blog/[slug].tsx
export interface BlogPostParams {
  slug: string;
}

const BlogPost: React.FC<BlogPostParams> = ({ slug }) => {
  const content = getPostBySlug(slug);
  return <div>Título: {content.title}</div>;
};

export default BlogPost;

Salida esperada:

Si el slug no existe, Next.js lanzará un error 404 automáticamente si no se maneja en el componente.

Casos Prácticos y Ejemplos Adicionales

Ejemplo 1: Rutas dinámicas con subrutas

// pages/blog/[slug]/details.js
const Details = () => {
  const { slug } = useRouter().query;
  return <h2>Detalles del artículo: {slug}</h2>;
};

Salida:

Acceder a http://tu-dominio.com/blog/mi-primer-post/details mostrará:

Detalles del artículo: mi-primer-post

Ejemplo 2: Validación de slugs

// En getStaticPaths
const validSlugs = ['mi-primer-post', 'segundo-articulo'];
const paths = validSlugs.map(slug => `/blog/${slug}`);

Salida:

Solo se generarán rutas para los slugs en validSlugs.

Buenas Prácticas

• Usa slugs cortos y descriptivos.
• Combina generateStaticParams con getStaticProps para Content Freshness.
• Valida siempre los slugs en tiempo de ejecución.

Conclusión

Las rutas dinámicas en Next.js con slug, generateStaticParams y params tipados ofrecen flexibilidad y rendimiento. Al seguir estas prácticas, optimizarás la generación de contenido estático y reducirás errores en tu aplicación. ¡Prueba implementando estos conceptos en tu próximo proyecto!

Próximos Pasos

• Explora getStaticProps para datos en tiempo real.
• Aprende a manejar errores 404 personalizados.