Chemin de page dépendant de données externes

Dans la leçon précédente, nous avons abordé le cas où le contenu de la page dépend de données externes. Nous avons utilisé getStaticProps pour récupérer les données nécessaires afin de rendre la page d'index.

Dans cette leçon, nous allons parler du cas où chaque chemin de page dépend de données externes. Next.js vous permet de générer statiquement des pages dont les chemins dépendent de données externes. Cela permet d'avoir des URL dynamiques dans Next.js.

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

Dans notre cas, nous voulons créer des routes dynamiques pour les articles de blog :

• Nous voulons que chaque article ait le chemin /posts/<id>, où <id> est le nom du fichier markdown dans le répertoire posts de premier niveau.
• Comme nous avons ssg-ssr.md et pre-rendering.md, nous souhaitons que les chemins soient /posts/ssg-ssr et /posts/pre-rendering.

Aperçu des étapes

Nous pouvons y parvenir en suivant les étapes ci-dessous. Vous n'avez pas encore besoin d'apporter ces modifications — nous le ferons ensemble à la page suivante.

Premièrement, nous allons créer une page appelée [id].js dans pages/posts. Les pages qui commencent par [ et se terminent par ] sont des routes dynamiques dans Next.js.

Dans pages/posts/[id].js, nous allons écrire le code qui affichera une page d'article — comme les autres pages que nous avons créées.

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

Maintenant, voici ce qui est nouveau : nous allons exporter une fonction asynchrone appelée getStaticPaths depuis cette page. Dans cette fonction, nous devons retourner une liste de valeurs possibles pour id.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Retourne une liste de valeurs possibles pour id
}

Enfin, nous devons à nouveau implémenter getStaticProps — cette fois, pour récupérer les données nécessaires pour l'article de blog avec un id donné. getStaticProps reçoit params, qui contient id (car le nom du fichier est [id].js).

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Retourne une liste de valeurs possibles pour id
}
 
export async function getStaticProps({ params }) {
  // Récupère les données nécessaires pour l'article de blog en utilisant params.id
}

Voici un résumé graphique de ce dont nous venons de parler :

Essayons cela à la page suivante !