Crear un blog con Next.js y Markdown es una excelente opción para desarrollar un sitio rápido, ligero y fácil de mantener. En lugar de almacenar cada artículo en una base de datos, podemos guardar las publicaciones como archivos Markdown y utilizar Next.js para convertirlas en páginas web.
1. Crear el proyecto
Comenzamos creando una aplicación con Next.js:
npx create-next-app@latest mi-blog
cd mi-blog
npm run dev
Podemos utilizar el App Router, que permite organizar las páginas mediante carpetas dentro de app.
2. Crear los artículos Markdown
Una estructura sencilla puede ser:
mi-blog/
├── app/
├── posts/
│ ├── primer-articulo.md
│ └── segundo-articulo.md
└── lib/
Cada archivo Markdown puede incluir información adicional mediante Front Matter:
---
title: "Aprendiendo Next.js"
date: "2026-09-25"
description: "Introducción práctica a Next.js"
---
# Aprendiendo Next.js
Next.js permite crear aplicaciones web modernas...
Esto facilita almacenar el título, fecha, descripción, autor y otros datos de cada publicación.
3. Leer los archivos desde Next.js
Podemos utilizar Node.js para acceder al contenido de la carpeta posts:
import fs from "fs";
import path from "path";
const postsDirectory = path.join(process.cwd(), "posts");
export function getPosts() {
const files = fs.readdirSync(postsDirectory);
return files.map((file) => ({
slug: file.replace(".md", ""),
content: fs.readFileSync(
path.join(postsDirectory, file),
"utf8"
),
}));
}
Después podemos procesar el Markdown utilizando herramientas como gray-matter para extraer el Front Matter y remark o react-markdown para convertir el contenido en elementos HTML/React.
4. Crear páginas dinámicas
Con el App Router podemos crear:
app/
└── blog/
└── [slug]/
└── page.jsx
Así, una publicación como primer-articulo.md puede mostrarse automáticamente en:
/blog/primer-articulo
La página dinámica recibe el slug, busca el archivo correspondiente y renderiza su contenido.
5. Añadir un diseño profesional
Para mejorar la experiencia podemos incorporar Tailwind CSS, creando tarjetas para los artículos, categorías, fechas, imágenes destacadas y una navegación clara.
También es importante trabajar el SEO utilizando metadata, títulos descriptivos y descripciones únicas para cada publicación.
6. Ventajas de esta arquitectura
Un blog basado en Next.js y Markdown puede ofrecer excelente rendimiento, control total sobre el contenido, facilidad para utilizar Git y una estructura sencilla de mantener. Además, permite agregar posteriormente búsqueda, categorías, etiquetas, comentarios o incluso migrar el contenido hacia un CMS.
Con esta arquitectura tendrás una base sólida para construir un blog profesional, rápido y escalable sin necesidad de comenzar con una base de datos.
