---
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`.

There's also the `_error.tsx` template that acts as a fallback for rendering errors or client-side exceptions not handled by the above. This file must be edited manually in code.

> [!note]
> Only the `404.tsx` and `500.tsx` templates are integrated with Sitecore’s Content Editor. The `_error.tsx` page is a standard Next.js file and requires manual code changes for customization.

## 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](https://doc.sitecore.com/sai/en/developers/jss/215/jss-sai/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` 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/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 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 `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

```