Creación y reutilización de páginas de error en Next.js

¿Cómo gestionar las páginas de error en Next.js?

El control de las páginas de error en Next.js es fundamental para mejorar la experiencia del usuario durante fallos ineludibles. La capacidad de personalizar y reutilizar páginas de error no solo ahorra tiempo, sino que también agrega un toque profesional a tu aplicación. ¡Vamos a explorar cómo hacerlo!

¿Qué es una página de error genérica en Next.js?

Una página de error genérica permite capturar y manejar todos los errores en tu aplicación de manera centralizada. Esto se consigue creando un archivo error.tsx, donde puedes manejar diferentes tipos de códigos de estado HTTP.

import { Component } from 'react';

// Ejemplo de una página de error genérica
const ErrorPage = ({ statusCode, message }) => {
  if (statusCode === 404) {
    return <Custom404 />;
  }
  if (statusCode >= 500) {
    return <Custom500 />;
  }
  return <GenericError message={message} />;
};

ErrorPage.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default ErrorPage;

Se debe utilizar getInitialProps para conectar con el servidor y obtener el statusCode correspondiente a los errores HTTP. Esta práctica da mayor control sobre cómo se muestran los errores.

¿Cómo reutilizar la página de error en componentes o páginas específicas?

Una vez que tienes tu página de error centralizada, es posible reutilizarla en diferentes partes de tu aplicación. Esto se logra importando tu página de error genérica donde sea necesario.

import ErrorPage from '../path/to/error';

const SomeComponent = ({ hasError }) => {
  if (hasError) {
    return <ErrorPage message="Oops! Something went wrong." />;
  }
  return <Content />;
};

export default SomeComponent;

De este modo, puedes mantener la consistencia en la forma en que se reportan y visualizan los errores, asegurando una interconexión más fluida y una UX mejorada.

¿Qué posibilidades de personalización tenemos?

Las páginas de error en Next.js pueden revestirse al gusto del desarrollador. Ya sea optando por un tono cómico, informal o serio, tienes el poder de ajustar estilos, mensajes y más dentro de tu diseño UI.

• Personaliza los estilos para adaptarse al tema de tu aplicación.
• Añade componentes adicionales, como botones de regreso o enlaces de apoyo.
• Ajusta mensajes y código para variar entre diferentes tipos de errores.

En resumen, la reutilización de una página de error mejora significativamente la consistencia visual de la aplicación, reduce duplicidades y facilita el mantenimiento. Con estas capacidades, ¡estás bien equipado para manejar eficientemente los errores en Next.js!

Continuaremos explorando cómo utilizar modos de preview con CMS modernos en Next.js, ¡así que mantente atento para aprender más!