📝

Next.jsで「Error: Hydration failed」が発生

に公開
Next.js
tech

Next.jsで「Error: Hydration failed because the initial UI does not match what was rendered on the server.」が発生したので解決する

Text content does not match server-rendered HTML

解決方法

HTMLの構造を見直してください。
私の場合は、ReactのLinkコンポーネントを入れ子にしたことで発生しました。

<Link href="/" className="col mb-5 link" key={post.id}>
    <div className="card h-100">
        <img className="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
        <div className="card-body p-4">
            <div className="text-center">
                <h5 className="fw-bolder"><Text text={post.properties.Name.title} /></h5>
                <div className="d-flex justify-content-center small text-warning mb-2">
                    <div className="bi-star-fill"></div>
                    <div className="bi-star-fill"></div>
                    <div className="bi-star-fill"></div>
                    <div className="bi-star-fill"></div>
                    <div className="bi-star-fill"></div>
                </div>
                {date}
            </div>
        </div>
        <div className="card-footer p-4 pt-0 border-top-0 bg-transparent">
            <div className="text-center">
            <Link className="btn btn-outline-dark mt-auto link"  href={`/blog/detail/${post.id}/`}>記事を読む</Link>
            </div>
        </div>
    </div>
</Link>

Linkコンポーネントは実際のDOMを見るとaタグになっているので、aタグ配下にaタグが配置されたことになります。
HTMLのコンテンツモデルとして、それは許可されていません。
参考記事

他にpタグの中にdivタグを入れたりしても発生します。

HTMLのコンテンツモデルを守る必要がある、ということです。

原因

ReactではvalidateDOMNestingという警告が出るようですが、Next.jsが「サーバーが返すHTMLとクライアントが作成するHTMLが一致しない」と判断し、Hydrationに失敗していることがエラーの原因です。

GitHubで編集を提案

Discussion