Routeur Pages - Rendu de Markdown

Pour afficher du contenu Markdown, nous allons utiliser la bibliothèque remark. Commençons par l'installer :

npm install remark remark-html

Ensuite, ouvrez lib/posts.js et ajoutez les imports suivants en haut du fichier :

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

Et mettez à jour la fonction getPostData() dans le même fichier pour utiliser remark :

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Utilise gray-matter pour analyser la section de métadonnées du post
  const matterResult = matter(fileContents);
 
  // Utilise remark pour convertir le Markdown en chaîne HTML
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
 
  // Combine les données avec l'id et contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

Important : Nous avons ajouté le mot-clé async à getPostData car nous devons utiliser await pour remark. async/await vous permet de récupérer des données de manière asynchrone.

Cela signifie que nous devons mettre à jour getStaticProps dans pages/posts/[id].js pour utiliser await lors de l'appel à getPostData :

export async function getStaticProps({ params }) {
  // Ajoutez le mot-clé "await" comme ceci :
  const postData = await getPostData(params.id);
 
  return {
    props: {
      postData,
    },
  };
}

Enfin, mettez à jour le composant Post dans pages/posts/[id].js pour afficher contentHtml en utilisant dangerouslySetInnerHTML :

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

Essayez de visiter à nouveau ces pages :

Vous devriez maintenant voir le contenu du blog :

Comment générer statiquement des pages avec des routes dynamiques

Nous avons presque terminé ! Passons maintenant au polissage de chaque page.