Error pages in the JSS Next.js sample app

Version:

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, and renders it in the following cases:

When the Layout Service responds with a 404 status code for a given Sitecore path, the page props factory returns the notFound property in the page data with the value true.
When using the Next.js static export to build the JSS Next.js app for production, and requesting a route that is missing from the list of routes provided by the getStaticPaths function. This can happen if using fallback: false.

The 500 error page

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.

Handling specific errors 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:

import Error from 'src/pages/_error';

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

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

export default Page

If you have suggestions for improving this article, let us know!