Implémentation de getStaticProps

Pré-rendu dans Next.js

Next.js propose deux formes de pré-rendu : la Génération Statique et le Rendu côté Serveur (Server-side Rendering). La différence réside dans le moment où le HTML de la page est généré.

• La Génération Statique est la méthode de pré-rendu qui génère le HTML au moment de la construction (build time). Le HTML pré-rendu est ensuite réutilisé à chaque requête.
• Le Rendu côté Serveur (Server-side Rendering) est la méthode de pré-rendu qui génère le HTML à chaque requête.

Il est important de noter que Next.js vous permet de choisir quelle forme de pré-rendu utiliser pour chaque page. Vous pouvez créer une application Next.js "hybride" en utilisant la Génération Statique pour la plupart des pages et le Rendu côté Serveur pour d'autres.

Utilisation de la Génération Statique (getStaticProps())

Maintenant, nous devons ajouter une importation pour getSortedPostsData et l'appeler dans getStaticProps dans pages/index.js.

Ouvrez pages/index.js dans votre éditeur et ajoutez le code suivant au-dessus du composant Home exporté :

import { getSortedPostsData } from '../lib/posts';
 
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

En retournant allPostsData dans l'objet props de getStaticProps, les articles de blog seront passés au composant Home en tant que prop. Vous pouvez maintenant accéder aux articles de blog comme ceci :

export default function Home ({ allPostsData }) { ... }

Pour afficher les articles de blog, mettons à jour le composant Home pour ajouter une autre balise <section> avec les données en dessous de la section contenant votre présentation. N'oubliez pas de changer également les props de () à ({ allPostsData }) :

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Conservez le code existant ici */}
 
      {/* Ajoutez cette balise <section> sous la balise <section> existante */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

Vous devriez maintenant voir les données du blog si vous accédez à http://localhost:3000.

Félicitations ! Nous avons réussi à récupérer des données externes (depuis le système de fichiers) et à pré-rendre la page d'accueil avec ces données.

Parlons maintenant de quelques conseils pour utiliser getStaticProps sur la page suivante.