投稿日:2022/10/16 最終更新日:2022/10/16
Next.jsでMicroCMSのcreatedAt,updatedAt,publishedAt,revisedAtを省略表示する方法
問題内容
MicroCMSで作成した投稿を表示する際にAPIを叩きますが、その際に取得される情報の中に記事の作成日時、更新日時、公開日時、改定日時を取得することができます。
{
"id": "hoge",
"createdAt": "2022-10-012T01:33:10.986Z", // 記事の作成日時
"updatedAt": "2022-10-02T01:33:10.986Z", // 記事の更新日時
"publishedAt": "2022-10-01T01:33:10.986Z", // 記事の公開日時
"revisedAt": "2022-10-02T01:33:10.986Z", // 記事の改定日時
"title": "test",
"text": "<p>これはtestです</p>",
"thumbnail": {
"url": "https://images.microcms-assets.io/assets/hogehoge/fugafuga/test1.png",
"height": 200,
"width": 400
},
"category": []
}
それぞれの違いについては公式ドキュメントに公開されておりますのでご存じない方は参照してみてください。
その際に上記の日時をそのまま取得すると以下のような形式で取得されます。
「2022-10-012T01:33:10.986Z」
前半の「2022-10-012」は年月日なのが分かりますが、後半のは時間（「T01:33:10.986Z」）はいらないなというときの解決法です。
解決方法
解決方法は以下になります。
例）記事の作成日を取得する場合
new Date(publishedAt).toLocaleDateString()new Dateで新たな日付オブジェクトを作成します。
そして、toLocaleDateString関数を使用することで日時の日付部分のみを表示することができます。
publishedAtの部分はupdatedAtやpublishedAt、revisedAtに変更することで更新日時、公開日時、改定日時へアクセスすることが可能です。
