redirect

La función redirect permite redirigir al usuario a otra URL. Se puede utilizar en Componentes del Servidor, Manejadores de Ruta y Acciones del Servidor.

Cuando se usa en un contexto de streaming, inserta una metaetiqueta para emitir la redirección en el lado del cliente. Cuando se usa en una acción del 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, puedes usar la función notFound en su lugar.

Importante:

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

Parámetros

La función redirect acepta dos argumentos:

redirect(path, type)

Por defecto, redirect usará push (añade una nueva entrada al historial del navegador) en Acciones del Servidor y replace (reemplaza la URL actual en el historial del navegador) en otros casos. Puedes sobrescribir este comportamiento especificando el parámetro type.

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

Retorno

redirect no retorna ningún valor.

Ejemplo

Componente del Servidor

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

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

  // ...
}

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

Componente del Cliente

redirect puede usarse directamente en un Componente del Cliente.

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

Importante: Al usar redirect en un Componente del Cliente durante el renderizado inicial del lado del servidor (SSR), realizará una redirección del lado del servidor.

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

Preguntas Frecuentes

¿Por qué redirect usa 307 y 308?

Al usar redirect() puedes 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.

Por ejemplo, al redirigir de /users a /people, si haces una solicitud POST a /users para crear un usuario y se aplica un 302, el método cambiará a GET. Esto no tiene sentido, ya que deberías hacer un POST a /people.

El código 307 preserva el método de solicitud como POST:

• 302 - Redirección temporal, cambia el método de POST a GET
• 307 - Redirección temporal, preserva el método como POST

redirect() usa 307 por defecto, preservando siempre las solicitudes POST.

Más información sobre redirecciones HTTP.

Historial de Versiones