Rifinire la pagina del post

Nel file [id].js importa il componente Head e modifica Post come suggerito dai commenti:

Per formattare le date installiamo questa libreria:

npm install date-fns

Crea un componente Date inserendolo in un nuovo file da denominare in modo opportuno, e da inserire nella cartella opportuna:

import { parseISO, format } from 'date-fns';

export default function Date({ dateString }) {
  const date = parseISO(dateString);
  return <time dateTime={dateString}>{format(date, 'd MMMM yyyy')}</time>;
}

Importa il componente appena creato dentro a [id].js e usalo per formattare la data del post:

<Date dateString={postData.date} />

#todo
Provate a scoprire come cambiare il formato della data in modo che mostri anche il giorno della settimana, ad es. monday.

Aggiungiamo infine gli stili che abbiamo preparato nel modulo utils, modificando così il componente Post:

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  );
}

Ecco come dovrebbe apparire la pagina di un post: