NextJS provides built-in 404 page. what if you want to customize it? well, follow these steps, after going through these simple steps you will be able to customize your own 404 error Page in nextJS.

creating your own custom error 404 Page in nextJS is fairly simple. NextJS boilerplate code provides you a pages folder through which you can navigate different sections of your app, you just have to add 404.js file to it if it is not present.

you have to customize 404.js page for your 404 error and if your 404.js doesn't exist add one naming the same.

Here's how:

import { FaExclamationTriangle } from "react-icons/fa";
import Link from "next/link";
import Layout from "@/components/Layout";
import styles from "@/styles/404.module.css";

export default function PageNotFound() {
  return (
    <Layout title="Page Not Found">
      <div className={styles.error}>
        <h1>
          <FaExclamationTriangle /> 404
        </h1>
        <h3>sorry nothing in here</h3>
        <Link href="/">
          <a>Go Back to Home Page</a>
        </Link>
      </div>
    </Layout>
  );
}

For sugarcoating I have brought react icons package and my own stylings but you can write your own custom message only.

styles code:

.error {
  text-align: center;
  margin: 100px 0 200px;
}

.error h1 {
  font-size: 50px;
}

save your 404.js file and now if you enter any URL that doesn't exist in your NextJS application it will show your 404 error page.