Enrutador de Páginas: Renderizar Markdown

Para renderizar contenido en formato markdown, utilizaremos la biblioteca remark. Primero, instalémosla:

npm install remark remark-html

Luego, abre el archivo lib/posts.js y añade las siguientes importaciones al inicio del archivo:

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

Y actualiza la función getPostData() en el mismo archivo para usar remark:

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Usa gray-matter para analizar la sección de metadatos del post
  const matterResult = matter(fileContents);
 
  // Usa remark para convertir markdown a cadena HTML
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
 
  // Combina los datos con el id y contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

Importante: Añadimos la palabra clave async a getPostData porque necesitamos usar await con remark. async/await permite obtener datos de forma asíncrona.

Esto significa que debemos actualizar getStaticProps en pages/posts/[id].js para usar await al llamar a getPostData:

export async function getStaticProps({ params }) {
  // Añade la palabra clave "await" así:
  const postData = await getPostData(params.id);
 
  return {
    props: {
      postData,
    },
  };
}

Finalmente, actualiza el componente Post en pages/posts/[id].js para renderizar contentHtml usando dangerouslySetInnerHTML:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

Intenta visitar estas páginas nuevamente:

Ahora deberías ver el contenido del blog:

¡Ya casi terminamos! A continuación, vamos a pulir cada página.