コンテンツへスキップ
アプリケーションの構築ルーティングカスタムエラー

カスタムエラー

404ページ

404ページは非常に頻繁にアクセスされる可能性があります。アクセスごとにエラーページをサーバーレンダリングすると、Next.jsサーバーの負荷が増加します。これにより、コストが増大し、エクスペリエンスが遅くなる可能性があります。

上記の落とし穴を避けるため、Next.jsはデフォルトで静的な404ページを提供しており、追加のファイルを用意する必要はありません。

404ページのカスタマイズ

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

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

知っておくと良いこと: ビルド時にデータをフェッチする必要がある場合は、このページ内で`getStaticProps`を使用できます。

500ページ

アクセスごとにエラーページをサーバーレンダリングすることは、エラーへの対応を複雑にします。ユーザーができるだけ早くエラーへの応答を得られるように、Next.jsはデフォルトで静的な500ページを提供しており、追加のファイルを用意する必要はありません。

500ページのカスタマイズ

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

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

知っておくと良いこと: ビルド時にデータをフェッチする必要がある場合は、このページ内で`getStaticProps`を使用できます。

より高度なエラーページのカスタマイズ

500エラーは、`Error`コンポーネントによってクライアントサイドとサーバーサイドの両方で処理されます。これを上書きしたい場合は、`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`は本番環境でのみ使用されます。開発環境では、エラーがどこで発生したかを特定できるように、コールスタック付きのエラーが表示されます。

組み込みエラーページの再利用

組み込みのエラーページをレンダリングしたい場合は、`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.status
  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>
}

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

カスタム`Error`コンポーネントがある場合は、代わりにそちらをインポートしてください。`next/error`はNext.jsによって使用されるデフォルトのコンポーネントをエクスポートします。

注意事項