フィールド作成

作成の仕方自体は、
カテゴリの作成方法
で、microCMSのコンテンツAPIにタグとかカテゴリとかを作成しておきます。

こんな感じです。

ブログ側のAPIスキーマに先ほど作成したカテゴリなりタグなりを参照フィールドとして指定したものを追加します。

こんな感じです。

ディレクトリ構成

ディレクトリ構成はこんな感じで作りました。

└── tags
│       ├── [tag]
│       │   └── page
│       │       └── [id].js
│       ├── [tag].js
│       └── index.js

/tags
がtag一覧ページです。本サイトヘッダーからTAGに行ってみてください。
/tags/[tag]
が特定タグがついている記事の一覧ページです。
/tags/[tag]/page/[id]
が特定タグがついている記事のページネーションのための実装です。

ページネーション実装はこちらの記事も参考にしてください。

実装のポイント

getStaticPathsでページネーション用のパスを作成する際に、ネストされた動的なルーティングを実装する部分で少し詰まりました。
出てきたエラー文:

Error: Extra keys returned from getStaticPaths in /tags/[tag]/page/[id] (resPaths) Expected: { paths: [], fallback: boolean } See here for more info: https://nextjs.org/docs/messages/invalid-getstaticpaths-value

結論、

export const getStaticPaths = async () => {
  const tags = await client.get({ endpoint: "tags", queries: { limit: 100 } });


  const resPaths = await Promise.all(
    tags.contents.map((tag) => {
      const result = client
        .get({
          endpoint: "blogs",
          queries: {
            filters: `tags[contains]${tag.id}`,
            limit: 100,
          },
        })
        .then(({ totalCount }) => {
          const range = (start, end) =>
            [...Array(end - start + 1)].map((_, i) => start + i);


          return range(1, Math.ceil(totalCount / 4)).map(
            (i) => `/tags/${tag.id}/page/${i}`
          );
        });
      return result;
    })
  );
  const paths = resPaths.flat();
  return { paths, fallback: false };
};

みたいな感じでやりました。
get /tags でtag全部をとり、tagをmapで回して一つの特定のtagに対してその特定のtagがついている記事をgetします。

ポイントは作成した配列をflat化している点です。

何もしない場合:

[
  [ { params: [Object] } ],
  [ { params: [Object] } ],
  [ { params: [Object] } ],
  [ { params: [Object] } ],
  [ { params: [Object] }, { params: [Object] } ],
  [ { params: [Object] }, { params: [Object] } ],
  [ { params: [Object] }, { params: [Object] } ]
]

となるので、以下の形にしなければいけないので、flat()で配列をflat化する。

[
  { params: { tag: 'a__qj7f004qi', id: 1 } },
  { params: { tag: '2e7y_miiq', id: 1 } },
  { params: { tag: 'pv74k4x3u5', id: 1 } },
  { params: { tag: 'nsppv8907xeo', id: 1 } },
  { params: { tag: 'pkcqsc-2qdz', id: 1 } },
  { params: { tag: 'pkcqsc-2qdz', id: 2 } },
  { params: { tag: 'e_ylg36dhaj', id: 1 } },
  { params: { tag: 'e_ylg36dhaj', id: 2 } },
  { params: { tag: 'n54oitv4eq', id: 1 } },
  { params: { tag: 'n54oitv4eq', id: 2 } }
]

参考リンク

Next.js: getStaticPaths for nested dynamic routes

Next.js + microCMSでカテゴリ一覧ページを作る

microCMS + Next.jsでJamstackブログを作ってみよう

アフィリエイトリンク