かわらの雑記帳経緯
Next.jsでWebページ上へ日時をSSGで表示する処理を入れた際、ローカル環境では正常に表示できていたが、CloudFlarePagesへデプロイすると9時間ずれてしまう。
例: date-fnsで下記を表示させた場合
format(new Date('2023/12/29 09:28'), 'yyyy/MM/dd HH:mm')- ローカルで動作させた際の表示: 2023/12/29 09:28
- CloudFlare Pagesで動作させた際の表示: 2023/12/29 00:28
原因
恐らく、ビルド環境のタイムゾーン設定の影響。
ローカルはJST、CloudFlare PagesのパイプラインはUTCで動作しているため時刻がずれていると思われる。
対処
CloudFlarePagesのパイプライン側のタイムゾーン設定をJSTに変更する。
設定(Settings) → 環境変数(Environment variables)で下記を指定すればOK。
- 変数名(Variable name): TZ
- 値(Value): Asia/Tokyo
設定後、こんな感じの表示になるはず。
思ったこと
そもそも、SSGで日時を表示すること自体がよくなさそう。日本以外で日時を表示させたら日時がずれる、ってことだし。。
ビルド時にタイムゾーンを明記するか、閲覧環境に合わせて日時を変えるようにするのがいいんだろうなぁ。
