Error Page in Next.js

Customizing 404 Error Page

To remedy this, change the fallback to false, which will redirect to a 404 if the request fails to resolve.

export async function getStaticPaths() {
 const pagesWithSlugs = await getAllPagesWithSlugs();
 return {
   paths: pagesWithSlugs.edges.map(({node}) => `/${node.slug}`) || [],
   fallback: false,
 };
}

You can also try this code with Online Javascript Compiler

Run Code

In our pages directory, we can create a page called 404.js to serve as the 404 page.

404.js

export default function Custom404() {
 return (
   <div className="flex justify-center items-center h-screen mx-2 my-2 overflow-hidden ">
     <div className="px-6 py-4 rounded shadow-lg">
       <div className="mb-2 text-xl font-bold">
         404 - Sorry, We could not find this page 😅
       </div>
     </div>
   </div>
 );
}

You can also try this code with Online Javascript Compiler

Run Code

Now, when we reload the page, we should see the page below.

Output

500 Error Page

Responding to faults becomes more complicated when a server renders an error page for each visit. Next.js includes a static 500 page by default to allow users to get responses to failures as quickly as possible without having to add any additional files.

Customizing 500 Error Page

For those pages, we may also design a custom error page. In our pages directory, we will create a file called 500.js.

500.js

export default function Custom500() {
 return (
   <div className="flex justify-center items-center h-screen mx-2 my-2 overflow-hidden ">
     <div className="px-6 py-4 rounded shadow-lg">
       <div className="mb-2 text-xl font-bold">500 - Server error detected 😭</div>
     </div>
   </div>
 );
}

You can also try this code with Online Javascript Compiler

Run Code

Output

Frequently Asked Questions (FAQs)

1.What is Next?

Next.js is a React framework that allows you to create single-page Javascript apps. This framework has various advantages for our clients' applications and our development team. 

2.What is a 404 Error page?

Without needing to add any more files, Next.js comes with a static 404 page by default. The burden on the Next.js server is increased by producing an error page for each visit. This can lead to higher prices and slower service.

3.What is a 500 Error page?

Responding to faults becomes more complicated when a server renders an error page for each visit. Next.js includes a static 500 page by default to allow users to get responses to failures as quickly as possible without having to add any additional files.

Key Takeaways

In this article, We learnt about how the 404 and 500 Error pages in Next. We also learned how to customize these error pages according to our needs. These error pages highly optimise the performance of the website and giving us a smooth experience.

For more information about the react framework for frontend development, get into the entire Frontend web development course.

Happy Learning!