Zenn
Open5

React-Calendarを使ったらHydration failed エラー出た

hydration
reactcalendar
still_chair_still_chair_

Next.js で React-Calendar を使ったら、エラーメッセージが表示された。

エラーは以下の3つ。
Error: Text content does not match server-rendered HTML.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Hydration のエラーっぽい

コードはこんな感じ

import Calendar from "react-calendar";

const CalendarWrapper = () => {
  return (
    <div>
      <Calendar />
    </div>
  );
};

export default CalendarWrapper;
still_chair_still_chair_

Text content does not match server-rendered HTML.
こっちのエラーメッセージで調べて、以下の記事を見つけた。

ReactでDateに関してWarning: XXX did not match.になるとき

サーバサイド(SSR/SSG)とクライアントサイド(日本時間のブラウザによるレンダリング)でタイムゾーンが異なることにより表示される日付が変わってしまうため、レンダリング結果に差が出てしまいHydrationエラーになるっぽい。

still_chair_still_chair_

React-Calendarはデフォルトで特にlocaleを指定しなくても日本の表示として表示される。
おそらく表示が日本の表示になるのは、日本時間のブラウザによるもの。

つまり、localeを明示的に入れれば解決する。

import Calendar from "react-calendar";

const CalendarWrapper = () => {
  return (
    <div>
      <Calendar 
          locale="ja-JP"
       />
    </div>
  );
};

export default CalendarWrapper;
gontagonta

こちらを参考に対処できました！ありがとうございます！