Lección 07. Error 404 personalizado.

Si ya haz sido observador, te pudiste dar cuenta que al redirigir a una ruta no existente, Next.js nos despliega una pagina de Error 404 por default.

Sin embargo, Next.js permite personalizar nuestra propia pagina de Error 404 a mostrar cuando una ruta no sea encontrada.

Realizarlo, es muy sencillo. ¡Veamos!

Personalización de pagina de Error 404._

En nuestra estructura de proyecto, similar a:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
|- ...Otros archivos...

Dentro de nuestro directorio app/ crearemos un nuevo archivo llamado:

not-found.tsx

Nota: Next.js buscará un archivo con el mismo nombre. Por ello, debe llamarse de ese modo.

Quedando:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-not-found.tsx
|- ...Otros archivos...

Dentro del archivo not-found.tsx colocaremos el renderizado a visualizar. Como ejemplo:

export default function NotFound () {
  return (
    <h1>Error 404. Not Found</h1>
  );
}

De este modo, al ingresar a una ruta no existente, Next.js NO mostrará la pagina default 404, sino nuestra pagina personaliza.