<Head> | Next.js Français

Exemples

Nous fournissons un composant intégré pour ajouter des éléments dans le head de la page :

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Mon titre de page</title>
      </Head>
      <p>Bonjour le monde !</p>
    </div>
  )
}

export default IndexPage

Pour éviter les doublons de balises dans votre head, vous pouvez utiliser la propriété key, qui garantit que la balise ne sera rendue qu'une seule fois, comme dans l'exemple suivant :

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Mon titre de page</title>
        <meta property="og:title" content="Mon titre de page" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="Mon nouveau titre" key="title" />
      </Head>
      <p>Bonjour le monde !</p>
    </div>
  )
}

export default IndexPage

Dans ce cas, seule la deuxième balise <meta property="og:title" /> est rendue. Les balises meta avec des attributs key en doublon sont gérées automatiquement.

Le contenu du head est vidé lors du démontage du composant, assurez-vous donc que chaque page définit complètement ce dont elle a besoin dans le head, sans faire d'hypothèses sur ce que d'autres pages ont ajouté.

Les éléments title, meta ou tout autre élément (par exemple script) doivent être des enfants directs de l'élément Head, ou encapsulés dans un maximum d'un niveau de <React.Fragment> ou de tableaux — sinon les balises ne seront pas correctement prises en compte lors des navigations côté client.

Nous recommandons d'utiliser next/script dans votre composant plutôt que de créer manuellement une balise <script> dans next/head.