JSS Next.jsサンプル・アプリケーションのエラー・ページ

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Next.jsアプリはカスタムエラーページをサポートしています。JSS Next.jsサンプルアプリには、ステータスコードが404と500のエラーに対するカスタムエラーページの実装が含まれています。

404エラーページ

サンプルJSS Next.jsアプリには、ファイルsrc/pages/404.tsxで定義されているカスタム404ページが用意されており、次の場合にレンダリングされます。

レイアウトサービスが特定のSitecoreパスに対して404ステータスコードで応答すると、ページpropsファクトリはページデータ内のnotFoundプロパティを値trueで返します。
Next.js静的エクスポートを使用して本番環境用のJSS Next.jsアプリをビルドし、getStaticPaths関数によって提供されるルートのリストにないルートをリクエストする場合。これは、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

この記事を改善するための提案がある場合は、お知らせください!