En este capítulo, aprenderemos cómo manejar errores y estados en una aplicación Next.js 13 utilizando el Page Router. La gestión de errores es crucial para garantizar que las aplicaciones funcionen correctamente en situaciones inesperadas, como cuando fallan las solicitudes de datos o cuando los usuarios acceden a rutas que no existen.

Manejo de Errores 404: Página No Encontrada

Next.js permite personalizar fácilmente la página de error 404. Si un usuario intenta acceder a una ruta que no existe, Next.js muestra una página 404. Podemos crear una página personalizada para este tipo de error.

Crear una Página 404

Para manejar errores 404, simplemente crea un archivo 404.js en la carpeta pages/. Este archivo representará la página de error cuando los usuarios accedan a una ruta inexistente.

javascript

Con esta configuración, puedes proporcionar una experiencia de usuario más amigable cuando se encuentren con un error 404.

Manejo de Errores 500: Error del Servidor

Los errores 500 indican problemas en el servidor. Podemos personalizar la página de error 500 de manera similar a como personalizamos la página 404, creando un archivo 500.js en la carpeta pages/.

Crear una Página 500

javascript

Tener una página de error 500 personalizada es útil para manejar errores graves del servidor de una manera más controlada.

Manejo de Errores en la Obtención de Datos

Cuando trabajamos con SSR o SSG, es posible que las solicitudes para obtener datos fallen. Es importante manejar estos errores y mostrar mensajes apropiados a los usuarios.

Manejo de Errores con getServerSideProps

En el siguiente ejemplo, mostramos cómo manejar un error en una solicitud dentro de getServerSideProps.

javascript

Este patrón es útil cuando necesitamos asegurarnos de que los datos solicitados están disponibles y son válidos antes de renderizar la página.

Manejo de Errores en el Lado del Cliente

Para manejar errores en el lado del cliente, podemos utilizar bloques try-catch y manejar errores en componentes de React. Esto es útil cuando obtenemos datos en el cliente utilizando el Client-Side Rendering (CSR).

Ejemplo de Manejo de Errores en el Cliente

javascript

Este enfoque asegura que los usuarios reciban retroalimentación clara cuando algo sale mal, mejorando la experiencia de usuario.

Gestión de Estados de Carga

Además del manejo de errores, es importante gestionar los estados de carga cuando los datos tardan en llegar. Mostrar indicadores de carga mejora la experiencia de usuario al proporcionar información sobre el estado de las solicitudes.

Ejemplo de Estado de Carga

javascript

El manejo de estados de carga es esencial para que los usuarios comprendan que la aplicación está trabajando para obtener los datos solicitados.

Conclusión

La gestión de errores y estados en el Page Router de Next.js 13 es fundamental para garantizar una experiencia de usuario fluida y profesional. A través de páginas personalizadas de errores, manejo de solicitudes fallidas, y estados de carga claros, podemos mejorar significativamente la confiabilidad y la respuesta de nuestras aplicaciones.