Custom Errors

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.
To avoid the above pitfalls, Next.js provides a static 404 page by default without having to add any additional files.
The default 404 and 500 pages follow the operating system's color scheme via prefers-color-scheme and do not read an app-level theme. Because pages/404.js and pages/500.js render inside your custom App, providing your own files lets your global styles and theme apply.
To create a custom 404 page you can create a pages/404.js file. This file is statically generated at build time.
You can use getStaticProps inside this page if you need to fetch data at build time.
Server-rendering an error page for every visit adds complexity to responding to errors. To help users get responses to errors as fast as possible, Next.js provides a static 500 page by default without having to add any additional files.
To customize the 500 page you can create a pages/500.js file. This file is statically generated at build time.
You can use getStaticProps inside this page if you need to fetch data at build time.
500 errors are handled both client-side and server-side by the Error component. If you wish to override it, define the file pages/_error.js and add the following code:
pages/_error.js is only used in production. In development you’ll get an error with the call stack to know where the error originated from.
If you want to render the built-in error page you can by importing the Error component:
The Error component also takes title as a property if you want to pass in a text message along with a statusCode.
If you have a custom Error component be sure to import that one instead. next/error exports the default component used by Next.js.
Last updated July 10, 2026
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.