コンテンツを公開した年ごとのアーカイブを作成する方法は？

microCMSではコンテンツ作成時に、公開日時(publishedAt)が自動的に付与されます。
こちらの値を利用することによって、公開年ごとのアーカイブページを作成することができます。

実装にあたっては、
(1)任意の公開年のコンテンツ一覧を表示するページ
(2)公開年の一覧を表示するページ
の2つが必要になりますので、順番にご説明します。
（※以下の実装例は、microcms-js-sdkの利用を想定しております。）

(1)任意の公開年のコンテンツを取得する方法

APIにリクエストしていただく際に、"filters"というパラメータを付与することによって、フィールドの値による絞り込みを行うことができます。

▼2020年のコンテンツを取得する

client
  .get({
    endpoint: 'blog',
    queries: {
      fields: 'id,title,createdAt',
      filters: 'createdAt[contains]2020',
      limit: 100
    }
  })

このリクエストのレスポンスとして、任意の公開年のコンテンツ一覧が返却されますので、フロントエンド側の処理でコンテンツへのリンク一覧を作成できます。

ページネーションが必要となる場合は、以下の記事をあわせてご参照ください。
NuxtのJamstack構成におけるページングの実装
Next.js(SSG)でページネーションを実装してみよう

(2)公開年の一覧を作成する方法

カテゴリやタグの一覧を作成する場合は、APIで一覧を取得できるので、簡単に実装を行うことができます。
ただ今回のようなコンテンツ公開年の一覧を取得したい場合は、そのままAPIで取得することができません。

方法はいくつか考えられますが、今回はコンテンツの中で一番古いものと新しいものをそれぞれ取得し、間を補完する方法で一覧を作成してみます。

▼一番新しい公開年を取得

const newestPost = await client
  .get({
    endpoint: 'blog',
    queries: {fields: 'createdAt', orders: '-createdAt', limit: 1}
  })

const newestPostYear = Number(newestPost.contents[0].createdAt.substr(0,4))

▼一番古い公開年を取得

const oldestPost = await client
   .get({
     endpoint: 'blog',
     queries: {fields: 'createdAt', orders: 'createdAt', limit: 1}
})

const oldestPostYear = Number(oldestPost.contents[0].createdAt.substr(0,4))

▼公開年の配列を生成する（間を補完）

const createYearsArray = (start, end) =>

[...Array(end - start + 1)].map((_, i) => start + i)

const postYears = createYearsArray(oldestPostYear, newestPostYear)

このような形で公開年の一覧が配列で取得できますので、こちらから個別の年度ページへのリンクを作成することができます。