Error occurred prerendering pageでデプロイがコケる

概要

Next.jsをVercelにデプロイしようとしたら、開発環境では出現しなかったエラーによってコケる。

出現したエラー

Error occurred prerendering page "/logout". Read more: https://nextjs.org/docs/messages/prerender-error

検索すると、幾つかStackOverflowで同じエラーに遭っている人たちがいたんだけど、その全てが「505、404エラーページ」を作成したり、APIのデータ取得時にgetStaticPropsを使おうとして成約に引っかかっているなどのパターンが主だった。

同じエラーでありながら、全く異なるページで発生していたので該当しないのではとは思いつつ、そのエラー解決方法を試してみると問題なく動くようになったので共有する。

解決した方法

エラーページで悩んでいた人たちが解決した方法は全てのエラーを受けるpages/_error.jsを作る事だった。

参考：https://github.com/vercel/next.js/issues/23128

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

TypeScriptで記載する

僕の場合TypeScriptで作っていたので、型を付け直した。

import { NextPage, NextPageContext } from 'next'
import Error from 'next/error'
interface Props {
  statusCode?: number
}

const ErrorPage: NextPage<Props> = ({ statusCode }) => {
  return statusCode ? (
    <Error statusCode={statusCode}></Error>
  ) : (
    <p>An error occurred on client</p>
  )
}

ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default ErrorPage

まとめ

デプロイし直すと問題なくデプロイが完了した。
日本語版ドキュメントを確認すると、

pages/_error.jsは本番環境でのみ使われます。開発時ではエラーがどこから発生したのかを知るためのコールスタックでエラーを取得します。

と記載されているので、本番環境構築する際には必ず作っておいた方がいいのかもしれない。