Next.js で dayjs を利用したい

実現したいこと

Next.js で dayjs を利用したいです

発生している問題・エラーメッセージ

Client Component で dayjs.format を呼び出すと hydration エラーが出ます
hydration エラーが出ないようにする方法はありますか?

Client Component であることは必須です

Unhandled Runtime Error Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: "2024/4/13 18:06:26:801" Client: "2024/4/13 18:06:27:019" See more info here: https://nextjs.org/docs/messages/react-hydration-error

該当のソースコード

TypeScript

1'use client';2 3import dayjs from 'dayjs';4 5export default function Page() {6 return <h1>{dayjs().format('YYYY/M/D HH:mm:ss:SSS')}</h1>;7}8

試したこと1

以下のようにコンポーネントを分離してみましたが効果はありませんでした
(Client Component以下はClient Componentなので当然の結果です)
https://stackblitz.com/edit/stackblitz-starters-khgkza?file=app%2Fpage.tsx

試したこと2

Material UIの NoSsr を利用してSSRされなくして解決できた。
しかし、強引なやり方な気がするので他の方法を探しています。

補足情報(FW/ツールのバージョンなど)

  • Next.js 14
  • DayJS 1.11.10

コメントを投稿

0 コメント