JSS Next.jsサンプル アプリのエラー ページ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Next.jsアプリは 、カスタム エラー ページをサポートしています。JSS Next.jsサンプル アプリには、ステータス コード404と500のエラーに対するカスタム エラー ページの実装が含まれています。
404エラーページ
サンプルJSS Next.jsアプリには、ファイルsrc/pages/404.tsxで定義されているカスタム404ページが用意されており、次の場合にレンダリングされます。
-
Layout Serviceが特定のSitecoreパスに対して404ステータス コードで応答すると、ページpropsファクトリは ページ データ内のnotFoundプロパティを値trueで返します。
-
Next.js静的エクスポートを使用して本番環境用のJSS Next.jsアプリをビルドし、getStaticPaths関数によって提供されるルートの一覧にないルートをリクエストする場合。これは、fallback: false.
500エラーページ
サンプルJSS Next.jsアプリには、ファイルsrc/pages/500.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