Routeur de pages - Détails sur les routes dynamiques

Voici quelques informations essentielles que vous devriez connaître sur les routes dynamiques.

Récupération depuis une API externe ou une base de données

Comme getStaticProps, getStaticPaths peut récupérer des données depuis n'importe quelle source. Dans notre exemple, getAllPostIds (utilisé par getStaticPaths) peut récupérer des données depuis un point de terminaison d'API externe :

export async function getAllPostIds() {
  // Au lieu du système de fichiers,
  // récupère les données des posts depuis un point de terminaison d'API externe
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

Développement vs. Production

En développement (npm run dev ou yarn dev), getStaticPaths s'exécute à chaque requête.
En production, getStaticPaths s'exécute au moment de la construction.

Fallback

Rappelez-vous que nous avons retourné fallback: false depuis getStaticPaths. Qu'est-ce que cela signifie ?

Si fallback est false, alors tout chemin non retourné par getStaticPaths résultera en une page 404.

Si fallback est true, alors le comportement de getStaticProps change :

Les chemins retournés par getStaticPaths seront rendus en HTML au moment de la construction.
Les chemins qui n'ont pas été générés au moment de la construction ne résulteront pas en une page 404. À la place, Next.js servira une version "fallback" de la page lors de la première requête vers ce chemin.
En arrière-plan, Next.js générera statiquement le chemin demandé. Les requêtes suivantes vers le même chemin serviront la page générée, comme les autres pages pré-rendues au moment de la construction.

Si fallback est blocking, alors les nouveaux chemins seront rendus côté serveur avec getStaticProps, et mis en cache pour les requêtes futures afin que cela ne se produise qu'une seule fois par chemin.

Cela dépasse le cadre de nos leçons, mais vous pouvez en apprendre plus sur fallback: true et fallback: 'blocking' dans la documentation sur fallback.

Routes attrape-tout (Catch-all Routes)

Les routes dynamiques peuvent être étendues pour attraper tous les chemins en ajoutant trois points (...) à l'intérieur des crochets. Par exemple :

pages/posts/[...id].js correspond à /posts/a, mais aussi à /posts/a/b, /posts/a/b/c, etc.

Si vous faites cela, dans getStaticPaths, vous devez retourner un tableau comme valeur de la clé id comme ceci :

return [
  {
    params: {
      // Génère statiquement /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

Et params.id sera un tableau dans getStaticProps :

export async function getStaticProps({ params }) {
  // params.id sera comme ['a', 'b', 'c']
}

Consultez la documentation sur les routes attrape-tout pour en savoir plus.

Routeur (Router)

Si vous souhaitez accéder au routeur Next.js, vous pouvez le faire en important le hook useRouter depuis next/router.

Pages 404

Pour créer une page 404 personnalisée, créez pages/404.js. Ce fichier est généré statiquement au moment de la construction.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page non trouvée</h1>;
}

Consultez notre documentation sur les pages d'erreur pour en savoir plus.

Plus d'exemples

Nous avons créé plusieurs exemples pour illustrer getStaticProps et getStaticPaths — consultez leur code source pour en savoir plus :

C'est tout !

Dans la prochaine leçon, nous parlerons des routes API dans Next.js.

Détails sur les routes dynamiques

On this page