<Head>
Beispiele
Wir bieten eine integrierte Komponente zum Hinzufügen von Elementen zum head der Seite an:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>Mein Seitentitel</title>
</Head>
<p>Hallo Welt!</p>
</div>
)
}
export default IndexPageVermeiden Sie doppelte Tags
Um doppelte Tags in Ihrem head zu vermeiden, können Sie die key-Eigenschaft verwenden. Dadurch wird sichergestellt, dass das Tag nur einmal gerendert wird, wie im folgenden Beispiel:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>Mein Seitentitel</title>
<meta property="og:title" content="Mein Seitentitel" key="title" />
</Head>
<Head>
<meta property="og:title" content="Mein neuer Titel" key="title" />
</Head>
<p>Hallo Welt!</p>
</div>
)
}
export default IndexPageIn diesem Fall wird nur das zweite <meta property="og:title" /> gerendert. meta-Tags mit doppelten key-Attributen werden automatisch behandelt.
Der Inhalt von
headwird beim Demontieren der Komponente gelöscht. Stellen Sie daher sicher, dass jede Seite vollständig definiert, was sie inheadbenötigt, ohne Annahmen über die von anderen Seiten hinzugefügten Elemente zu treffen.
Verwenden Sie minimale Verschachtelung
title, meta oder andere Elemente (z.B. script) müssen als direkte Kinder des Head-Elements enthalten sein oder in maximal einer Ebene von <React.Fragment> oder Arrays eingeschlossen werden. Andernfalls werden die Tags bei clientseitigen Navigationen nicht korrekt erkannt.
Verwenden Sie next/script für Skripte
Wir empfehlen die Verwendung von next/script in Ihrer Komponente anstelle der manuellen Erstellung eines <script>-Tags in next/head.
Keine html- oder body-Tags
Sie können <Head> nicht verwenden, um Attribute für <html>- oder <body>-Tags festzulegen. Dies führt zu einem next-head-count is missing-Fehler. next/head kann nur Tags innerhalb des HTML-<head>-Tags verarbeiten.