Next.js エラーページをカスタマイズ

公式ドキュメント: https://nextjs.org/docs/advanced-features/custom-error-page

404ページ

page/404.tsxを作成せずに、page/ _error.tsxを設定すると下記の警告が表示される。
なお、存在しないURLにアクセスするとpage/ _error.tsxの内容が表示されている。

Warning: You have added a custom /_error page without a custom /404 page. This prevents the 404 page from being auto statically optimized.
See here for info: https://err.sh/next.js/custom-error-no-custom-404

page/404.tsxを追加することで、存在しないURLにアクセスした際に独自の404エラーページを表示できた。

pages/_error.jsを設定した場合の挙動

• getServerSidePropsで{notFound: true}を返した場合、_error.jsが表示される (pages/404.js が無い場合)
• getServerSidePropsで Errorをthrowした場合、_error.jsが表示される

下記のようにstatusCodeを指定した場合、デフォルトのエラーページが表示される。
-> pages/_error.jsを定義したからといって、 next/error が変更される訳では無い

import Error from 'next/error'

export default function Test() {
  return (
    <Error statusCode={500} />
  )
}

pages/500.jsを設定した場合の挙動
-> getServerSidePropsで Errorをthrowした場合、デフォルトのエラーページが表示される