Menu

カスタムエラー

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 stars: {stars}</div>
}

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

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

注意点