redirect

Die redirect-Funktion ermöglicht es Ihnen, den Benutzer auf eine andere URL weiterzuleiten. redirect kann in Server-Komponenten, Route-Handlers 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.

Wenn eine Ressource nicht existiert, können Sie stattdessen die notFound-Funktion verwenden.

Hinweis:

• In Server-Aktionen und Route-Handlers sollte redirect nach dem try/catch-Block aufgerufen werden.
• Wenn Sie stattdessen eine 308 (Permanent) HTTP-Weiterleitung bevorzugen, können Sie die permanentRedirect-Funktion verwenden.

Parameter

Die redirect-Funktion akzeptiert zwei Argumente:

redirect(path, type)

Standardmäßig verwendet redirect push (Hinzufügen eines neuen Eintrags zum Browser-Verlaufsstapel) in Server-Aktionen und replace (Ersetzen der aktuellen URL im Browser-Verlaufsstapel) überall sonst. 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

Das Aufrufen der redirect()-Funktion löst einen NEXT_REDIRECT-Fehler aus und beendet das Rendering des Routensegments, in dem er ausgelöst wurde.

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')
  }
 
  // ...
}

Hinweis: redirect erfordert nicht return redirect(), da es den TypeScript never-Typ verwendet.

Client-Komponente

redirect kann in einer Client-Komponente über eine Server-Aktion verwendet werden. Wenn Sie einen Event-Handler zum Weiterleiten des Benutzers benötigen, 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>
  )
}

'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')}`)
}

Häufig gestellte Fragen

Warum verwendet redirect 307 und 308?

Bei Verwendung von redirect() fallen möglicherweise die Statuscodes 307 für eine temporäre Weiterleitung und 308 für eine permanente Weiterleitung auf. Traditionell wurde 302 für eine temporäre Weiterleitung und 301 für eine permanente Weiterleitung verwendet. Viele Browser änderten jedoch die Anfragemethode der Weiterleitung von einer POST- zu einer GET-Anfrage bei Verwendung von 302, unabhängig von der ursprünglichen Anfragemethode.

Im folgenden Beispiel einer Weiterleitung von /users nach /people: Wenn Sie eine POST-Anfrage an /users senden, um einen neuen Benutzer zu erstellen, und sich an eine 302-temporäre Weiterleitung halten, wird die Anfragemethode von POST zu GET geändert. Das ergibt keinen Sinn, da Sie einen neuen Benutzer durch eine POST-Anfrage an /people erstellen sollten und nicht durch eine GET-Anfrage.

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

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

Die redirect()-Methode verwendet standardmäßig 307 anstelle einer 302-temporären Weiterleitung, was bedeutet, dass Ihre Anfragen immer als POST-Anfragen beibehalten werden.

Weitere Informationen über HTTP-Weiterleitungen.

Versionshistorie