How to Create Custom Error Pages for Next Js

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.

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>
}