Génération statique avec et sans données

La Génération statique (Static Generation) peut être effectuée avec ou sans données.

Jusqu'à présent, toutes les pages que nous avons créées ne nécessitent pas de récupérer des données externes. Ces pages seront automatiquement générées de manière statique lors de la construction de l'application pour la production.

Cependant, pour certaines pages, il peut être impossible de générer le HTML sans d'abord récupérer des données externes. Vous pourriez avoir besoin d'accéder au système de fichiers, d'interroger une API externe ou une base de données au moment de la construction. Next.js prend en charge ce cas de figure — Génération statique avec données — nativement.

Génération statique avec données en utilisant getStaticProps

Comment cela fonctionne-t-il ? Dans Next.js, lorsque vous exportez un composant de page, vous pouvez également exporter une fonction async appelée getStaticProps. Si vous faites cela, alors :

• getStaticProps s'exécute au moment de la construction en production, et...
• À l'intérieur de la fonction, vous pouvez récupérer des données externes et les transmettre comme props à la page.

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // Récupérer des données externes depuis le système de fichiers, une API, une base de données, etc.
  const data = ...
 
  // La valeur de la clé `props` sera
  //  transmise au composant `Home`
  return {
    props: ...
  }
}

En substance, getStaticProps vous permet de dire à Next.js : "Hé, cette page a des dépendances de données — alors lorsque tu pré-génères cette page au moment de la construction, assure-toi de les résoudre d'abord !"

Remarque : En mode développement, getStaticProps s'exécute à chaque requête au lieu de s'exécuter uniquement au moment de la construction.

Utilisons getStaticProps

Il est plus facile d'apprendre en pratiquant, donc à partir de la prochaine page, nous utiliserons getStaticProps pour implémenter notre blog.