redirect

La función redirect permite redirigir al usuario a otra URL. Se puede utilizar en Componentes de Servidor (Server Components), Manejadores de Ruta (Route Handlers) y Acciones de Servidor (Server Actions).

Cuando se usa en un contexto de transmisión (streaming), inserta una etiqueta meta para emitir la redirección en el lado del cliente. Cuando se usa en una acción de servidor, sirve una respuesta de redirección HTTP 303 al llamador. En otros casos, sirve una respuesta de redirección HTTP 307 al llamador.

Si un recurso no existe, puede usar la función notFound en su lugar.

Es bueno saber:

• En Acciones de Servidor y Manejadores de Ruta, redirect debe llamarse después del bloque try/catch.
• Si prefiere devolver una redirección HTTP 308 (Permanente) en lugar de 307 (Temporal), puede usar la función permanentRedirect.

Parámetros

La función redirect acepta dos argumentos:

redirect(path, type)

Por defecto, redirect usará push (agrega una nueva entrada al historial del navegador) en Acciones de Servidor (Server Actions) y replace (reemplaza la URL actual en el historial del navegador) en otros lugares. Puede anular este comportamiento especificando el parámetro type.

El parámetro type no tiene efecto cuando se usa en Componentes de Servidor.

Valor de retorno

redirect no devuelve ningún valor.

Ejemplo

Componente de Servidor

Invocar la función redirect() lanza un error NEXT_REDIRECT y termina el renderizado del segmento de ruta en el que se lanzó.

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

  // ...
}

Es bueno saber: redirect no requiere que uses return redirect() ya que utiliza el tipo never de TypeScript.

Componente de Cliente

redirect puede usarse en un Componente de Cliente a través de una Acción de Servidor. Si necesita usar un manejador de eventos para redirigir al usuario, puede usar el 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')}`)
}

Preguntas frecuentes

¿Por qué redirect usa 307 y 308?

Al usar redirect(), puede notar que los códigos de estado utilizados son 307 para una redirección temporal y 308 para una permanente. Tradicionalmente, se usaba 302 para redirecciones temporales y 301 para permanentes, pero muchos navegadores cambiaban el método de solicitud de POST a GET al usar 302, independientemente del método original.

En el siguiente ejemplo de redirección de /users a /people, si hace una solicitud POST a /users para crear un nuevo usuario y se conforma con un 302 temporal, el método de solicitud cambiará de POST a GET. Esto no tiene sentido, ya que para crear un usuario debería hacer una solicitud POST a /people, no GET.

La introducción del código de estado 307 significa que se preserva el método de solicitud como POST.

• 302 - Redirección temporal, cambiará el método de solicitud de POST a GET
• 307 - Redirección temporal, preservará el método de solicitud como POST

El método redirect() usa 307 por defecto en lugar de 302, lo que significa que sus solicitudes siempre se preservarán como POST.

Aprenda más sobre Redirecciones HTTP.

Historial de versiones