Manejo de Errores y Páginas 404 en Next.js

Crear páginas de error y not found eficaces en tu sitio web: Una guía práctica

En el desarrollo web, es inevitable enfrentarse a ciertos problemas que afectan la experiencia del usuario. Una página de 'not found' es un buen ejemplo, comunicando eficientemente a los visitantes que la URL solicitada no existe. Igualmente, el manejo adecuado de errores de manera global es crucial para mantener al usuario informado cuando algo va mal en el servidor. ¿Estás listo para aprender cómo implementar estas funciones esenciales en tu proyecto? Let's dive in.

¿Cómo crear una página de error global?

Implementando la estructura básica

Una página de error global actúa como un comodín para capturar errores que no son manejados localmente en componentes o rutas específicas. Para comenzar, crea una función de exportación predeterminada en la raíz de tu aplicación:

export default function GlobalError() {
  // Tu código para la página de error aquí
}

Esta función será el contenedor de tu página de error, y es importante entender que los errores a manejar son aquellos del lado del cliente.

Importando estilos y componentes

Antes de definir el contenido de la página, necesitarás importar tus hojas de estilo y otros componentes necesarios, como la imagen y el manejo de estilos en SAS.

import styles from 'app/sas/global-error.sas';
import Image from 'next/image';

¿Cómo maquetar la página de error?

Con los estilos en su lugar, puedes empezar a maquetar la página utilizando etiquetas HTML y componentes React, asegurándote de asignar el contenido adecuado para una experiencia de usuario amigable.

Ejemplo de estructura de maquetación

<main className={styles.error}>
  <h1>Ha ocurrido un error</h1>
  <Image src="/images/error.png" alt="Error" width={500} height={500} />
  <p>Al parecer ha ocurrido un error, pero no te sientas mal.</p>
  <button>Intentar de nuevo</button>
</main>

Dentro del <main>, proporciona información sobre el error y ofrece una acción para 'intentar de nuevo', mejorando la interacción del usuario con tu sitio.

Estilizando la página de error

Utiliza tu CSS o SAS para dotar de estilo visualmente atractivo a la página de error, lo que contribuye a mitigar el impacto del error en la experiencia del usuario.

¿Qué hacer con la función de reset?

Incluye una función de reset al botón 'intentar de nuevo' que reconstruya la página e intente solucionar el error.

¿Cómo implementar una página de not found?

Creación de la página

Una página de 'not found' o 404 se trata prácticamente como una página estática y se implementa de manera similar a una página de error. Crea un archivo nombrado notfound.tsx en la raíz de tu directorio de aplicación.

Componentes de la página not found

En tu archivo notfound.tsx, asegúrate de incluir un título, imágenes y un mensaje que guíe a los usuarios de vuelta a una parte segura de tu sitio, como la tienda o la página principal.

export default function NotFound() {
  return (
    <main>
      <h1>Error 404: Página no encontrada</h1>
      {/* Resto del contenido aquí */}
    </main>
  );
}

¿Por qué son importantes estas páginas en tu sitio web?

Tanto las páginas de error global como las de not found mejoran la navegación y la usabilidad de tu sitio. Ayudan a los usuarios a entender qué ha ido mal y les ofrecen una ruta clara para corregir su curso, lo que reduce la frustración y mejora la impresión general de tu plataforma.

Recuerda, la clave está en guiar a tus usuarios a través de cualquier inconveniente que puedan encontrarse y proporcionarles las soluciones adecuadas. Mantén el ánimo siempre en alto y sigue mejorando tu sitio web para ofrecer la mejor experiencia posible.