Implementare getStaticProps

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Combine the data with the id
  return {
    id,
    ...matterResult.data,
  };
}

Essa, dato l'id di un post, ne apre il file e usa gray-matter per estrarre i metadati.
Apri pages/posts/[id].js e sostituisci questa riga:

...con queste:

Nota che abbiamo modificato l'import per importare entrambe le funzioni dal file lib/posts.

Abbiamo poi implementato il famoso metodo getStaticProps che sarà usato al momento del pre-rendering e fornirà al componente Post le props con i dati del singolo post.
Facciamo ora in modo che Post usi i dati ricevuti, riscrivendolo in questo modo:

Prova ora a visitare le pagine dei nostri due post:
http://localhost:3000/posts/ssg-ssr
http://localhost:3000/posts/pre-rendering

...in apparenza niente di eccezionale, ma prova a pensare come sono state costruite: tu hai scritto l'articolo in formato md inserendo solo titolo, data e testo... tutto il resto lo ha fatto NextJS, e la cosa bella è che adesso che è tutto pronto lo farà anche per gli altri 100 articoli che inserirai in quella cartella.
L'altra cosa bella è che se un giorno vorrai cambiare il layout del sito, non avrai bisogno di modificare le pagine di tutti gli articoli, perché si aggiorneranno da sole!

Ecco in sintesi quello che abbiamo fatto: