【Next.js和訳】Advanced Features/Custom Error Page

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Advanced Features/Custom Error Pageの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Custom Error Page

404 ページ | 404 Page

404 ページは非常に頻繁にアクセスされる可能性があります。

アクセスがあるたびにエラーページをサーバーレンダリングすることは、Next.js のサーバーの負荷を高めます。

その結果、コストが増大したり、体感速度が低下したりします。

上記のような落とし穴を避けるために、Next.js では追加のファイルを追加することなく、デフォルトで静的な 404 ページを提供しています。

404 ページのカスタマイズ | Customizing The 404 Page

カスタム 404 ページを作成するには、pages/404.jsファイルを作成します。

このファイルは、ビルド時に静的に生成されます。

pages/404.js

export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

Note
ビルド時にデータを取得する必要がある場合は、このページ内でgetStaticPropsを使用することができます。

500 ページ | 500 Page

ユーザーがアクセスするたびにエラーページをサーバーでレンダリングすると、エラー対応が複雑になります。

Next.js では、ユーザーができるだけ早くエラーへの対応ができるように、ファイルを追加することなく、デフォルトで静的な 500 ページを提供しています。

pages/500.js

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

500 ページのカスタマイズ | Customizing The 500 Page

500 ページをカスタマイズするには、pages/500.jsファイルを作成します。このファイルは、ビルド時に静的に生成されます。

pages/500.js

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

Note
ビルド時にデータを取得する必要がある場合は、このページ内でgetStaticPropsを使用することができます。

より高度なエラーページのカスタマイズ | More Advanced Error Page Customizing

500 エラーは、Errorコンポーネントによって、クライアントサイドとサーバーサイドの両方で処理されます。これをオーバーライドしたい場合は、pages/_error.jsというファイルを定義し、以下のコードを追加します。

pages/_error.js

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}
export default Error

pages/_error.jsは本番環境でのみ使用します。
開発環境では、エラーがどこから発生したのかを知るために、コールスタックでエラーを表示します。

組み込みエラーページの再利用 | Reusing the built-in error page

ビルトインのエラーページを表示させたい場合は、Errorコンポーネントをインポートします。

import Error from "next/error"
export async function getServerSideProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js")
  const errorCode = res.ok ? false : res.statusCode
  const json = await res.json()
  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}
export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }
  return <div>Next stars: {stars}</div>
}

また、statusCodeと一緒にテキストメッセージを渡したい場合には、Errorコンポーネントにtitleをプロパティとして渡します。

カスタムの Error コンポーネントがある場合は、代わりにそちらをインポートしてください。

next/error は、Next.js が使用するデフォルトのコンポーネントをエクスポートします。