Text content did not match.エラー
Text content did not match.エラーが出たのでその解決法を載せておきます。
根本的な解決になっているとは思えませんが、どちらかというとNextJS側に対応してもらったほうがいいような問題なので、ひとまずの対処法としてご紹介いたしますね。
原因
このエラーの原因はサーバーサイドでレンダリングしたものとクライアントサイドでレンダリングした表示に違いがあると起こるエラーです。
例えばですが、表示言語をロケールによって分けている場合やユーザーの情報を表示する様な場所があると、サーバーサイトでレンダリングした時と情報が違うのでこのエラーが出ますね。
開発環境のみで表示されるエラーです。
現実問題エラーは出ていても問題ないのですが、気になるので直したいですよね。
簡単に治せるので以下にエラーの解決法を載せておきます。
解決法
解決法は
suppressHydrationWarning
これをタグの属性としてつけるだけです。
<h1 suppressHydrationWarning>{hoge}</h1>こんな感じですね。
私はi18nを使っていて起きたのですが、これはできればNextJS側に対処していただきたいところですねw
最後まで見てくれてありがとうございました！
コメント