NextJS es un marco basado en reacción que brinda al desarrollador todas las funciones necesarias para la producción. Next.js es un marco basado en reacción. Tiene poderes para desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.
En esta publicación, vamos a crear una página de error personalizada o una página 404 personalizada en un sitio web de Next JS.
¿Qué es una página personalizada de error/404?
La página 404 se muestra cuando el recurso solicitado o la URL solicitada no se encuentran en el servidor y como respuesta devuelve una página 404. Por defecto, Next Js proporciona una página 404 estática como se muestra a continuación:
404 predeterminado/página de error
Creación de una página personalizada de error/404
Para crear una página 404 personalizada, primero debe crear un archivo con el nombre » 404.js » en su directorio de páginas. Este archivo se genera estáticamente en el momento de la compilación.
creando un archivo 404,js
En esta página, cree y exporte un componente personalizado y Next Js se encargará del resto.
Javascript
// Inside the "pages/404.js" file add the below code
export default function Custom404() {
return <> YOUR COMPONENT HERE </>
}
Ejemplo: creación de una página de error personalizada en Next.js. Escriba el siguiente código en el archivo 404.js.
Javascript
// Inside the "pages/404.js" file
export default function Custom404() {
return (
<div>
<h1>
Welcome to <span style={{ color: "green" }}>
GeeksForGeeks
</span>
</h1>
<p>Sorry , The page you are looking for can't be found</p>
<p>Try checking your URL</p>
<h2>
This is a <span style={{ color: "red" }}>404 page</span>
</h2>
</div>
);
}
Paso para ejecutar la aplicación: Ahora, para iniciar el servidor de desarrollo, debe escribir el siguiente comando en la terminal.
npm run dev
Salida: Y ahora vayamos a una página inexistente en el sitio web para encontrar el error 404.
Página 404 personalizada (creada con el código anterior)
Nota: Puede usar getStaticProps dentro de esta página si necesita obtener datos en el momento de la compilación.
Referencia: https://nextjs.org/docs/advanced-features/custom-error-page#404-page
Publicación traducida automáticamente
Artículo escrito por mycodenotein y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA