redirect

La fonction redirect permet de rediriger l'utilisateur vers une autre URL. Elle peut être utilisée dans les composants serveur (Server Components), les gestionnaires de route (Route Handlers) et les actions serveur (Server Actions).

Dans un contexte de streaming (streaming context), cette fonction insère une balise meta pour déclencher la redirection côté client. Lorsqu'elle est utilisée dans une action serveur, elle renvoie une réponse de redirection HTTP 303 à l'appelant. Sinon, elle renvoie une réponse de redirection HTTP 307.

Si une ressource n'existe pas, vous pouvez utiliser la fonction notFound à la place.

Référence

Paramètres

La fonction redirect accepte deux arguments :

redirect(path, type)

Par défaut, redirect utilise push (ajoute une nouvelle entrée à la pile d'historique du navigateur) dans les actions serveur (Server Actions) et replace (remplace l'URL actuelle dans la pile d'historique du navigateur) partout ailleurs. Vous pouvez modifier ce comportement en spécifiant le paramètre type.

Le paramètre type n'a aucun effet lorsqu'il est utilisé dans les composants serveur.

Valeur de retour

redirect ne retourne aucune valeur.

Comportement

• Dans les actions serveur et les gestionnaires de route, redirect doit être appelée après le bloc try/catch.
• Si vous préférez renvoyer une redirection HTTP 308 (Permanente) au lieu de 307 (Temporaire), vous pouvez utiliser la fonction permanentRedirect.
• redirect lance une erreur en interne et doit donc être appelée en dehors des blocs try/catch.
• redirect peut être appelée dans les composants client pendant le processus de rendu mais pas dans les gestionnaires d'événements. Utilisez plutôt le hook useRouter.
• redirect accepte également les URL absolues et peut être utilisée pour rediriger vers des liens externes.
• Pour rediriger avant le processus de rendu, utilisez next.config.js ou le middleware.

Exemple

Composant serveur

L'appel de la fonction redirect() lance une erreur NEXT_REDIRECT et interrompt le rendu du segment de route dans lequel elle a été appelée.

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

  // ...
}

Bon à savoir : redirect ne nécessite pas d'utiliser return redirect() car elle utilise le type never de TypeScript.

Composant client

redirect peut être utilisée directement dans un composant client.

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

Bon à savoir : Lorsque redirect est utilisée dans un composant client lors du chargement initial de la page avec le rendu côté serveur (SSR), elle effectue une redirection côté serveur.

redirect peut être utilisée dans un composant client via une action serveur. Pour rediriger l'utilisateur via un gestionnaire d'événements, utilisez le hook useRouter.

'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

Pourquoi redirect utilise-t-elle 307 et 308 ?

Lorsque vous utilisez redirect(), vous remarquerez peut-être que les codes d'état utilisés sont 307 pour une redirection temporaire et 308 pour une redirection permanente. Traditionnellement, un 302 était utilisé pour une redirection temporaire et un 301 pour une redirection permanente, mais de nombreux navigateurs changeaient la méthode de requête de la redirection, passant d'une POST à GET lors de l'utilisation d'un 302, quelle que soit la méthode de requête d'origine.

Prenons l'exemple d'une redirection de /users vers /people : si vous effectuez une requête POST vers /users pour créer un nouvel utilisateur et que vous êtes conforme à une redirection temporaire 302, la méthode de requête sera changée de POST à GET. Cela n'a pas de sens, car pour créer un nouvel utilisateur, vous devriez effectuer une requête POST vers /people, et non une requête GET.

L'introduction du code d'état 307 signifie que la méthode de requête est conservée comme POST.

• 302 - Redirection temporaire, change la méthode de requête de POST à GET
• 307 - Redirection temporaire, conserve la méthode de requête comme POST

La méthode redirect() utilise par défaut un 307 au lieu d'une redirection temporaire 302, ce qui signifie que vos requêtes seront toujours conservées comme des requêtes POST.

En savoir plus sur les redirections HTTP.

Historique des versions