Enrutamiento, Función redirect

¿Para qué sirve redirect en Nextjs?

La función redirect te permite redirigir al usuario a otra URL. redirect puede ser utilizado en Componentes del Servidor, Manejadores de Rutas y Acciones del Servidor.

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 }: { id: string }) {
    const team = await fetchTeam(params.id)
    if (!team) redirect('/login')

    // ...
}

• El redirect retorna 307 (Redirección temporal) por default. Cuando se usa en un Server Action, retorna 303 (See Other), que es comúnmente utilizado para redirigir a una página exitosa resultado de una petición POST.

• El redirect genera internamente un error, así que no debe ser envuelto en un bloque try/catch.

• El redirect puede ser llamado desde Client Components durante el proceso de rendereo pero no dentro de event handlers (manejadores de eventos). Para esto utilice el hook useRouter() en su lugar.

Parámetros de redirect

La función redirect acepta dos argumentos.

Por default redirect utiliza push (agrega una nueva entrada a la pila del historial del navegador) para las Server Actions y replace (reemplaza la url actual en la pila del historial del navegador) en todos los demás casos. Se puede sobreescribir este comportamiento especificando el parámetro type (tipo).

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

Ejemplos

Server Component

Invocar la función redirect() lanza un error NEXT_REDIRECT y termina la renderización del segmento de ruta en el cual fue lanzado.

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

    // ...
}

La instrucción redirect no requiere que uses return redirect() ya que utiliza el tipo never de TypeScript.

Client Component

El redirect puede ser utilizado en un Componente 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.

// app/client-redirect.tsx
'use client'

import { navigate } from './actions'

export function ClientRedirect() {
    return (
        <form action={navigate}>
            <input name="id" />
            <button>Submit</button>
        </form>
    )
}

// app/actions.ts
'use server'

import { redirect } from 'next/navigation'

export async function navigate(data: FormData) {
    redirect(`/posts/${data.get('id')}`)
}

Cuando uses redirect(), puedes notar que los códigos de estado utilizados son 307 para una redirección temporal y 308 para una redirección permanente. Tradicionalmente, se usaba un 302 para una redirección temporal y un 301 para una redirección permanente, pero muchos navegadores cambiaron el método de solicitud de la redirección, de una solicitud POST a una solicitud GET al usar un 302, independientemente del método de solicitud original.

Tomando el siguiente ejemplo de una redirección de /users a /people, si haces una solicitud POST a /users para crear un nuevo usuario y estás cumpliendo con una redirección temporal 302, el método de solicitud se cambiará de POST a GET. Esto no tiene sentido, ya que para crear un nuevo usuario, deberías estar haciendo una solicitud POST a /people, y no una solicitud GET.

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

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

El método redirect() usa un 307 por defecto, en lugar de una redirección temporal 302, lo que significa que tus solicitudes siempre se conservarán como solicitudes POST.

Conclusiones

La función redirect en Next.js es una herramienta poderosa para manejar redirecciones tanto en componentes del servidor como del cliente. Permite redirigir a los usuarios de manera eficiente y segura, manteniendo el método de solicitud original cuando es necesario. Su uso adecuado puede mejorar la experiencia del usuario y la lógica de navegación de la aplicación. Es importante entender los diferentes códigos de estado y comportamientos asociados para utilizar redirect de manera efectiva y evitar errores comunes en la redirección de rutas.