Open2

Custom Errors

あおけんあおけん

404 Page

404ページは頻繁にアクセスされる可能性がある。
アクセスのたびにエラーページをサーバーでレンダリングすると、
Next.jsサーバーの負荷が増加する。
その結果、コストが増加し、エクスペリエンスが低下する可能性がある。
上記の落とし穴を避けるため、Next.jsはデフォルトで静的な404ページを提供する。

Customizing The 404 Page

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

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

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

あおけんあおけん

500 Page

訪問のたびにエラーページをサーバーでレンダリングすると、
エラーへの対応が複雑になる。
ユーザーができるだけ早くエラーに対応できるように、
Next.jsはデフォルトで静的な500ページを提供している。

Customizing The 500 Page

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

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

ビルド時にデータを取得する必要がある場合は、
このページ内で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はproductionでのみ使用。
開発では、エラーの発生元を知るためにコールスタックとともにエラーが表示。

Reusing the built-in error page

組み込みのエラーページをレンダリングしたい場合は、Errorコンポーネントをインポート。

// pages/_error.js
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もプロパティとして受け取ります。

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

Caveats

その1

Errorは現在、getStaticPropsやgetServerSidePropsのような、
Next.jsのデータ取得メソッドをサポートしていない。

その2

_errorは、_appと同様、予約pathname。
_errorはエラーページのカスタマイズされたレイアウトと動作を定義するために使われる。
/_errorは、ルーティング経由で直接アクセスされた場合や、
カスタムサーバーでレンダリングされた場合に404をレンダリングします。