Link-Komponente

Für Verweise zwischen Seiten auf Websites wird normalerweise das HTML-Tag <a> verwendet.

In Next.js können Sie die Link-Komponente next/link nutzen, um zwischen Seiten Ihrer Anwendung zu navigieren. <Link> ermöglicht clientseitige Navigation und akzeptiert Props, die eine bessere Kontrolle über das Navigationsverhalten bieten.

Verwendung von <Link>

Öffnen Sie zunächst pages/index.js und importieren Sie die Link-Komponente aus next/link, indem Sie folgende Zeile am Anfang hinzufügen:

import Link from 'next/link';

Dann suchen Sie das h1-Tag, das wie folgt aussieht:

<h1 className={styles.title}>
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

Und ändern Sie es zu:

<h1 className={styles.title}>
  Lesen Sie <Link href="/posts/first-post">diese Seite!</Link>
</h1>

Öffnen Sie anschließend pages/posts/first-post.js und ersetzen Sie den Inhalt durch folgendes:

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>Erster Beitrag</h1>
      <h2>
        <Link href="/">Zurück zur Startseite</Link>
      </h2>
    </>
  );
}

Wie Sie sehen können, ähnelt die Link-Komponente der Verwendung von <a>-Tags, aber statt <a href="…"> verwenden Sie <Link href="…">.

Hinweis: Vor Next.js 12.2 war es erforderlich, dass die Link-Komponente ein <a>-Tag umschließt, aber dies ist in Version 12.2 und höher nicht mehr nötig.

Überprüfen wir, ob es funktioniert. Sie sollten jetzt auf jeder Seite einen Link haben, der Ihnen ermöglicht, zwischen den Seiten hin- und herzunavigieren: