カスタムエラーページ

404 ページ

404 ページは頻繁にアクセスされる可能性があります。毎回のアクセスに対してサーバーサイドレンダリングを行うと、Next.js サーバーの負荷が増加します。これにより、コストの増加やユーザー体験の低下を招く可能性があります。

これらの問題を回避するため、Next.js は追加のファイルなしでデフォルトの静的 404 ページを提供します。

404 ページのカスタマイズ

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

pages/404.js

export default function Custom404() {
  return <h1>404 - ページが見つかりません</h1>
}

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

500 ページ

エラーページを毎回サーバーサイドレンダリングすると、エラー対応が複雑になります。Next.js はユーザーが迅速にエラー応答を受け取れるよう、追加ファイルなしでデフォルトの静的 500 ページを提供します。

500 ページのカスタマイズ

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

pages/500.js

export default function Custom500() {
  return <h1>500 - サーバー側でエラーが発生しました</h1>
}

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

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

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

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `サーバーで ${statusCode} エラーが発生しました`
        : 'クライアントでエラーが発生しました'}
    </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.js のスター数: {stars}</div>
}

Error コンポーネントは statusCode と共にテキストメッセージを渡すための title プロパティも受け取ります。

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

注意点

Error コンポーネントは現在、getStaticProps や getServerSideProps などの Next.js データフェッチングメソッドをサポートしていません。
_error は _app と同様に予約されたパス名です。_error はエラーページのカスタムレイアウトと動作を定義するために使用されます。ルーティング経由で直接アクセスしたり、カスタムサーバーでレンダリングしたりすると、/_error は 404 を表示します。