Error pages in the JSS Next.js sample app

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 sample JSS Next.js app provides a custom 500 page, defined in the file src/pages/500.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.

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:

import Error from 'src/pages/_error';

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

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

export default Page