馃摪 Introducci贸n y planificaci贸n para crear un blog
En esta primera entrada, vamos a sentar las bases para construir un blog completo con Next.js, Markdown y Tailwind CSS.
馃摑 Qu茅 vamos a construir
Nuestro objetivo es crear un blog completo que incluya:
- Listado de posts con pre-renderizado para SEO.
- P谩ginas individuales de cada post usando rutas din谩micas.
- Integraci贸n de comentarios simples usando API Routes.
- Optimizaci贸n de im谩genes con
next/image. - Estilos modernos con Tailwind CSS.
Todo esto nos permitir谩 entender c贸mo funciona Next.js en un proyecto real y c贸mo combinar varias caracter铆sticas del framework.
馃搨 Estructura inicial del proyecto
Antes de escribir c贸digo, planificaremos la estructura de carpetas. Esto nos ayudar谩 a mantener el proyecto organizado:
my-blog/
├─ app/
│ ├─ page.js // P谩gina de inicio
│ ├─ posts/
│ │ └─ [slug]/page.js // P谩ginas din谩micas de cada post
│ └─ components/ // Componentes reutilizables
├─ posts/ // Archivos Markdown de los posts
├─ public/ // Im谩genes y recursos p煤blicos
├─ styles/ // Estilos globales (Tailwind + CSS)
└─ package.json
Esta estructura combina lo aprendido hasta ahora: App Router, componentes reutilizables y contenido Markdown.
馃殌 Plan de trabajo por etapas
Para no perdernos, vamos a dividir la creaci贸n del blog en etapas:
- Crear la estructura base del proyecto y configuraci贸n de Tailwind CSS.
- Agregar los posts en Markdown y crear rutas din谩micas.
- Dise帽ar los componentes reutilizables (tarjetas de post, encabezados, etc.).
- Integrar comentarios usando API Routes.
- Optimizar im谩genes con
next/imagey aplicar estilos finales. - Revisar SEO, metadata y pre-renderizado.
- Preparar el despliegue en Vercel.
Cada una de estas etapas se desarrollar谩 en entradas posteriores, paso a paso.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias