Pages Router: Metadaten | Next.js

Was wäre, wenn wir die Metadaten einer Seite anpassen möchten, wie zum Beispiel das <title>-HTML-Tag?

<title> ist Teil des <head>-HTML-Tags. Schauen wir uns an, wie wir das <head>-Tag in einer Next.js-Seite modifizieren können.

Öffnen Sie pages/index.js in Ihrem Editor und suchen Sie nach folgenden Zeilen:

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

Beachten Sie, dass <Head> anstelle des kleingeschriebenen <head> verwendet wird. <Head> ist eine in Next.js integrierte React-Komponente. Sie ermöglicht die Modifikation des <head> einer Seite.

Sie können die Head-Komponente aus dem next/head-Modul importieren.

Hinzufügen von `Head` zu `first-post.js`

Wir haben unserer /posts/first-post-Route noch keinen <title> hinzugefügt. Lassen Sie das uns nachholen.

Öffnen Sie die Datei pages/posts/first-post.js und fügen Sie am Anfang der Datei einen Import für Head aus next/head hinzu:

import Head from 'next/head';

Aktualisieren Sie dann die exportierte FirstPost-Komponente, um die Head-Komponente einzubinden. Vorerst fügen wir nur das title-Tag hinzu:

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Zurück zur Startseite</Link>
      </h2>
    </>
  );
}

Rufen Sie nun http://localhost:3000/posts/first-post auf. Der Browser-Tab sollte jetzt "First Post" anzeigen. Mit den Entwickler-Tools Ihres Browsers können Sie überprüfen, dass das title-Tag zum <head> hinzugefügt wurde.

Um mehr über die Head-Komponente zu erfahren, lesen Sie die API-Referenz für next/head.

Falls Sie das <html>-Tag anpassen möchten, zum Beispiel um das lang-Attribut hinzuzufügen, können Sie dies durch Erstellen einer pages/_document.js-Datei tun. Mehr dazu finden Sie in der Dokumentation zum benutzerdefinierten Document.

Metadaten

Hinzufügen von Head zu first-post.js

On this page

Hinzufügen von `Head` zu `first-post.js`