Amélioration de la page d'article
Ajout du title à la page d'article
Dans pages/posts/[id].js, ajoutons la balise title en utilisant les données de l'article. Vous devrez ajouter une importation pour next/head en haut du fichier et ajouter la balise title en mettant à jour le composant Post :
// Ajoutez cette importation
import Head from 'next/head';
export default function Post({ postData }) {
return (
<Layout>
{/* Ajoutez cette balise <Head> */}
<Head>
<title>{postData.title}</title>
</Head>
{/* Conservez le code existant ici */}
</Layout>
);
}Formatage de la date
Pour formater la date, nous utiliserons la bibliothèque date-fns. Tout d'abord, installez-la :
npm install date-fnsEnsuite, créez un fichier appelé components/date.js et ajoutez le composant Date suivant :
import { parseISO, format } from 'date-fns';
export default function Date({ dateString }) {
const date = parseISO(dateString);
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
}Remarque : Vous pouvez consulter les différentes options de chaîne
format()sur le site date-fns.
Maintenant, ouvrez pages/posts/[id].js, ajoutez une importation pour le composant Date en haut du fichier, et utilisez-le à la place de {postData.date} :
// Ajoutez cette importation
import Date from '../../components/date';
export default function Post({ postData }) {
return (
<Layout>
{/* Conservez le code existant ici */}
{/* Remplacez {postData.date} par ceci */}
<Date dateString={postData.date} />
{/* Conservez le code existant ici */}
</Layout>
);
}Si vous accédez à http://localhost:3000/posts/pre-rendering, vous devriez maintenant voir la date écrite sous la forme "1 janvier 2020".
Ajout de CSS
Enfin, ajoutons un peu de CSS en utilisant le fichier styles/utils.module.css que nous avons ajouté précédemment. Ouvrez pages/posts/[id].js, puis ajoutez une importation pour le fichier CSS et remplacez le composant Post par le code suivant :
// Ajoutez cette importation en haut du fichier
import utilStyles from '../../styles/utils.module.css';
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>
);
}Si vous accédez à http://localhost:3000/posts/pre-rendering, la page devrait maintenant paraître un peu mieux :
Excellent travail ! Nous allons maintenant améliorer la page d'index et nous aurons terminé !