📰 Introducción y planificación para crear un blog

Next.js Blog

📰 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:

  1. Crear la estructura base del proyecto y configuración de Tailwind CSS.
  2. Agregar los posts en Markdown y crear rutas dinámicas.
  3. Diseñar los componentes reutilizables (tarjetas de post, encabezados, etc.).
  4. Integrar comentarios usando API Routes.
  5. Optimizar imágenes con next/image y aplicar estilos finales.
  6. Revisar SEO, metadata y pre-renderizado.
  7. Preparar el despliegue en Vercel.

Cada una de estas etapas se desarrollará en entradas posteriores, paso a paso.

💡 Consejo: Planificar tu proyecto antes de escribir código ayuda a evitar errores y facilita la expansión futura del blog.

Publicar un comentario

0 Comentarios