Routeur de pages - Métadonnées

Et si nous voulions modifier les métadonnées de la page, comme la balise HTML <title> ?

<title> fait partie de la balise HTML <head>. Voyons donc comment modifier la balise <head> dans une page Next.js.

Ouvrez pages/index.js dans votre éditeur et trouvez les lignes suivantes :

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

Notez que <Head> est utilisé au lieu de <head> en minuscules. <Head> est un composant React intégré à Next.js. Il vous permet de modifier le <head> d'une page.

Vous pouvez importer le composant Head depuis le module next/head.

Ajouter `Head` à `first-post.js`

Nous n'avons pas ajouté de <title> à notre route /posts/first-post. Ajoutons-en un.

Ouvrez le fichier pages/posts/first-post.js et ajoutez une importation pour Head depuis next/head au début du fichier :

import Head from 'next/head';

Ensuite, mettez à jour le composant FirstPost exporté pour inclure le composant Head. Pour l'instant, nous n'ajouterons que la balise title :

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

Essayez d'accéder à http://localhost:3000/posts/first-post. L'onglet du navigateur devrait maintenant afficher "First Post". En utilisant les outils de développement de votre navigateur, vous devriez voir que la balise title a été ajoutée à <head>.

Pour en savoir plus sur le composant Head, consultez la référence API de next/head.

Si vous souhaitez personnaliser la balise <html>, par exemple pour ajouter l'attribut lang, vous pouvez le faire en créant un fichier pages/_document.js. Apprenez-en plus dans la documentation sur le Document personnalisé.

Métadonnées

Ajouter Head à first-post.js

On this page

Ajouter `Head` à `first-post.js`