redirect

Die redirect-Funktion ermöglicht es, den Benutzer zu einer anderen URL umzuleiten. redirect kann in Server-Komponenten (Server Components), Route-Handlern (Route Handlers) und Server-Aktionen (Server Actions) verwendet werden.

Bei Verwendung in einem Streaming-Kontext (streaming context) wird ein Meta-Tag eingefügt, um die Umleitung auf der Client-Seite 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.

Referenz

Parameter

Die redirect-Funktion akzeptiert zwei Argumente:

redirect(path, type)

Standardmäßig verwendet redirect push (fügt einen neuen Eintrag zum Browser-History-Stack hinzu) in Server-Aktionen (Server Actions) und replace (ersetzt die aktuelle URL im Browser-History-Stack) 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.

Verhalten

• In Server-Aktionen und Route-Handlern sollte redirect nach dem try/catch-Block aufgerufen werden.
• Falls eine 308 (Permanente) HTTP-Weiterleitung anstelle von 307 (Temporär) bevorzugt wird, kann stattdessen die permanentRedirect-Funktion verwendet werden.
• redirect wirft intern einen Fehler und sollte daher außerhalb von try/catch-Blöcken aufgerufen werden.
• redirect kann in Client-Komponenten während des Rendering-Prozesses aufgerufen werden, jedoch nicht in Event-Handlern. Stattdessen kann der useRouter-Hook verwendet werden.
• redirect akzeptiert auch absolute URLs und kann für Weiterleitungen zu externen Links verwendet werden.
• Falls eine Umleitung vor dem Rendering-Prozess erfolgen soll, kann next.config.js oder Middleware verwendet werden.

Beispiel

Server-Komponente

Der Aufruf der redirect()-Funktion wirft einen NEXT_REDIRECT-Fehler und beendet das Rendering des Route-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')
  }

  // ...
}

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

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

  // ...
}

Gut zu wissen: 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>
}

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

Gut zu wissen: Bei Verwendung von redirect in einer Client-Komponente während des initialen Seitenladens mit Server-Side Rendering (SSR) erfolgt eine serverseitige Umleitung.

redirect kann in einer Client-Komponente über eine Server-Aktion verwendet werden. Falls ein Event-Handler für die Umleitung des Benutzers benötigt wird, 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 Verwendung von redirect() fällt auf, dass die Statuscodes 307 für eine temporäre und 308 für eine permanente Umleitung verwendet werden. Traditionell wurden 302 für temporäre und 301 für permanente Umleitungen verwendet, jedoch haben viele Browser die Anfragemethode der Umleitung von POST zu GET geändert, wenn ein 302 verwendet wurde, unabhängig von der ursprünglichen Anfragemethode.

Betrachten wir das Beispiel einer Umleitung von /users zu /people: Wenn eine POST-Anfrage an /users gesendet wird, um einen neuen Benutzer zu erstellen, und eine 302-temporäre Umleitung erfolgt, wird die Anfragemethode von POST zu GET geändert. Dies ist nicht sinnvoll, da zum Erstellen eines neuen Benutzers eine POST-Anfrage an /people gesendet werden sollte, nicht eine GET-Anfrage.

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

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

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

Erfahren Sie mehr über HTTP-Weiterleitungen.

Versionsverlauf