How to Create 404 Error Page in Bootstrap ?

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

Last Updated : 22 Jul, 2024

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:

Custom 404 page in next.js — 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 (
        <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.

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/advanced-features/custom-error-page#404-page

How to Create 404 Error Page in Bootstrap ?

M

mycodenotein

Improve

Article Tags :

Similar Reads

Next.js Custom Error Page

Creating a custom error page in Next.js allows you to provide a better user experience when an error occurs, such as a 404 (Not Found) or a 500 (Server Error). Custom error pages can match your site's design and offer helpful information or navigation options. In this article, we will learn how to c

How to Create 404 Error Page in Bootstrap ?

Every website encounters errors sometimes, so it becomes important to show these errors in a presentable manner to the users. Creating a custom 404 error page using Bootstrap 5 can enhance the user experience when visitors encounter a page that doesnâ€™t exist. Below are the types of 404 Error Page we

How to Catch All Routes in Next.js ?

To catch all routes in Next.js, you create a dynamic route file using the catch-all segments syntax. This allows you to handle various routes dynamically, enhancing routing flexibility and application structure.Catch all routesTo catch all routes in next js, We willCreate a file named [...gfg].js in

How To Create Custom Error Handler Middleware in Express?

In ExpressJS there is a built-in class named CustomError which is basically used to create an error of your choice. in this article, we will see how with the use of this CustomError class we can create a custom error handler middleware in ExpressJS.What is a CustomError Handler?A custom error handle

How to create custom 404 page in CodeIgniter ?

We often see the 404 error page while using websites. This error page will encounter only when we navigate to a broken link. In CodeIgniter, it is possible to create a custom 404 page to change the look of the 404 page. So in this article, we will look into how to create the custom 404 error page.

How To Get Current Route In Next.js?

Next.js is a popular React framework that makes it easy to build server-side rendered and static web applications. One common task in web development is determining the current route or URL of the page. In Next.js, this can be done using the built-in useRouter hook. This article will guide you throu