Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <p>. See more info here: https://nextjs.org/docs/messages/react-hydration-error

概要

Next.jsのv13へバージョンアップ時、pタグでdivタグをネスとしていたことが原因で発生。pタグをdivタグに変更して改善。

エラーメッセージ

Error: Hydration failed because the initial UI does not match what was rendered on the server.   
Warning: Expected server HTML to contain a matching <div> in <p>.   
See more info here: https://nextjs.org/docs/messages/react-hydration-error

エラーの説明

このエラーは「React Hydration Error」と呼ばれ、Next.jsのサーバーサイドレンダリング(SSR)とクライアントサイドのReactが同期しない場合に発生します。

具体的には、サーバー上でレンダリングされたHTMLが、
クライアント上のReactによるレンダリングと一致しない場合にこのエラーが発生します。