Posts Learn Components Snippets Categories Tags Tools About

How to Create Custom Error Pages for Next Js

Learn how to create and customize custom error pages for Next.js to show an intuitive error page that's more user friendly with your design

Created on Feb 12, 2022


To create custom error pages such as 404 and 500 in your Next.js web application, you can create a custom file named "404.js" as well as "500.js" inside the "pages/" directory.
  • 404 => 404.js
  • 500 => 500.js
By having these custom files, Next.js will automatically render and show this page when 404 / 500 errors occur within your web application.

Next.js 404 Code Example

For the 404 error codes, you can have the "404.js" page export like the following. Do note that you can customize it however you want it to be.
// pages/404.js

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

Next.js 500 Code Example

For 500 error codes, it's the same as 404 and you can refer the code example below.
// pages/500.js

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to Create Custom Error Pages for Next Js