⚠️

Error: Hydration failed because the initial UI does not ～を解決

2024/08/04に公開

以下のようなメッセージが出ていました。

Error: Hydration failed because the initial UI does not match what was rendered on the server.
In HTML, <div> cannot be a child of <html>.

日本語に翻訳すると

エラー: 初期 UI がサーバー上でレンダリングされたものと一致しないため、ハイドレーションは失敗しました。
HTML では、<div> を <html> の子にすることはできません。

htmlの子はheadとbodyだけなのに別のタグがあることが原因のようでした。以下のチートシートが便利です。
https://yoshikawaweb.com/element/

コードは次のようになっていました。原因はToasterですね。（shadcnuiを使用しています。）

    <html lang="ja">
      <body className={inter.className}>
        {children}
      </body>
      <Toaster />
    </html>

次のようにbodyの中に入れたら解決しました。

    <html lang="ja">
      <body className={inter.className}>
        {children}
        <Toaster />
      </body>
    </html>