Implémentation de getStaticPaths

Commençons par configurer les fichiers :

• Créez un fichier appelé [id].js dans le répertoire pages/posts.
• Supprimez également first-post.js dans le répertoire pages/posts — nous ne l'utiliserons plus.

Ensuite, ouvrez pages/posts/[id].js dans votre éditeur et collez le code suivant. Nous remplirons les ... plus tard :

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

Puis, ouvrez lib/posts.js et ajoutez la fonction getAllPostIds suivante à la fin. Elle retournera la liste des noms de fichiers (en excluant .md) dans le répertoire posts :

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);
 
  // Retourne un tableau qui ressemble à ceci :
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

Important : La liste retournée n'est pas simplement un tableau de chaînes de caractères — elle doit être un tableau d'objets qui ressemblent au commentaire ci-dessus. Chaque objet doit avoir la clé params et contenir un objet avec la clé id (car nous utilisons [id] dans le nom du fichier). Sinon, getStaticPaths échouera.

Enfin, nous allons importer la fonction getAllPostIds et l'utiliser dans getStaticPaths. Ouvrez pages/posts/[id].js et copiez le code suivant au-dessus du composant exporté Post :

import { getAllPostIds } from '../../lib/posts';
 
export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

• paths contient le tableau des chemins connus retournés par getAllPostIds(), qui incluent les params définis par pages/posts/[id].js. Pour en savoir plus, consultez la documentation sur la clé paths
• Ignorez fallback: false pour l'instant — nous l'expliquerons plus tard.

Nous y sommes presque — mais il nous reste encore à implémenter getStaticProps. Faisons cela dans la page suivante !