Verlinkung und Navigation

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

Verwendung der <Link>-Komponente
Verwendung des useRouter-Hooks (Client Components)
Verwendung der redirect-Funktion (Server Components)
Verwendung der nativen History API

Diese Seite erklärt die Verwendung dieser Optionen und geht tiefer auf die Funktionsweise der Navigation ein.

`<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 und empfohlene Methode für die Navigation zwischen Routen in Next.js.

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

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.

`useRouter()`-Hook

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

'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.

`redirect`-Funktion

Für Server Components verwenden Sie stattdessen die redirect-Funktion.

import { redirect } from 'next/navigation'

async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  if (!id) {
    redirect('/login')
  }

  const team = await fetchTeam(id)
  if (!team) {
    redirect('/join')
  }

  // ...
}

Wissenswertes:

redirect gibt standardmäßig einen 307 (Temporary Redirect)-Statuscode zurück. Bei Verwendung in einer Server Action wird ein 303 (See Other) zurückgegeben, der häufig für die Weiterleitung zu einer Erfolgsseite nach einer POST-Anfrage verwendet wird.

redirect wirft intern einen Fehler aus und sollte daher außerhalb von try/catch-Blöcken aufgerufen werden.

redirect kann in Client Components während des Rendering-Prozesses aufgerufen werden, jedoch nicht in Event-Handlern. Verwenden Sie stattdessen den useRouter-Hook.

redirect akzeptiert auch absolute URLs und kann für Weiterleitungen zu externen Links verwendet werden.

Wenn Sie vor dem Rendering-Prozess weiterleiten möchten, verwenden Sie next.config.js oder Middleware.

Weitere Informationen finden Sie in der redirect-API-Referenz.

Verwendung der nativen History API

Next.js ermöglicht die Verwendung der nativen Methoden window.history.pushState und window.history.replaceState, um den Browserverlauf zu aktualisieren, ohne die Seite neu zu laden.

Aufrufe von pushState und replaceState werden in den Next.js-Router integriert, sodass Sie sie mit usePathname und useSearchParams synchronisieren können.

`window.history.pushState`

Verwenden Sie diese Methode, um einen neuen Eintrag zum Browserverlauf hinzuzufügen. Der Benutzer kann zum vorherigen Zustand zurücknavigieren. Beispielsweise zum Sortieren einer Produktliste:

'use client'

import { useSearchParams } from 'next/navigation'

export default function SortProducts() {
  const searchParams = useSearchParams()

  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }

  return (
    <>
      <button onClick={() => updateSorting('asc')}>Aufsteigend sortieren</button>
      <button onClick={() => updateSorting('desc')}>Absteigend sortieren</button>
    </>
  )
}

'use client'

import { useSearchParams } from 'next/navigation'

export default function SortProducts() {
  const searchParams = useSearchParams()

  function updateSorting(sortOrder) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }

  return (
    <>
      <button onClick={() => updateSorting('asc')}>Aufsteigend sortieren</button>
      <button onClick={() => updateSorting('desc')}>Absteigend sortieren</button>
    </>
  )
}

`window.history.replaceState`

Verwenden Sie diese Methode, um den aktuellen Eintrag im Browserverlauf zu ersetzen. Der Benutzer kann nicht zum vorherigen Zustand zurücknavigieren. Beispielsweise zum Wechseln der Anwendungssprache:

'use client'

import { usePathname } from 'next/navigation'

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

  function switchLocale(locale: string) {
    // z.B. '/en/about' oder '/fr/contact'
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }

  return (
    <>
      <button onClick={() => switchLocale('en')}>Englisch</button>
      <button onClick={() => switchLocale('fr')}>Französisch</button>
    </>
  )
}

'use client'

import { usePathname } from 'next/navigation'

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

  function switchLocale(locale) {
    // z.B. '/en/about' oder '/fr/contact'
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }

  return (
    <>
      <button onClick={() => switchLocale('en')}>Englisch</button>
      <button onClick={() => switchLocale('fr')}>Französisch</button>
    </>
  )
}

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

1. Code Splitting

Code Splitting ermöglicht es, Ihren Anwendungscode in kleinere Bundles aufzuteilen, die vom Browser heruntergeladen und ausgeführt werden können. Dies reduziert die übertragene Datenmenge und die Ausführungszeit für jede Anfrage und verbessert so die Leistung.

Server Components ermöglichen die automatische Aufteilung Ihres Anwendungscodes nach Route-Segmenten. Das bedeutet, dass nur der Code für die aktuelle Route bei der Navigation geladen wird.

2. Prefetching

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

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

<Link>-Komponente: Routen werden automatisch geprefetcht, sobald sie im Blickfeld des Benutzers erscheinen. Das Prefetching erfolgt beim ersten Laden der Seite oder beim Scrollen in den sichtbaren Bereich.
router.prefetch(): Der useRouter-Hook kann verwendet werden, um Routen programmatisch vorzuladen.

Das Standard-Prefetching-Verhalten von <Link> (d.h. wenn die prefetch-Prop nicht angegeben oder auf null gesetzt ist) unterscheidet sich je nach Verwendung von loading.js. Nur das gemeinsame Layout bis zur ersten loading.js-Datei im gerenderten "Baum" der Komponenten wird geprefetcht und für 30s gecacht. Dies reduziert die Kosten für das Abrufen einer gesamten dynamischen Route und ermöglicht die Anzeige eines sofortigen Ladezustands für bessere visuelle Rückmeldung an den Benutzer.

Sie können das Prefetching deaktivieren, indem Sie die prefetch-Prop auf false setzen. Alternativ können Sie die vollständigen Seitendaten über die Ladegrenzen hinaus prefetchen, indem Sie die prefetch-Prop auf true setzen.

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

Wissenswertes:

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

3. Caching

Next.js verfügt über einen clientseitigen In-Memory-Cache namens Router Cache. Wenn Benutzer durch die App navigieren, werden die React Server Component Payloads von geprefetchten Route-Segmenten 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 dessen Konfiguration.

4. Partielles Rendering

Partielles Rendering bedeutet, dass nur die Route-Segmente, die sich bei der Navigation ändern, clientseitig neu gerendert werden, während gemeinsame Segmente erhalten bleiben.

Beispielsweise wird beim Navigieren zwischen zwei Geschwisterrouten, /dashboard/settings und /dashboard/analytics, die settings-Seite ausgeblendet, die analytics-Seite mit frischem Zustand eingeblendet und das gemeinsame dashboard-Layout beibehalten. Dieses Verhalten tritt auch zwischen zwei Routen auf demselben dynamischen Segment auf, z.B. bei /blog/[slug]/page und der Navigation von /blog/first zu /blog/second.

Ohne partielles Rendering würde jede Navigation ein vollständiges Neu-Rendering der Seite auf dem Client verursachen. Das Rendern nur des sich ändernden Segments reduziert die übertragene Datenmenge und die Ausführungszeit, was die Leistung verbessert.

Browser führen eine "Hard Navigation" durch, wenn zwischen Seiten navigiert wird. Der Next.js App Router ermöglicht eine "Soft Navigation" zwischen Seiten, bei der nur die sich ändernden Route-Segmente neu gerendert werden (partielles Rendering). Dadurch bleibt der clientseitige React-Zustand während der Navigation erhalten.

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

7. Routing zwischen `pages/` und `app/`

Bei der schrittweisen Migration von pages/ zu app/ behandelt der Next.js-Router die Hard Navigation zwischen den beiden automatisch. Um Übergänge von pages/ zu app/ zu erkennen, gibt es einen Client-Router-Filter, der probabilistische Prüfungen von App-Routen nutzt, was gelegentlich zu falsch positiven Ergebnissen führen kann. Standardmäßig sollten solche Vorkommnisse sehr selten sein, da wir die Wahrscheinlichkeit für falsch positive Ergebnisse auf 0,01 % konfigurieren. Diese Wahrscheinlichkeit kann über die Option experimental.clientRouterFilterAllowedRate in next.config.js angepasst werden. Es ist wichtig zu beachten, dass eine Senkung der falsch positiven Rate die Größe des generierten Filters im Client-Bundle erhöht.

Alternativ können Sie diese automatische Handhabung deaktivieren und das Routing zwischen pages/ und app/ manuell verwalten, indem Sie experimental.clientRouterFilter in next.config.js auf false setzen. Wenn diese Funktion deaktiviert ist, werden dynamische Routen in pages, die mit app-Routen überlappen, standardmäßig nicht korrekt angesteuert.