Vercel SSRはデフォルトでTimezoneがUTCになるので注意

Astroで遊んでいたら、Vercel(SSR)でday.jsでパースした日付が少しだけ前の時間になっていたので「ああ、こらタイムゾーンがおかしいでんな」と思い、修正しました。

Astroは良いです。Astroは公式でVercelのSSRに対応しています。Astroの良さについては、またどこかで機会があれば紹介したいと思います。

day.jsでタイムゾーンを指定してあげる

original source(old)

index.astro

---
import dayjs from dayjs
dayjs.locals('ja') // Set locale Japan to display japanese date

const response = await fetch(`https://somethingapi.example.com/`)
const data = await response.json()
const pubDate = data.pubDate
---
<time>{dayjs(pubDate).format('YYYY年M月D日(ddd) HH:mm'}</time>

↑これだと、日本でローカル開発している分には問題ないのですが、Vercel(SSR)にアップすると、9時間前の時刻で表示されます。

modified source(new)

index.astro

---
import dayjs from dayjs
+import utc from 'dayjs/plugin/utc' // Add
+import timezone from 'dayjs/plugin/timezone' // Add
dayjs.locals('ja') // Set locale Japan to display japanese date
+dayjs.extend(utc) // Add
+dayjs.extend(timezone) // Add

const response = await fetch(`https://somethingapi.example.com/`)
const data = await response.json()
const pubDate = data.pubDate
---
-<time>{dayjs(pubDate).format('YYYY年M月D日(ddd) HH:mm'}</time>
+<time>{dayjs(pubDate).tz('Asia/Tokyo').format('YYYY年M月D日(ddd) HH:mm'}</time><!-- Modified -->

↑これで正しく表示されました！

参考：Day.jsの.tz.setDefault()が動かないと思ったけど使い方が間違ってただけだった

余談

早くシンタックスハイライトが、astroファイル記法に対応するといいなー