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 agregar archivos adicionales.

Personalizando 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 build.

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 build.

Página 500

Renderizar en el servidor una página de error para cada visita añade complejidad al responder a errores. Para ayudar a los usuarios a obtener respuestas a errores lo más rápido posible, Next.js proporciona una página 500 estática por defecto sin necesidad de agregar archivos adicionales.

Personalizando 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 build.

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 build.

Personalización avanzada de páginas de error

Los errores 500 son manejados tanto en el cliente como en el servidor por el componente Error. Si deseas sobrescribirlo, define el archivo pages/_error.js y agrega 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 el stack trace para saber de dónde se originó el error.

Reutilizando 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 pasar 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 predeterminado 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.