Composant <Head>
Exemples
Nous fournissons un composant intégré pour ajouter des éléments à la balise 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Éviter les balises dupliquées
Pour éviter les balises dupliquées 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>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 IndexPageDans ce cas, seule la deuxième balise <meta property="og:title" /> est rendue. Les balises meta avec des attributs key dupliqués sont gérées automatiquement.
Le contenu de
headest vidé lors du démontage du composant, assurez-vous donc que chaque page définit complètement ce dont elle a besoin danshead, sans faire d'hypothèses sur ce que les autres pages ont ajouté.
Utiliser un imbrication minimale
Les éléments title, meta ou tout autre élément (par exemple script) doivent être des enfants directs du composant Head,
ou encapsulés dans un seul 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 une balise <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>.