How to create a Custom Error Page in Next.js ?

Creating a custom error page in Next.js allows you to provide a better user experience by customizing the appearance and messaging of error pages like 404 and 500.

In this post we are going to create a custom error page or a custom 404 page in a Next JS website.

What is a custom error page?

The 404 page is shown when the requested resource or the requested URL cannot be found on the server and as a response, it returns a 404 page. By default Next Js provides a static 404 page as shown below:

Approach

To create a custom 404 page, you first need to create a "404.js" named file in your pages directory. Define the your custom error page in this file. This file is statically generated at build time.

// Inside the "pages/404.js" file add the below code

export default function Custom404() {
    return <> YOUR COMPONENT HERE </>
}

Steps to Create Next.js App

Step 1: Initialize a new next.js app using the below command

npm create-next-app my-next-app

Step 2: Move to the project directory.

cd my-next-app

Project Structure:

Example: Creating a custom error page in Next.js. Write down the following code in 404.js file.

// Filename - pages/404.js

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>
    )
}

Step to Run the application: Now to start the development server you have to type the below command in the terminal.

npm run dev 

Output: And now let us go to a non-existing page on the website to encounter the 404 error.

Note: You can use getStaticProps inside this page if you need to fetch data at build time.

Reference: https://nextjs.org/docs/advanced-features/custom-error-page#404-page