redirect

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

Cuando se usa en un contexto de 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.

Referencia

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 de Servidor y replace (reemplaza la URL actual en el historial del navegador) en otros casos. Puede sobrescribir este comportamiento especificando el parámetro type.

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

Retorno

redirect no retorna ningún valor.

Comportamiento

• En Acciones de Servidor y Manejadores de Ruta, redirect debe llamarse después del bloque try/catch.
• Si prefiere retornar una redirección HTTP 308 (Permanente) en lugar de 307 (Temporal), puede usar la función permanentRedirect.
• redirect internamente lanza un error, por lo que debe llamarse fuera de bloques try/catch.
• redirect puede llamarse en Componentes de Cliente durante el proceso de renderizado pero no en manejadores de eventos. Puede usar el hook useRouter en su lugar.
• redirect también acepta URLs absolutas y puede usarse para redirigir a enlaces externos.
• Si desea redirigir antes del proceso de renderizado, use next.config.js o Middleware.

Ejemplo

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

  // ...
}

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

  // ...
}

Nota importante: redirect no requiere usar return redirect() ya que utiliza el tipo never de TypeScript.

Componente de Cliente

redirect puede usarse directamente en un Componente de 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>
}

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

Nota importante: Al usar redirect en un Componente de Cliente durante la carga inicial de página con Renderizado del Lado del Servidor (SSR), realizará una redirección del lado del servidor.

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 usados son 307 para redirección temporal y 308 para redirección permanente. Tradicionalmente se usaba 302 para redirección temporal y 301 para permanente, pero muchos navegadores cambiaban el método de solicitud de la redirección, 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 cambiará de POST a GET. Esto no tiene sentido, ya que para crear un usuario debería hacer POST a /people, no GET.

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

• 302 - Redirección temporal, cambia el método de POST a GET
• 307 - Redirección temporal, preserva el método 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