Verlinkung und Navigation

In Next.js gibt es zwei Möglichkeiten, zwischen Routen zu navigieren:

Verwendung der <Link>-Komponente
Verwendung des useRouter-Hooks

Diese Seite erklärt die Verwendung von <Link>, useRouter() und geht tiefer darauf ein, wie Navigation funktioniert.

`<Link>`-Komponente

<Link> ist eine eingebaute Komponente, die das HTML-<a>-Tag erweitert, um Prefetching und clientseitige Navigation zwischen Routen zu ermöglichen. Es ist die primäre Methode, um zwischen Routen in Next.js zu navigieren.

Sie können sie verwenden, indem Sie sie aus next/link importieren und eine href-Prop an die Komponente übergeben:

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Es gibt weitere optionale Props, die Sie an <Link> übergeben können. Weitere Informationen finden Sie in der API-Referenz.

Beispiele

Verlinkung zu dynamischen Segmenten

Beim Verlinken zu dynamischen Segmenten können Sie Template-Literale und Interpolation verwenden, um eine Liste von Links zu generieren. Zum Beispiel, um eine Liste von Blog-Beiträgen zu generieren:

app/blog/PostList.js

import Link from 'next/link'

export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Überprüfung aktiver Links

Sie können usePathname() verwenden, um festzustellen, ob ein Link aktiv ist. Um beispielsweise eine Klasse zum aktiven Link hinzuzufügen, können Sie überprüfen, ob der aktuelle pathname mit dem href des Links übereinstimmt:

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export function Links() {
  const pathname = usePathname()

  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            Startseite
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            Über uns
          </Link>
        </li>
      </ul>
    </nav>
  )
}

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export function Links() {
  const pathname = usePathname()

  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            Startseite
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            Über uns
          </Link>
        </li>
      </ul>
    </nav>
  )
}

Scrollen zu einer `id`

Das Standardverhalten des Next.js App Routers ist es, beim Navigieren zu einer neuen Route nach oben zu scrollen oder die Scroll-Position bei Vor- und Zurück-Navigation beizubehalten.

Wenn Sie zu einer bestimmten id navigieren möchten, können Sie Ihre URL mit einem #-Hash-Link versehen oder einfach einen Hash-Link an die href-Prop übergeben. Dies ist möglich, da <Link> zu einem <a>-Element gerendert wird.

<Link href="/dashboard#settings">Einstellungen</Link>

// Ausgabe
<a href="/dashboard#settings">Einstellungen</a>

Deaktivierung der Scroll-Wiederherstellung

Das Standardverhalten des Next.js App Routers ist es, beim Navigieren zu einer neuen Route nach oben zu scrollen oder die Scroll-Position bei Vor- und Zurück-Navigation beizubehalten. Wenn Sie dieses Verhalten deaktivieren möchten, können Sie scroll={false} an die <Link>-Komponente oder scroll: false an router.push() oder router.replace() übergeben.

// next/link
<Link href="/dashboard" scroll={false}>
  Dashboard
</Link>

// useRouter
import { useRouter } from 'next/navigation'

const router = useRouter()

router.push('/dashboard', { scroll: false })

`useRouter()`-Hook

Der useRouter-Hook ermöglicht es Ihnen, Routen programmatisch zu ändern.

Dieser Hook kann nur innerhalb von Client-Komponenten verwendet werden und wird aus next/navigation importiert.

app/page.js

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

Eine vollständige Liste der useRouter-Methoden finden Sie in der API-Referenz.

Empfehlung: Verwenden Sie die <Link>-Komponente für die Navigation zwischen Routen, es sei denn, Sie haben einen spezifischen Grund für die Verwendung von useRouter.

Der App Router verwendet einen hybriden Ansatz für Routing und Navigation. Auf dem Server wird Ihr Anwendungscode automatisch nach Routensegmenten aufgeteilt. Auf dem Client prefetcht und cached Next.js die Routensegmente. Das bedeutet, dass beim Navigieren zu einer neuen Route die Seite nicht neu geladen wird und nur die sich ändernden Routensegmente neu gerendert werden – was die Navigationserfahrung und Leistung verbessert.

1. Prefetching

Prefetching ist eine Methode, um eine Route im Hintergrund zu laden, bevor der Benutzer sie besucht.

Es gibt zwei Möglichkeiten, wie Routen in Next.js geprefetched werden:

<Link>-Komponente: Routen werden automatisch geprefetched, sobald sie im Viewport des Benutzers sichtbar werden. Prefetching erfolgt beim ersten Laden der Seite oder beim Scrollen in den Viewport.
router.prefetch(): Der useRouter-Hook kann verwendet werden, um Routen programmatisch zu prefetchen.

Das Prefetching-Verhalten von <Link> unterscheidet sich für statische und dynamische Routen:

Statische Routen: prefetch ist standardmäßig auf true gesetzt. Die gesamte Route wird geprefetched und gecached.
Dynamische Routen: prefetch ist standardmäßig automatisch. Nur das gemeinsame Layout bis zur ersten loading.js-Datei wird geprefetched und für 30s gecached. Dies reduziert die Kosten für das Abrufen einer gesamten dynamischen Route und ermöglicht es Ihnen, einen sofortigen Ladezustand für besseres visuelles Feedback anzuzeigen.

Sie können Prefetching deaktivieren, indem Sie die prefetch-Prop auf false setzen.

Weitere Informationen finden Sie in der <Link>-API-Referenz.

Wissenswert:

Prefetching ist nur in der Produktion aktiviert, nicht in der Entwicklung.

2. Caching

Next.js hat einen clientseitigen In-Memory-Cache namens Router Cache. Wenn Benutzer durch die App navigieren, werden die React Server Component Payloads von geprefetchten Routensegmenten und besuchten Routen im Cache gespeichert.

Das bedeutet, dass bei der Navigation der Cache so weit wie möglich wiederverwendet wird, anstatt eine neue Anfrage an den Server zu stellen – was die Leistung durch Reduzierung der Anzahl der Anfragen und der übertragenen Daten verbessert.

Erfahren Sie mehr über die Funktionsweise des Router Caches und wie Sie ihn konfigurieren können.

3. Partielles Rendering

Partielles Rendering bedeutet, dass nur die Routensegmente, die sich bei der Navigation ändern, auf dem Client neu gerendert werden, während gemeinsame Segmente erhalten bleiben.

Beispielsweise werden beim Navigieren zwischen zwei gleichgeordneten Routen, /dashboard/settings und /dashboard/analytics, die settings- und analytics-Seiten gerendert, während das gemeinsame dashboard-Layout erhalten bleibt.

Ohne partielles Rendering würde jede Navigation ein vollständiges Neu-Rendering der Seite auf dem Server verursachen. Das Rendern nur des sich ändernden Segments reduziert die Menge der übertragenen Daten und die Ausführungszeit, was zu einer verbesserten Leistung führt.

Standardmäßig führt der Browser eine Hard Navigation zwischen Seiten durch. Das bedeutet, der Browser lädt die Seite neu und setzt den React-Status wie useState-Hooks in Ihrer App und den Browser-Status wie die Scroll-Position oder das fokussierte Element des Benutzers zurück. In Next.js verwendet der App Router jedoch Soft Navigation. Das bedeutet, React rendert nur die Segmente, die sich geändert haben, während React- und Browser-Status erhalten bleiben und es keinen vollständigen Seitenneuladung gibt.

Standardmäßig behält Next.js die Scroll-Position für Vor- und Zurück-Navigation bei und verwendet Routensegmente im Router Cache wieder.