Head

Nous mettons à disposition 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>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

Éviter les balises en double

Pour éviter les balises en double dans votre head, vous pouvez utiliser la propriété key, qui garantit que la balise n'est rendue qu'une seule fois, comme dans l'exemple suivant :

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

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

Bon à savoir : Les balises <title> et <base> sont automatiquement vérifiées pour les doublons par Next.js, donc l'utilisation de key n'est pas nécessaire pour ces balises.

Le contenu de 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 head, sans faire d'hypothèses sur ce que d'autres pages ont ajouté.

Utiliser un imbrication minimale

Les éléments title, meta ou tout autre élément (par exemple script) doivent être contenus comme 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 récupérées lors des navigations côté client.

Utiliser `next/script` pour les scripts

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

Pas de balises `html` ou `body`

Vous ne pouvez pas utiliser <Head> pour définir des attributs sur les balises <html> ou <body>. Cela entraînera une erreur next-head-count is missing. next/head ne peut gérer que les balises à l'intérieur de la balise HTML <head>.

Éviter les balises en double

Utiliser un imbrication minimale

Utiliser next/script pour les scripts

Pas de balises html ou body

On this page

Utiliser `next/script` pour les scripts

Pas de balises `html` ou `body`