Next.js + TypescriptでミニCMSを作る（5. UTCと日本時間の時差調整）

Prismaのタイムゾーン問題に対応します。

前回の続きです。
初回はこちらです。

PrismaはデフォルトでUTC時間のデータを保存します。それに合わせて、DBを立てているDockerのタイムゾーンもUTCで設定しています。
日本時間はUTC+9時間ですので、日本時間でX日0:00になるようにUTCを調整してからDB保存をする方針を取ろうと思います。

例）
日本時間 2024/1/1 のデータを保存したい場合、UTC 2023/12/31 15:00のデータとして保存

※今後、未来日付の記事を投稿することで予約投稿となる機能をつけたいので、日付は数字や文字列ではなくDATE型で持っておきたいという意図があります。

テストデータの日付設定

具体的にDB保存時にどうやって時間を調節するかは、レビュー投稿機能を作るときに考えるとして、とりあえず今は投稿されたすべてのレビュー記事は、UTCでは指定日付の前日15:00として登録されるという前提で進めます。
なので、テストデータを調整しましょう。

フロントで表示されてほしい日付は、以下のとおりです。

1. 2024/1/1
2. 2024/7/1
3. 2024/10/31

フロントエンドでの日付の表示問題

しかし、この状態でNext.jsのフロント画面を見てみると、私のいる環境（中央ヨーロッパ）ではこんな感じになります。

日付が一日遡っています。どういうことかといいますと・・・

console.log()で表示している日付（review.articleDate）を確認してみました。
日付がすべて、中央ヨーロッパとなっており、日本との時差は7～8時間になってしまいました。日付が変わるにはUTCとの時差が足りない。
これ、サーバーが日本でブラウザも日本だったら多分気付けないんですけど、Next.jsのクライアントコンポーネントはブラウザでレンダリングされるので、時間もブラウザに準拠して表示されてしまうわけです。
（そもそも私のローカル環境ではサーバも中央ヨーロッパロケールになっちゃうんですけど・・・）

そうすると、例えばクライアントが海外出張中にこの管理画面を見ると、日付が全部狂っていて大問題・・・となってしまう可能性があります。

表示時間を日本時間に合わせる

UTCで登録した日時はそのままに、どの地域で管理画面を見ても日本時間に合わせて日付が表示されるよう、日付表示を調整します。

ReviewCard.tsx

//中略

    {/* DATE */}
    <div>
        {review.articleDate
            ? (
+                <p className="memo">
+                    {review.articleDate.toLocaleDateString(
+                        'ja-JP', {
+                            timeZone: 'Asia/Tokyo',
+                            year: 'numeric',
+                            month: 'long',
+                            day: 'numeric',
+                        }
+                    )}
+                </p>

                        
-                <p className="memo">{review.articleDate
-                    ?.getFullYear()}年 {review.articleDate
-                    ? review.articleDate
-                        ?.getMonth() + 1
-                        : ""}月 {review.articleDate
-                    ?.getDate()}日</p>
            )
            : ""}

    </div>

//中略

Date.toLocaleDateString()を使うことで、日付の表示形式とタイムゾーンを日本に設定します。
これで複雑な時差計算をしなくとも、日本に合わせて表示されます。年月日の表記もあわせてstring型で返してくれます。便利！

次回

レビュー一覧画面の、削除ボタン（ゴミ箱マーク）の機能を実装していきます。