🖼️ Creando la página de blog y mostrando publicaciones dinámicas

🖼️ Creando la página de blog y mostrando publicaciones dinámicas

Aprende a listar tus posts de manera dinámica y crear enlaces a páginas individuales para cada publicación.

---

📌 Índice de esta entrada:

1. 📂 Estructura de carpetas para los posts
2. 📝 Creando archivos Markdown de ejemplo
3. 📄 Leyendo y listando posts en la página principal
4. 🔗 Creando enlaces a páginas individuales
5. 🚀 Probando el blog dinámico

---

📂 Estructura de carpetas para los posts

Vamos a crear una carpeta llamada posts dentro de app para guardar nuestras publicaciones:

app/
├─ components/
├─ posts/
├─ page.tsx
├─ layout.tsx
    

Cada archivo dentro de posts/ representará un post, usando formato Markdown o JSON.

📝 Creando archivos Markdown de ejemplo

Por ejemplo, crea posts/primer-post.md con el contenido:

---
title: "Mi primer post"
date: "2025-11-10"
---

¡Hola! Este es mi primer post en Next.js.
    

Puedes crear tantos archivos como quieras para simular un blog completo.

📄 Leyendo y listando posts en la página principal

En app/page.tsx, podemos leer los posts y mostrarlos:

import fs from 'fs';
import path from 'path';
import Link from 'next/link';
import matter from 'gray-matter';

export default function Home() {
  const postsDirectory = path.join(process.cwd(), 'app/posts');
  const filenames = fs.readdirSync(postsDirectory);
  
  const posts = filenames.map((name) => {
    const filePath = path.join(postsDirectory, name);
    const fileContents = fs.readFileSync(filePath, 'utf8');
    const { data } = matter(fileContents);
    return { slug: name.replace('.md', ''), ...data };
  });

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Blog</h1>
      <ul>
        {posts.map(post => (
          <li key={post.slug} className="mb-2">
            <Link href={`/posts/${post.slug}`} className="text-blue-600 hover:underline">
              {post.title} - {post.date}
            </Link>
          </li>
        ))</ul>
    </div>
  );
}
    

Esto generará un listado dinámico de tus posts.

🔗 Creando enlaces a páginas individuales

Crea una carpeta app/posts/[slug]/page.tsx para manejar rutas dinámicas:

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

export default function Post({ params }: { params: { slug: string } }) {
  const postsDirectory = path.join(process.cwd(), 'app/posts');
  const filePath = path.join(postsDirectory, `${params.slug}.md`);
  const fileContents = fs.readFileSync(filePath, 'utf8');
  const { data, content } = matter(fileContents);

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">{data.title}</h1>
      <p className="text-gray-700">{content}</p>
    </div>
  );
}
    

Así cada post tendrá su propia página dinámica según el archivo Markdown.

🚀 Probando el blog dinámico

Ejecuta tu servidor de desarrollo:

npm run dev
    

Abre http://localhost:3000 para ver tu blog con todos los posts listados y enlaces a páginas individuales.

---

💡 Consejo: Si agregas más archivos Markdown, se actualizarán automáticamente en el listado del blog. Así es fácil manejar contenido dinámico sin base de datos.

← Volver al índice