Cuando desarrollas una aplicación web con Next.js, hay dos problemas que aparecen en prácticamente cualquier proyecto: ¿qué mostrar cuando alguien visita una URL que no existe? y ¿cómo manejar errores inesperados sin que el usuario vea una pantalla en blanco? Implementar una página de Not Found y un manejador de errores global resuelve ambos casos de forma elegante y profesional.
¿Cómo crear una página de error global en Next.js?
El manejo de errores global se refiere a capturar cualquier error que ocurra en la aplicación, sin importar la ruta o componente donde se origine. Next.js permite hacerlo de forma local (para un componente o ruta específica) o de forma global, colocando el archivo directamente en la raíz del app directory [0:36].
Para crearlo, se genera un archivo llamado global-error.tsx en la raíz del proyecto. El componente debe exportarse como export default function y, algo fundamental, los componentes de error siempre deben ser de tipo cliente (client component) [1:06].
tsx
"use client";
import Image from "next/image";
import styles from "@/app/sass/global-error.module.sass";
export default function GlobalError({ reset }: ErrorPageProps) {
return (
<main className={styles.error}>
<h1 className={styles.error__title}>Ha ocurrido un error</h1>
<Image
src="/images/error.png"
width={500}
height={500}
alt="error"
/>
<p className={styles.error__message}>
Al parecer, ha ocurrido un error, pero no te sientas mal.
</p>
<button className={styles.error__button} onClick={reset}>
Volver a intentar
</button>
</main>
);
}
¿Qué es la función reset y para qué sirve?
La función reset es una prop que Next.js inyecta automáticamente en los componentes de error. Al ejecutarla, intenta volver a renderizar el componente que falló, dándole al usuario la oportunidad de recuperarse sin recargar toda la página [3:18].
Para tipar las props de forma global, se puede crear un archivo types.d.ts donde se define la interfaz ErrorPageProps con las propiedades error y reset. Esto mantiene el código organizado y reutilizable en TypeScript [2:56].
¿Cómo probar que la página de error funciona?
Una forma rápida es lanzar un error intencional con throw new Error("boom") dentro de cualquier página, por ejemplo en la ruta de store [4:28]. Al visitar esa ruta, en lugar de una pantalla rota, aparece el componente de error global con el mensaje, la imagen y el botón para reintentar.
Como el route layout sigue activo por encima del error, la barra de navegación permanece visible. Esto permite que el usuario pueda moverse a otras secciones como home o store sin quedarse atrapado [5:05].
¿Cómo implementar una página 404 o Not Found en Next.js?
Crear una página de Not Found es igual de sencillo. Basta con agregar un archivo llamado not-found.tsx en la raíz del app directory [5:22]. Next.js lo detecta automáticamente y lo muestra cada vez que alguien accede a una URL que no corresponde a ninguna ruta definida.
- Las páginas Not Found en Next.js se tratan como contenido estático.
- Aunque técnicamente es un React Server Component, se genera de forma estática porque no necesita datos dinámicos [5:42].
- El componente incluye un título, una imagen descriptiva y, lo más importante, un enlace que lleve al usuario a otra parte del sitio.
¿Por qué siempre debes redirigir desde una página 404?
Una recomendación clave: nunca dejes a tu usuario en un callejón sin salida [5:50]. Si alguien llega a una ruta inexistente, ofrécele un camino claro. En el ejemplo, el botón dice "Vamos de compras" y redirige a la tienda. Esto mejora la experiencia de usuario y reduce la tasa de abandono.
Una vez implementado, cualquier ruta que no exista en el servidor mostrará la página personalizada de 404. No importa qué URL invente el usuario: siempre recibirá feedback visual y una opción para continuar navegando [6:15].
Si ya tienes tu proyecto en Next.js, prueba a implementar ambas páginas y comparte cómo personalizaste tus mensajes de error.
