【microCMS×Astro】APIで取得した日時を日本時間へ変換する方法

公開日時などが想定した時刻とずれる場合の対処法です。

基本的にフロントエンド側にて時刻の変換が必要です。

当記事はこちらの記事を参考に、astroでの具体的な記載方法をまとめています。

https://help.microcms.io/ja/knowledge/specification-of-utc-time

実装例

1.npmにてdayjsをインストール。

$ npm i -S dayjs

2. フロントマター（---で囲まれたエリア）に以下を記載する。

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

3.日付フォーマットの関数を定義する。

function formatDate(dateString: string): string {
  return dayjs.utc(dateString).tz("Asia/Tokyo").format("YYYY.MM.DD");
}

4.関数を適応し日付を出力する。

<p class="news-date">{formatDate(content.publishedAt)}</p>

さいごに

1回作っておけば他のプロジェクトなどにもそのまま流用できるのでおすすめです。