Next.jsでWarning: Extra attributes from the serverが発生する問題ととりあえずの解決策

Next.jsで開発しているとコンソールに次のような警告が発生した。

これはサーバ側で生成したコンテンツとクライアント側で生成したコンテンツに異なっている場合に発生する。

今回は「サーバで生成したときはbody要素にclass属性なかったのになんか追加されてるぞ」ということらしい。

確認してみると見知らぬclass属性が勝手についていた。

原因

class名からしてChakra UIのカラーモードが原因っぽい。試しにカラーモードを無効にするためColorModeScriptを消してみると警告は出なくなった。

でもカラーモードは有効にしておきたい。公式サイトに載っている方法をそのまま利用してみても警告は出てしまう。

この問題はgithubのissuesにも挙がっていた。どうやら根本的解決策は今のところないらしい

Warning Extra attributes from the server class

解決策

警告は出てるものの動作に問題はない。それでも警告が表示されたままなのは嫌なので非表示にさせる。

今回はbody要素に勝手に属性が追加されるのが問題なので、bodyにsuppressHydrationWarningを付ける。

Next.jsのApp routerを利用している場合はlayout.tsxの中で設定する。

これでさっきの警告は消えたものの別の警告が出るようになった。

今度はhtml要素にdata-theme要素とstyle要素が勝手に付いてますよということらしい。

上と同じくhtmlにもsuppressHydrationWarningを付ける。

これで警告は出なくなった。

ただ、この方法は警告を非表示にさせているだけなので、根本的解決ができるないときの最終手段としたほうがよさそう。

原因がその他の場合

この警告が出るときはさまざまな原因がある。ブラウザの拡張機能を使っている場合にも頻繁に発生するらしい。

拡張機能の中には要素に自動的にクラス属性を付けたりするものもあるのでこの警告が発生する。

その場合は、開発環境のドメイン（localhostなど）で拡張機能を無効にすれば警告はでなくなるはず。

何が原因なのかは追加されているクラス名やdata属性名をみればヒントになるかもしれない。