Next.jsでHydrationエラーが出た。

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Hydrationエラーとは、サーバーサイドレンダリングしたHTMLとブラウザレンダリングしたHTMLが一致していなくて、再度すべてブラウザレンダリングし直してるから無駄ですよ。ということらしい。

アプリケーションをレンダリングする際、事前にレンダリングされたReactツリー（SSR/SSG）と、Browserでの最初のレンダリング時にレンダリングされたReactツリーの間に違いがありました。最初のレンダリングは、React の機能である Hydration と呼ばれます。

これにより、React ツリーが DOM と同期しなくなり、予期しないコンテンツ/属性が存在することがあります。

DeepL訳：react-hydration-error | Next.js

要はパフォーマンス低下の恐れがあるよという警告。

エラー表示してくるので戸惑ったがReact18以降よりWarningからErrorに引き上げられたらしい。

2重LinkでもHydrationエラーになるらしい

エラーはわかったが、なかなか何が間違っているのか見当たらなかった。が、どうやら2重リンクがまずかったらしい。

<Link href="/blog/123">
    <a>
        <h3>タイトル</h3>
        <Link href="/blog/tag/456">
            <a>#タグ</a>
        </Link>
    </a>
</Link>

確かにNG行為だが、SSG/SSRとブラウザのレンダリング結果がどう異なるのかはわからない。