Implémenter getStaticProps

Nous devons récupérer les données nécessaires pour afficher le post avec l'id donné.

Pour ce faire, ouvrez à nouveau lib/posts.js et ajoutez la fonction getPostData suivante à la fin. Elle retournera les données du post en fonction de l'id :

export 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);
 
  // Combine les données avec l'id
  return {
    id,
    ...matterResult.data,
  };
}

Ensuite, ouvrez pages/posts/[id].js et remplacez cette ligne :

import { getAllPostIds } from '../../lib/posts';

par le code suivant :

import { getAllPostIds, getPostData } from '../../lib/posts';
 
export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

La page de post utilise maintenant la fonction getPostData dans getStaticProps pour obtenir les données du post et les retourner comme props.

Maintenant, mettons à jour le composant Post pour utiliser postData. Dans pages/posts/[id].js, remplacez le composant Post exporté par le code suivant :

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}

C'est fait ! Essayez de visiter ces pages :

• http://localhost:3000/posts/ssg-ssr
• http://localhost:3000/posts/pre-rendering

Vous devriez voir les données du blog pour chaque page :

Super ! Nous avons généré avec succès des routes dynamiques.

Un problème ?

Si vous rencontrez une erreur, vérifiez que vos fichiers contiennent le bon code :

• pages/posts/[id].js devrait ressembler à ceci.
• lib/posts.js devrait ressembler à ceci.
• (Si ça ne fonctionne toujours pas) Le reste du code devrait ressembler à ceci.

Si vous êtes toujours bloqué, n'hésitez pas à demander à la communauté sur GitHub Discussions. Ce serait utile si vous pouviez pousser votre code sur GitHub et fournir un lien pour que d'autres puissent le consulter.

Résumé

Voici à nouveau un résumé graphique de ce que nous avons fait :

Nous n'avons pas encore affiché le contenu markdown du blog. Faisons cela ensuite.