Lo que vas a construir
Un blog personal con Next.js donde escribes posts en archivos Markdown y automaticamente se generan paginas estaticas con URLs amigables. Tendras una pagina principal listando todos tus posts con titulo, fecha y tags, cada post con syntax highlighting para codigo y la posibilidad de usar componentes React dentro del Markdown. El sitio sera ultra-rapido porque se genera estaticamente (SSG) y puedes desplegarlo gratis en Vercel.
Paso 1: Pidele a una IA el blog
Necesito un blog con Next.js que:
- Use MDX para los posts
- Tenga una página listando todos los posts
- Cada post tenga metadata (título, fecha, tags)
- Sintaxis highlighting para código
- Genere rutas estáticas (SSG)
- TypeScript y Tailwind CSS
Dame la estructura completa con 2 posts de ejemplo.
Estructura
app/
├── blog/
│ ├── page.tsx # Lista de posts
│ └── [slug]/
│ └── page.tsx # Post individual
content/
├── posts/
│ ├── hello-world.mdx
│ └── segundo-post.mdx
MDX ejemplo
---
title: "Mi Primer Post"
date: "2026-01-01"
tags: ["nextjs", "tutorial"]
---
# Bienvenido
Este es mi primer post con **MDX**.
<CustomComponent prop="valor" />
\`\`\`typescript
const greeting = "Hola mundo!"
\`\`\`
Librerías útiles
| Librería | Para qué |
|---|---|
@next/mdx | MDX en Next.js |
gray-matter | Parsear frontmatter |
rehype-highlight | Syntax highlighting |