DEV Community

Cover image for Custom 404 page on Next.js under a 1 minute
Abhay Prajapati
Abhay Prajapati

Posted on

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
Enter fullscreen mode Exit fullscreen mode

and make a react component,

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

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.

404 page

now your 404 page is live 🔴

Top comments (0)