redirect

Die redirect-Funktion ermöglicht es, Benutzer auf eine andere URL umzuleiten. redirect kann in Server Components, Route Handlers und Server Actions verwendet werden.

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

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

Wissenswert:

• In Server Actions und Route Handlers sollte redirect nach dem try/catch-Block aufgerufen werden.
• Für eine 308 (Permanente) HTTP-Weiterleitung anstelle von 307 (Temporär) kann die permanentRedirect-Funktion verwendet werden.

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 Actions 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 bei Verwendung in Server Components.

Rückgabewert

redirect gibt keinen Wert zurück.

Beispiel

Server Component

Der Aufruf der redirect()-Funktion wirft einen NEXT_REDIRECT-Fehler und beendet das Rendering des Routen-Segments, in dem er aufgetreten ist.

import { redirect } from 'next/navigation'

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

export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }

  // ...
}

Wissenswert: redirect erfordert kein return redirect(), da der TypeScript never-Typ verwendet wird.

Client Component

redirect kann in einer Client Component über eine Server Action verwendet werden. Für clientseitige Umleitungen in Event-Handlern kann der useRouter-Hook verwendet werden.

'use client'

import { navigate } from './actions'

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

'use client'

import { navigate } from './actions'

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

'use server'

import { redirect } from 'next/navigation'

export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}

'use server'

import { redirect } from 'next/navigation'

export async function navigate(data) {
  redirect(`/posts/${data.get('id')}`)
}

FAQ

Warum verwendet redirect 307 und 308?

Bei der Verwendung von redirect() fällt auf, dass die Statuscodes 307 für temporäre und 308 für permanente Umleitungen verwendet werden. Traditionell wurden 302 für temporäre und 301 für permanente Umleitungen genutzt, jedoch änderten viele Browser die Request-Methode von POST zu GET bei einer 302-Umleitung, unabhängig von der ursprünglichen Request-Methode.

Beispiel einer Umleitung von /users zu /people: Bei einem POST-Request an /users zur Erstellung eines neuen Benutzers würde ein 302 die Request-Methode zu GET ändern. Dies ist nicht sinnvoll, da für die Erstellung eines Benutzers ein POST-Request an /people erforderlich wäre.

Der Statuscode 307 stellt sicher, dass die Request-Methode (z.B. POST) beibehalten wird.

• 302 - Temporäre Umleitung, ändert die Request-Methode von POST zu GET
• 307 - Temporäre Umleitung, behält die Request-Methode als POST bei

Die redirect()-Methode verwendet standardmäßig 307 anstelle von 302, wodurch Requests immer als POST-Requests beibehalten werden.

Mehr erfahren über HTTP-Weiterleitungen.

Versionsverlauf