Weiterleitung (redirect)

Die redirect-Funktion ermöglicht es, den Benutzer zu einer anderen URL weiterzuleiten. redirect kann in Server-Komponenten, Route-Handlern und Server-Aktionen verwendet werden.

Bei Verwendung in einem Streaming-Kontext wird ein Meta-Tag eingefügt, um die Weiterleitung clientseitig auszulösen. Bei Verwendung in einer Server-Aktion wird eine 303 HTTP-Weiterleitungsantwort an den Aufrufer gesendet. Andernfalls wird eine 307 HTTP-Weiterleitungsantwort an den Aufrufer gesendet.

Falls eine Ressource nicht existiert, kann stattdessen die notFound-Funktion verwendet werden.

Wissenswert:

• In Server-Aktionen und Route-Handlern sollte redirect nach dem try/catch-Block aufgerufen werden.
• Wenn Sie eine 308 (Permanente) HTTP-Weiterleitung anstelle von 307 (Temporär) bevorzugen, können Sie stattdessen die permanentRedirect-Funktion verwenden.

Parameter

Die redirect-Funktion akzeptiert zwei Argumente:

redirect(path, type)

Standardmäßig verwendet redirect push (fügt einen neuen Eintrag zum Browser-Verlauf hinzu) in Server-Aktionen und replace (ersetzt die aktuelle URL im Browser-Verlauf) in allen anderen Fällen. Dieses Verhalten kann durch Angabe des type-Parameters überschrieben werden.

Der type-Parameter hat keine Auswirkung, wenn er in Server-Komponenten verwendet wird.

Rückgabewert

redirect gibt keinen Wert zurück.

Beispiel

Server-Komponente

Der Aufruf der redirect()-Funktion wirft einen NEXT_REDIRECT-Fehler und beendet das Rendern des Routen-Segments, in dem er ausgelöst wurde.

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
  const team = await fetchTeam(id)

  if (!team) {
    redirect('/login')
  }

  // ...
}

Wissenswert: redirect erfordert nicht die Verwendung von return redirect(), da es den TypeScript-Typ never verwendet.

Client-Komponente

redirect kann direkt in einer Client-Komponente verwendet werden.

'use client'

import { redirect, usePathname } from 'next/navigation'

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

  if (pathname.startsWith('/admin') && !pathname.includes('/login')) {
    redirect('/admin/login')
  }

  return <div>Login Page</div>
}

Wissenswert: Bei Verwendung von redirect in einer Client-Komponente während des initialen Seitenladevorgangs im Server-Side Rendering (SSR) wird eine serverseitige Weiterleitung durchgeführt.

redirect kann in einer Client-Komponente über eine Server-Aktion verwendet werden. Wenn Sie einen Event-Handler benötigen, um den Benutzer weiterzuleiten, können Sie den useRouter-Hook verwenden.

'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

FAQ

Warum verwendet redirect 307 und 308?

Bei Verwendung von redirect() fällt auf, dass die Statuscodes 307 für eine temporäre Weiterleitung und 308 für eine permanente Weiterleitung verwendet werden. Traditionell wurde 302 für eine temporäre Weiterleitung und 301 für eine permanente Weiterleitung verwendet, jedoch haben viele Browser die Anfragemethode der Weiterleitung von POST zu GET geändert, wenn ein 302 verwendet wurde, unabhängig von der ursprünglichen Anfragemethode.

Nehmen wir das folgende Beispiel einer Weiterleitung von /users zu /people: Wenn Sie eine POST-Anfrage an /users senden, um einen neuen Benutzer zu erstellen, und eine 302-temporäre Weiterleitung erfolgt, wird die Anfragemethode von POST zu GET geändert. Das ergibt keinen Sinn, da zum Erstellen eines neuen Benutzers eine POST-Anfrage an /people gesendet werden sollte und nicht eine GET-Anfrage.

Die Einführung des 307-Statuscodes bedeutet, dass die Anfragemethode als POST beibehalten wird.

• 302 - Temporäre Weiterleitung, ändert die Anfragemethode von POST zu GET
• 307 - Temporäre Weiterleitung, behält die Anfragemethode als POST bei

Die redirect()-Methode verwendet standardmäßig 307 anstelle von 302 für temporäre Weiterleitungen, was bedeutet, dass Ihre Anfragen immer als POST-Anfragen beibehalten werden.

Erfahren Sie mehr über HTTP-Weiterleitungen.

Versionsverlauf