Static generation with data

Nel server di produzione questa funzione viene eseguita una sola volta quando si costruisce il sito (build): NextJS prepara le pagine di HTML vero e proprio che i browser riceveranno. Il caricamento delle pagine così sarà più veloce.

#toDo

Apri la pagina index e importa la funzione creata al passaggio precedente:

import { getSortedPostsData } from '../lib/posts';

Esporta la funzione getStaticProps che informa NextJS del fatto che vuoi procedere a una generazione statica della pagina, dopo aver importato i dati dei post:

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

La funzione restituisce un oggetto contenente i metadati di tutti i post (allPostsData), che saranno passati quindi sotto forma di props al componente Home della pagina con questa piccola modifica:

Per visualizzare l'elenco dei post creiamo una nuova sezione nel componente Home, sempre all'interno del Layout, in modo che l'elenco venga visualizzato al di sotto della parte introduttiva:

Il risultato dovrebbe essere: