Head
Wir bieten eine integrierte Komponente an, um Elemente zum head der Seite hinzuzufügen:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPageDoppelte Tags vermeiden
Um doppelte Tags im head zu vermeiden, können Sie die key-Eigenschaft verwenden, die sicherstellt, dass das Tag nur einmal gerendert wird, wie im folgenden Beispiel:
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 IndexPageIn diesem Fall wird nur das zweite <meta property="og:title" /> gerendert. meta-Tags mit doppelten key-Attributen werden automatisch behandelt.
Gut zu wissen:
<title>und<base>Tags werden automatisch von Next.js auf Duplikate überprüft, daher ist die Verwendung vonkeyfür diese Tags nicht notwendig.
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 darüber zu treffen, was andere Seiten hinzugefügt haben.
Minimale Verschachtelung verwenden
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.
next/script für Skripte verwenden
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 zu setzen. Dies führt zu einem next-head-count is missing Fehler. next/head kann nur Tags innerhalb des HTML <head>-Tags verarbeiten.