logoNext.js
DokumentationBlogLernen
Einführung/API-Referenz/Komponenten/Head

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 IndexPage

Doppelte 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 IndexPage

In 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 von key für diese Tags nicht notwendig.

Der Inhalt von head wird beim Demontieren der Komponente gelöscht. Stellen Sie daher sicher, dass jede Seite vollständig definiert, was sie in head benö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.

Formular

Erfahren Sie, wie Sie die `<Form>`-Komponente verwenden können, um Formularübermittlungen und Aktualisierungen von Suchparametern mit clientseitiger Navigation zu handhaben.

Image

Optimieren Sie Bilder in Ihrer Next.js-Anwendung mit der integrierten `next/image`-Komponente.

On this page