Q&ANext.jsで現在時刻を取得するプログラムを書くと、サーバーとクライアントで実行された時の秒数が違うためエラーが出ます。下記の場合だと、serverが37秒でクライアントが38秒です。下記がエラー文です。
Warning: Text content did not match. Server: "37" Client: "38"
下記がコードです
typescript
1import Head from 'next/head'; 2import { useState } from 'react'; 3 4const index = () => { 5 const now = new Date(); 6 const [hour, setHour] = useState(now.getHours()); 7 const [min, setMin] = useState(now.getMinutes()); 8 const [sec, setSec] = useState(now.getSeconds()); 9 setInterval(() => { 10 const now = new Date(); 11 setHour(now.getHours()); 12 setMin(now.getMinutes()); 13 setSec(now.getSeconds()); 14 }, 1000); 15 16 return ( 17 <> 18 <Head> 19 <title>Timer</title> 20 </Head> 21 <div>Timer</div> 22 <div> 23 {hour}時{min}分{sec}秒 24 </div> 25 </> 26 ); 27}; 28 29export default index;
改善方法は上記だけCSRにするか、クライアントとサーバーの取得時間を同じにするかだと思うのですが、自分なりに調べみたのですがやり方が分かりません。わかる方教えてもらえると嬉しいです。
回答1件
0
自己解決
Dynamic Import使ってCSRにしたらできました！Next.jxの公式に乗ってました。失礼しました！
参考
https://nextjs.org/docs/advanced-features/dynamic-import
投稿2021/03/29 12:16
総合スコア17
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。