Next.js 37: Redirigir después de una mutación
easy⏱ 5 mincoursenextjs
redirect() dentro de una acción
Llama a redirect(path) después de que una mutación se completa para enviar al usuario directo al resultado — p. ej. redirect('/posts/' + post.id) justo después de db.post.create(...). Por debajo, redirect() lanza una excepción; el código del framework de Next.js atrapa ese throw específico y realiza la navegación, así que nada después de la llamada llega a ejecutarse.
'use server';
import { redirect } from 'next/navigation';
export async function createPost(formData: FormData) {
const title = formData.get('title');
const post = await db.post.create({ data: { title } });
redirect(`/posts/${post.id}`); // never returns — throws internally
}
No te tragues el throw
Como redirect() funciona lanzando una excepción, envolver la llamada en un try { ... } catch { ... } que atrapa todo también atrapará el redirect por accidente y detendrá la navegación. Atrapa solo los errores que esperas (p. ej. un error de base de datos), o llama a redirect() después de que tu bloque try/catch ya haya terminado.
Redirect del cliente vs del servidor
redirect() de next/navigation funciona en Server Actions, Server Components y Route Handlers. En un Componente de Cliente, usarías en cambio router.push(path) del hook useRouter() — mismo resultado final (navegar al usuario), API distinta para un entorno distinto.
Simula un redirect
Construye un formulario con un campo title y un createPostAction simulado. En éxito, en vez de mostrar un mensaje en el mismo lugar, cambia un state view de 'form' a 'detail' y renderiza una pantalla distinta mostrando el post nuevo — coméntalo como simulación de redirect(), ya que no hay un router real en este sandbox. Mantén export default App.