---
title: "Error pages in the JSS Next.js sample app"
slug: "error-pages-in-the-jss-next-js-sample-app"
abstract: "Handling errors in the Next.js app with custom error page implementations"
---
# Error pages in the JSS Next.js sample app

Next.js apps support [custom error pages](https://nextjs.org/docs/advanced-features/custom-error-page). 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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps.html "Prerendering methods and data fetching strategies in JSS Next.js apps") 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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--exporting-a-jss-next-js-app-to-static-html-files-with-next-export.html "Walkthrough: Exporting a JSS Next.js app to static HTML files with next export"), and requesting a route that is missing from the list of routes provided by [the `getStaticPaths` function](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation). 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 `Error`component from the 500 error page.

For example:

```csharp
import Error from 'src/pages/_error';

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

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

export default Page

```