Create a Custom Error Page in Next.js (original) (raw)

Last Updated : 27 Sep, 2025

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:

Default 404 / error page

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:

creating a 404,js file

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

JavaScript `

// Filename - pages/404.js

export default function Custom404() { return (

`

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

Custom 404 page (created using the above code)

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

**Reference: https://nextjs.org/docs/pages/building-your-application/routing/custom-error#404-page