Error pages in the JSS Next.js sample app

Current version: 22.0

Next.js apps support custom error pages. The JSS Next.js sample app includes custom error page implementations for errors with the status codes 404 and 500.

The 404 error page

The sample JSS Next.js app provides a custom 404 page, defined in the file src/pages/404.tsx.

The custom error page renders when the page props factory returns the notFound property in the page data with the value true because the Layout Service responded with a 404 status code for a given item path.

The 500 error page

The sample JSS Next.js app provides a custom 500 page, defined in the file src/pages/_error.tsx.

Next.js handles 500 errors client-side and server-side. The 500 error page is rendered for all errors except 404 in production. In development, the application renders the error with the call stack.

Handling specific error codes in other pages

If you want to handle specific status codes and render the built-in error page on routes, you can import the Errorcomponent from the 500 error page.

For example:

RequestResponse

import Error from 'src/pages/_error';

const Page = ({ errorCode, text }) => {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }

  return <div>Content: {text}</div>
}

export default Page

Do you have some feedback for us?

If you have suggestions for improving this article,