Cuando un usuario llega a una ruta que no existe o el servidor falla, la experiencia no tiene que ser frustrante. Next.js permite crear páginas de error personalizadas que mantienen la identidad visual del sitio y ofrecen una mejor experiencia al visitante. Entender cómo funcionan estas páginas es fundamental para cualquier proyecto profesional.
¿Por qué personalizar las páginas de error en Next.js?
Next.js trae de forma precargada dos tipos de páginas de error: la 404 (page not found), que aparece cuando una ruta no se encuentra, y la 500, que se muestra cuando ocurre un fallo en el servidor o en los componentes de React [01:03]. Aunque estas páginas por defecto cumplen su función, lucen genéricas y no reflejan el diseño del sitio.
La buena noticia es que Next.js ofrece total flexibilidad para customizar estas páginas y reemplazarlas con componentes propios que sigan el mismo layout y estilo del resto del proyecto [02:30]. De esta manera, incluso los errores se sienten parte de la experiencia del usuario.
Un detalle importante es el renderizado estático: como generalmente se busca evitar que las páginas de error hagan peticiones al servidor, Next.js las renderiza de forma estática al momento del build [01:28]. Esto garantiza que se carguen rápido sin importar el estado del servidor.
¿Cómo crear una página 404 personalizada?
El proceso es muy sencillo. Solo necesitas crear un archivo llamado 404.tsx dentro de la carpeta Pages [01:51]. Next.js reconoce este nombre de archivo automáticamente y lo utiliza como reemplazo de la página por defecto.
Dentro de este archivo, lo que encontramos es un componente de React estándar [03:03]:
- Se hace un
export default de una función.
- El nombre del componente puede ser cualquiera válido, como
NotFoundPage.
- Dentro del componente, se tiene libertad total para diseñar la interfaz.
tsx
export default function NotFoundPage() {
return (
<div>
<h1>404 - Página no encontrada</h1>
<p>Lo sentimos, la ruta que buscas no existe.</p>
</div>
)
}
Al guardar el archivo y con el servidor de desarrollo corriendo, la página se recarga de inmediato mostrando el nuevo diseño personalizado [02:22]. El resultado mantiene el mismo layout y estilo visual del sitio completo.
¿Qué opciones existen para manejar errores 500 y otros códigos?
De forma similar, se puede crear un archivo 500.tsx dentro de Pages para capturar errores del servidor [01:55]. Pero Next.js va más allá: no solo se limita a los códigos 404 y 500.
Existe toda una gama de códigos de estado HTTP desde el rango 200 en adelante que pueden capturarse y manejarse según convenga [03:40]. Esto abre la puerta a mostrar mensajes específicos para diferentes situaciones:
- 404: ruta no encontrada.
- 500: error interno del servidor.
- Otros códigos en rangos 3xx, 4xx y 5xx según la necesidad del proyecto.
Esta capacidad de personalización permite tener mucho más control sobre cómo se comunican los errores al usuario, convirtiendo momentos potencialmente negativos en oportunidades para guiar al visitante de vuelta al contenido correcto.
Si ya estás trabajando con Next.js, prueba a crear tus propias páginas de error y comparte cómo quedaron.
