Crear y escalar contenido en Astro se vuelve sencillo cuando usas content collections, una función nativa que reemplaza la creación manual de rutas dentro de Pages. Si tu sitio tendrá productos, artículos de blog o cualquier contenido repetido, esta es la forma más limpia de organizarlo y validarlo desde el inicio.

¿Qué son las content collections en Astro y por qué importan?

Astro trabaja con un enrutamiento basado en archivos, lo que significa que cada archivo dentro de Pages se convierte en una ruta. Funciona bien para pocas páginas, pero no escala cuando quieres listar productos de una tienda o publicar artículos constantemente.

Ahí entra Astro Content, una biblioteca incorporada que te permite definir colecciones para agrupar archivos Markdown bajo una misma estructura. Puedes traer información desde una API, otra plataforma o mantenerla local, y Astro se encarga de iterar cada documento para renderizar rutas dinámicas.

¿Qué es una content collection en Astro? Es una carpeta especial donde defines un grupo de contenido relacionado, como productos o blog posts, con un esquema validado. Astro lee cada archivo Markdown y lo convierte en una ruta o recurso disponible en tu sitio.

¿Cómo estructurar la carpeta content para productos?

Lo primero es crear una carpeta llamada content en la raíz del proyecto. Esta es una de las carpetas reservadas que Astro escucha para administrar tu contenido.

Dentro de content, crea una subcarpeta por cada colección. Para una tienda en línea tiene sentido tener al menos dos:

• products para los artículos en venta.
• blog para los posts que promueven esos productos.

Dentro de products agrega tu primer archivo, por ejemplo product1.md. En la cabecera del Markdown defines los campos clave del producto:

• title: nombre del producto.
• description: descripción corta.
• date: fecha de publicación.
• heroImage: imagen destacada.
• price: precio numérico.
• category: categoría a la que pertenece.

Un ejemplo concreto sería un set de Lego Space Galaxy Explorer, con fecha de agosto de 1979, precio de 200 dólares y categoría Space. Debajo del frontmatter puedes escribir contenido Markdown libre, como una descripción extendida o detalles de las piezas.

¿Qué archivo necesitas para definir el esquema?

Para que Astro entienda la forma de tus datos, crea un archivo config.ts directamente dentro de content, no dentro de products. Trabajamos con TypeScript porque el tipado ayuda a detectar errores antes de que el contenido llegue al sitio.

En ese archivo importas dos piezas: defineCollection de Astro y z desde la librería Zod, que valida y analiza el esquema de tus datos.

ts import { defineCollection, z } from 'astro:content';

const product = defineCollection({ type: 'content', schema: z.object({ title: z.string(), description: z.string(), date: z.date(), heroImage: z.string(), price: z.number(), category: z.string(), }), });

export const collections = { product };

Fíjate en un detalle importante: aunque en el Markdown la fecha se escribe como string, Zod la transforma con z.date() para que la trabajes como objeto fecha en tu código.

¿Cómo validar tu contenido con Zod en Astro?

Zod es una librería de validación de esquemas que se integra de forma nativa con las colecciones de Astro. Su trabajo es asegurar que cada archivo Markdown cumpla con la estructura esperada antes de renderizarse.

Cada campo se declara con un tipo específico:

• z.string() para texto como title, description, heroImage y category.
• z.number() para valores numéricos como price.
• z.date() para fechas como date.

Si un producto olvida un campo o usa un tipo equivocado, Astro te avisa en build time. Eso evita que un precio mal escrito o una categoría faltante rompa tu tienda en producción.

¿Para qué sirve Zod en Astro Content? Sirve para definir y validar el esquema de tus colecciones. Garantiza que cada archivo Markdown tenga los campos correctos con los tipos correctos, evitando errores en runtime.

¿Cómo exportar varias colecciones desde un mismo config?

La exportación se hace a través de la constante collections, que es un objeto donde cada propiedad representa una colección distinta. Puedes tener tantas como necesites: productos, blog, autores, categorías, lo que tu proyecto pida.

Por ejemplo, si más adelante defines una colección blog con su propio defineCollection, simplemente la agregas al objeto exportado:

ts export const collections = { product, blog };

Esa flexibilidad es lo que hace a las content collections tan potentes para sitios que crecen.

Habilidades y conceptos clave que aprendiste

Estos son los puntos que conviene fijar antes de avanzar al siguiente paso del proyecto:

• Enrutamiento basado en archivos de Astro y sus límites cuando el contenido crece.
• Carpeta reservada content como punto central para administrar colecciones.
• defineCollection para declarar una colección con su tipo y esquema.
• Zod (z) como herramienta de validación de tipos: string, number, date.
• Frontmatter en Markdown con campos como title, description, date, heroImage, price y category.
• Exportación de collections para registrar todas tus colecciones en config.ts.

Ahora viene tu turno: crea la estructura del blog siguiendo el mismo patrón. Define qué campos llevará el frontmatter, arma el defineCollection con su esquema en Zod y piensa qué elementos extra podrían faltar, como etiquetas o autor. Déjalo en la sección de comentarios y revisemos juntos cómo quedó tu esquema de datos.