Next.jsの日付のフォーマットを整える

日付をフォーマットするために、date-fns ライブラリを使用します。まずはインストールします。

npm install date-fns

components/date.js ファイルに Date コンポーネントを作成します。

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>
}

blog/[id].js 内で、

まずは、先に作ったコンポーネントをインポートして、

ｉｍｐｏｒｔ　Ｄａｔｅ　ｆｒｏｍ　＇．．／．．／ｃｏｍｐｏｎｅｎｔｓ／ｄａｔｅ＇
（※なぜか上のコードをnoteで記入しようとすると、エラーが出て記入できないので、全角にて表示しています。）

もともと、{blog.publishedAt}　部分を
<Date>タグで囲って、<Date dateString={blog.publishedAt} />とします。