Las rutas dinámicas en Astro permiten que cada tip o post de tu colección de contenido tenga su propia URL renderizada como página estática. Aprenderás a configurar el archivo [...slug].astro y la función getStaticPaths para que tu proyecto deje de devolver un error 404 al entrar a un detalle.

¿Por qué Astro necesita getStaticPaths para rutas dinámicas?

Astro está pensado para sitios estáticos, así que cuando agregas rutas dinámicas no sabe qué URLs existen ni qué información mostrar. Tienes que decírselo de forma explícita.

La función getStaticPaths resuelve justo eso: le entrega a Astro la lista de rutas que debe generar a partir de tu colección de contenido. En el momento del build, cada coincidencia se transforma en un archivo estático listo para producción [01:18].

¿Qué hace getStaticPaths en Astro? Devuelve un arreglo con las rutas que Astro debe generar como páginas estáticas durante el build, junto con las props que cada página recibirá.

¿Cómo se nombra el archivo de una ruta dinámica en Astro?

Dentro de la carpeta src/pages/posts/ creas un archivo con corchetes y tres puntos antes del nombre del parámetro: [...slug].astro. Esa sintaxis le indica a Astro que el segmento de la URL es variable y se capturará como slug.

La estructura básica del archivo combina tres piezas:

• El bloque de código frontmatter delimitado por tres guiones, donde vive la lógica en JavaScript.
• La importación de getCollection desde astro:content.
• La función exportada getStaticPaths que retorna las rutas.

¿Cómo se construye la lógica de getStaticPaths paso a paso?

La idea es leer toda la colección y mapear cada entrada a un objeto con params y props. Así Astro sabe qué slug corresponde a qué contenido.

Importar la colección de tips

Dentro del frontmatter haces el import de getCollection desde astro:content y lo invocas con el nombre de la colección, en este caso tips, que es donde viven los archivos Markdown de cada recurso [03:30].

astro

import { getCollection } from 'astro:content';

export async function getStaticPaths() { const posts = await getCollection('tips');

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

Mapear cada post a una ruta

El .map recorre el arreglo de posts y devuelve un objeto por cada uno. En params.slug colocas el slug del post; ese valor se compara contra el slug que llega en la URL. Cuando hay coincidencia, Astro renderiza esa página y pasa el post completo como prop.

Si no existe coincidencia, el sitio responde con el clásico 404 [04:45].

¿Para qué sirve params en getStaticPaths? Define el valor del segmento dinámico de la URL. Astro usa params.slug para emparejar la ruta solicitada con el contenido correcto de la colección.

¿Cómo renderizar el contenido del post en la página?

Una vez que getStaticPaths entrega las props, dentro del mismo archivo recuperas el post desde Astro.props y llamas a su método render para obtener el componente Content.

astro const { post } = Astro.props; const { Content } = await post.render();

Luego, en la parte del template, usas <Content /> como un componente normal. Ojo con el detalle: Content se escribe con mayúscula, porque Astro lo trata como componente y no como variable [06:30].

• post proviene de Astro.props y contiene los datos del Markdown.
• await post.render() retorna el componente listo para mostrar.
• <Content /> inyecta el HTML resultante del Markdown en tu página.

Con esa lógica cargada, al recargar la URL del tip el error 404 desaparece y aparece el contenido renderizado. Lo que verás todavía es texto plano sin estilos, porque aún falta envolverlo en un template visual.

¿Qué sigue después de hacer render del contenido?

El contenido ya se muestra, pero sin layout ni diseño. El siguiente paso es construir un template que envuelva <Content /> con encabezado, tipografía y estructura coherente con el resto del sitio, para que cada tip luzca elegante y sea compartible en redes sociales.

¿Has tenido errores con getStaticPaths al pasar de rutas estáticas a dinámicas? Cuéntalo en los comentarios y comparte cómo lo resolviste.