DEV Community

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

Posted on

4 2

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)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay