Custom 404 page on Next.js under a 1 minute

404 page is very crucial in production,

A 404 page may be accessed very often. Server-rendering an error page for every visit increases the load of the Next.js server. This can result in increased costs and slow experiences.

Creating custom 404 page.

simply move to pages components and make a new file

touch 404.js

and make a react component,

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

after making file and adding react component to it, add you details/ styling / even you can use

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

now your 404 page is live 🔴