post: 2023-07-14
INDEX ▶
Next.jsで本番のみ発生するUncaught Error: Minified React error #425の対応
エラー
いつのバージョンから発生したのかは定かではないけど、Next.js本番環境でエラーが発生するようになった。
調べていたところ、下記が参考になった。
Uncaught Error: Minified React error #425
エラーの内容
日付・タイムスタンプ等、がサーバで生成した値とクライアントで生成したものが異なる場合に出るエラーとのこと。
そもそもタイムゾーンがズレている場合もあるのでそれは修正しておく。
# 自分の場合はday.jsを使っていたので、タイムゾーンを設定したものを共通で使うようにした
# こんな感じのutilを作ってこれを各ページでロードして使うようにした
# util/day.ts
import dayjs from "dayjs"
import timezone from "dayjs/plugin/timezone"
dayjs.locale('ja')
dayjs.extend(timezone)
dayjs.tz.setDefault("Asia/Tokyo")
export default dayjs
が、エラーは解消されず。
自分のページだとタイムスタンプを表示している箇所はなく、年月日表示までしかしてないのでタイムゾーン修正したら解消されると思っていたので謎。
暫定対応
とりあえずエラーを出さない属性をつけてやると対応できるのでそちらで暫定対応を行った。
<div suppressHydrationWarning>{日付データ}</div>
これで一旦解消したので、謎部分については後で調べる。