Custom Errors

404 Page

404 ページは非常に頻繁にアクセスされます。すべての訪問に対して error page を server レンダリングすると、Next.js server の負荷が増えます。これにより、コストが増加し、体験が遅くなる可能性があります。

上記の問題を避けるために、Next.js は追加ファイルを一切追加せずに、default で静的な 404 ページを提供します。

404 ページのカスタマイズ

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

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

Good to know: このページ内でgetStaticPropsを使用すると、build 時にデータをフェッチする必要がある場合に便利です。

500 Page

error page を毎回 server レンダリングすることは、error への対応に複雑性を加えます。ユーザーが error への Response をできるだけ速く取得できるように、Next.js は追加ファイルを追加せずに、default で静的な 500 ページを提供します。

500 ページのカスタマイズ

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

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

Good to know: このページ内で getStaticProps を使うことができます。 build 時にデータを fetch する必要がある場合に利用できます。

より高度な Error Page のカスタマイズ

500 エラーは、クライアント側と server-side の両方で、Error component によって処理されます。これを上書きしたい場合は、pages/_error.js ファイルを定義し、以下の code を追加してください：

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 内でのみ使用されます。development では、error が発生し、その error がどこから発生したのかを知るための stack を呼び出します。

組み込みの error page の再利用

組み込みの error page を render したい場合は、Error component をインポートすることで可能です：

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 component は、テキストの message と一緒にstatusCodeを渡したい場合、titleもプロパティとして受け取ります。

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

Caveats

• Errorは現在、Next.js のData Fetching methods、例えばgetStaticPropsや getServerSidePropsをサポートしていません。
• _errorは、_appと同様に、予約された pathname です。_errorは、error ページのカスタマイズされた Layout と振る舞いを定義するために使用されます。直接routingを通じてアクセスしたり、カスタム serverでレンダリングすると、/_errorは 404 を render します。