---
title: "JSS Next.jsサンプルアプリのエラーページ"
slug: "error-pages-in-the-jss-next-js-sample-app"
abstract: "カスタムエラーページ実装によるNext.jsアプリでのエラー処理"
---
# JSS Next.jsサンプルアプリのエラーページ

Next.jsアプリは [カスタムエラーページ](https://nextjs.org/docs/advanced-features/custom-error-page)をサポートしています。JSS Next.jsサンプルアプリには、ステータスコード404と500のエラーに対するカスタムエラーページの実装が含まれています。

## 404エラーページ

サンプルJSS Next.jsアプリは、ファイルsrc/pages/404.tsxで定義されたカスタム404ページを提供し、以下の場合にレンダリングします。

-   レイアウトサービスが特定のSitecoreパスに対して404ステータスコードを返すと、 [ページプロップファクトリーは](https://doc.sitecore.com/xp/ja/developers/hd/19/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") ページデータ内の notFound プロパティを返し、値 trueを返します。
-   [Next.js静的エクスポートを使ってJSS Next.jsアプリを本番環境で構築](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--export-a-jss-next-js-app-to-static-html-files-with-next-export.html "Walkthrough: Export a JSS Next.js app to static HTML files with next export")し、[getStaticPaths関数](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation)が提供するルートリストに欠けているルートをリクエストする際に、これはfallback: false.

## 500エラーページ

サンプルJSS Next.jsアプリは、ファイルsrc/pages/\_error.tsxで定義されたカスタム500ページを提供します。

Next.jsはクライアント側とサーバー側で500エラーを処理します。500エラーページは、本番環境で404を除くすべてのエラーに対してレンダリングされます。開発段階では、アプリケーションは呼び出しスタックでエラーをレンダリングします。

## 他のページで特定のエラーコードの処理

特定のステータスコードを処理し、ルートの組み込みエラーページをレンダリングしたい場合は、500エラーページからErrorコンポーネントをインポートできます。

例えば:

import Error from 'src/pages/\_error';

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

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

export default Page