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 IndexPageDans 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 dekeyn'est pas nécessaire pour ces balises.
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 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>.