Errores personalizados

Página 404

Una página 404 puede ser accedida con mucha frecuencia. Renderizar en el servidor una página de error para cada visita incrementa la carga del servidor de Next.js. Esto puede resultar en mayores costos y experiencias lentas.

Para evitar los problemas mencionados, Next.js proporciona una página 404 estática por defecto sin necesidad de añadir archivos adicionales.

Personalización de la página 404

Para crear una página 404 personalizada puedes crear un archivo pages/404.js. Este archivo se genera estáticamente durante el proceso de construcción.

export default function Custom404() {
  return <h1>404 - Página no encontrada</h1>
}

Es bueno saber: Puedes usar getStaticProps dentro de esta página si necesitas obtener datos durante el tiempo de construcción.

Página 500

Renderizar en el servidor una página de error para cada visita añade complejidad al manejo de errores. Para ayudar a los usuarios a obtener respuestas rápidas ante errores, Next.js proporciona una página 500 estática por defecto sin necesidad de añadir archivos adicionales.

Personalización de la página 500

Para personalizar la página 500 puedes crear un archivo pages/500.js. Este archivo se genera estáticamente durante el proceso de construcción.

export default function Custom500() {
  return <h1>500 - Ocurrió un error en el servidor</h1>
}

Es bueno saber: Puedes usar getStaticProps dentro de esta página si necesitas obtener datos durante el tiempo de construcción.

Personalización avanzada de páginas de error

Los errores 500 son manejados tanto en el lado del cliente como del servidor por el componente Error. Si deseas sobrescribirlo, define el archivo pages/_error.js y añade el siguiente código:

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `Ocurrió un error ${statusCode} en el servidor`
        : 'Ocurrió un error en el cliente'}
    </p>
  )
}

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

export default Error

pages/_error.js solo se usa en producción. En desarrollo obtendrás un error con la traza de llamadas para saber dónde se originó el error.

Reutilización de la página de error integrada

Si deseas renderizar la página de error integrada puedes hacerlo importando el componente Error:

import Error from 'next/error'

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.status
  const json = await res.json()

  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}

export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }

  return <div>Estrellas de Next: {stars}</div>
}

El componente Error también acepta title como propiedad si deseas incluir un mensaje de texto junto con el statusCode.

Si tienes un componente Error personalizado, asegúrate de importar ese en lugar del predeterminado. next/error exporta el componente por defecto usado por Next.js.

Consideraciones

• Error actualmente no soporta los métodos de obtención de datos de Next.js como getStaticProps o getServerSideProps.
• _error, al igual que _app, es un nombre de ruta reservado. _error se usa para definir los diseños y comportamientos personalizados de las páginas de error. /_error renderizará 404 cuando se acceda directamente mediante enrutamiento o renderizado en un servidor personalizado.