Cómo crear un blog en tu portafolio con Next.js y Markdown (rápido y escalable)

📌 Introducción

Tener un blog en tu portafolio no es solo estética, es una ventaja competitiva. No necesitas un CMS pesado: con Next.js puedes crear un sistema rápido, optimizado para SEO y completamente bajo tu control.

En este artículo vas a construir un blog desde cero usando Markdown, rutas dinámicas y buenas prácticas de arquitectura.

⚙️ Arquitectura del sistema

• Frontend + Backend: Next.js (fullstack)
• Contenido: Markdown o HTML
• Routing dinámico: /blog/[slug]
• Renderizado: Static Generation (SSG)

Estructura recomendada:

/blog
  ├── page.tsx
  ├── [slug]/
        └── page.tsx

/lib
  └── posts.ts

/content
  └── mi-primer-post.md

📄 Creando tu primer post en Markdown

---
title: "Mi primer post"
date: "2026-03-30"
description: "Este es mi primer artículo técnico"
---

# Hola mundo

Este es el contenido de mi blog 🚀

🧩 Leer archivos Markdown

npm install gray-matter

import fs from "fs";
import path from "path";
import matter from "gray-matter";

const postsDirectory = path.join(process.cwd(), "content");

export function getAllPosts() {
  const fileNames = fs.readdirSync(postsDirectory);

  return fileNames.map((fileName) => {
    const slug = fileName.replace(".md", "");
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, "utf8");

    const { data, content } = matter(fileContents);

    return {
      slug,
      ...data,
      content,
    };
  });
}

🌐 Mostrar lista de posts

import { getAllPosts } from "@/lib/posts";

export default function BlogPage() {
  const posts = getAllPosts();

  return (
    <div>
      <h1>Blog</h1>
      {posts.map((post) => (
        <div key={post.slug}>
          <a href={`/blog/${post.slug}`}>
            <h2>{post.title}</h2>
          </a>
          <p>{post.description}</p>
        </div>
      ))}
    </div>
  );
}

🔗 Rutas dinámicas por slug

import { getAllPosts } from "@/lib/posts";

export default function PostPage({ params }) {
  const posts = getAllPosts();
  const post = posts.find((p) => p.slug === params.slug);

  if (!post) return <div>Post no encontrado</div>;

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

🚀 Renderizar Markdown correctamente

npm install remark remark-html

import { remark } from "remark";
import html from "remark-html";

export async function markdownToHtml(content) {
  const result = await remark().use(html).process(content);
  return result.toString();
}

<div dangerouslySetInnerHTML={{ __html: contentHtml }} />

⚡ Buenas prácticas

• Usa Static Generation (SSG)
• Genera slugs automáticamente
• Separa lógica (/lib) de UI
• No uses CMS si no lo necesitas
• Optimiza imágenes

🖼️ Imágenes para el post

• Diagrama de arquitectura: Cliente → Next.js → Markdown → Render
• Captura del blog: Lista de posts y vista individual
• Estructura de carpetas: Muy útil para principiantes

🎯 Conclusión

Crear un blog con Next.js no solo es sencillo, sino que te da control total sobre tu contenido, rendimiento y SEO.

🔥 Bonus

• Base de datos (PostgreSQL)
• ORM (Prisma)
• Panel admin
• Sistema de comentarios
• Tags y categorías