📰 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