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
agetPostData
porque necesitamos usarawait
conremark
.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.