Mi primer blog sobre Next.js

Este post describe cómo construir un CMS básico usando Next.js y Markdown. Aquí te guiamos paso a paso para configurar, personalizar y optimizar tu CMS. Este enfoque es ideal para proyectos pequeños, blogs personales o para aprender los fundamentos de Next.js.

Pasos esenciales para construir tu CMS

1. Crea un proyecto Next.js: Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto:

   npx create-next-app cms-nextjs
           

   Cambia al directorio del proyecto y ejecuta:

   cd cms-nextjs && npm run dev
           

   Esto iniciará tu aplicación en http://localhost:3000.
2. Configura soporte para Markdown: Instala las librerías necesarias para trabajar con Markdown y datos frontmatter:

   npm install gray-matter remark remark-html
           

   - gray-matter: Ayuda a analizar datos frontmatter. - remark: Convierte contenido Markdown a HTML. Configura un archivo utilitario para procesar Markdown en lib/markdown.js:

   const fs = require('fs');
   const path = require('path');
   const matter = require('gray-matter');
   const remark = require('remark');
   const html = require('remark-html');
   
   export async function parseMarkdown(filePath) {
     const fileContents = fs.readFileSync(filePath, 'utf8');
     const { data, content } = matter(fileContents);
     const processedContent = await remark().use(html).process(content);
     return { data, content: processedContent.toString() };
   }
           

3. Organiza tus posts: Crea una carpeta /posts en la raíz de tu proyecto. Dentro, añade archivos Markdown. Por ejemplo:

   posts/
   ├── primer-post.md
   ├── segundo-post.md
           

   Cada archivo Markdown debería contener un encabezado frontmatter para estructurar los metadatos:

   ---
   title: "Primer Post"
   date: "2024-01-01"
   tags: ["tutorial", "nextjs"]
   ---
   ¡Este es tu primer post en Markdown!
           

Con estos pasos tendrás un CMS funcional, listo para personalizar según tus necesidades. ¡Explora más opciones y lleva tu CMS al siguiente nivel!