日付をフォーマット

日付をフォーマットするために、「date-fns ライブラリ」を利用します！

date-fnsをインストール！

$ npm install date-fns --save

コンポーネントに date.js を追加します。

date.js

import { parseISO, format } from 'date-fns'

export default function Date({ dateString }) {
 const date = parseISO(dateString)
 return <time dateTime={dateString}>{format(date, 'yyyy.MM.dd')}</time>
}

「yyyy.MM.dd」というのが日付の書式です。ここだけ好みの書式に変更して、あとはそのままでいけます。


そして、日付をフォーマットしたいページ
当サイトですと、個別のブログ記事ページ（blog/[id].js）に追記します。

追加したコンポーネント（date.js）をインポート

import Date from "../../components/date"

Dateタグでフォーマットしたい日付部分を囲って

<Date dateString={blog.publishedAt} />

これでオッケー！