Next.jsのVercelでのデプロイ時のPrerendering Errorの対処法

nextjsで作成したアプリケーションをVercelでデプロイする際に、npm run buildの実行フェーズで以下のようなエラーが発生した。ローカルの開発サーバーでは発生しないエラーだった。

Error occurred prerendering page "/hoge".
Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'map' of undefined

該当箇所を調べたところComponentのpropsに設定したプロパティがundefinedになっていた。具体的には、props.hoge.map(...)という記述で、props.hogeがundefinedだった。

export default function Hoge(props) {
	return (
		<>
		{
                        props.hoge.map(...) // hogeがundefined
		}
		</>
	)
}

原因と対処法

エラーメッセージに含まれるURL（https://nextjs.org/docs/messages/prerender-error） にアクセスすると丁寧に対処法が書かれていた。

Make sure to move any non-pages out of the pages folder

pageではないのもをpagesのフォルダに入れるな、とのことだった。たしかに、エラーが生じていた関数はpageではないのに/pages以下に配置していた。

/pagesと同じ階層に/componentsという名称でディレクトリを作成し、該当の関数を移動してexportした後、pages側からimportすることによって解決した。

Next.jsはエラーメッセージに含まれるURLから公式のドキュメントにアクセスできる（内容もわりと充実している）ので、素直にドキュメントを読んで対処したら早く解決できそう。