<p>新たにカテゴリページを追加したので、API作成からNext.jsへの反映までを記事にまとめました。</p><p><br></p><p>▼変更前・変更後</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e054d23c5cdb496bbc1d4d3855bc8c0d/category.png" alt="" width="1000" height="476"></p><ul><li>カテゴリアーカイブ一覧の作成</li><li>カテゴリのサイドバーを追加</li></ul>

<h2 id="h9fbfbdfa42">microCMSのAPI設定</h2><h3 id="h617c224214">カテゴリ用のAPIを作成</h3><p>作成したAPIスキーマのフィールドは以下の通り</p><ul><li>タイトル</li><li>スラッグ</li></ul><p><br></p><p>両フィールドとも必須設定。</p><p>スラッグは、カテゴリアーカイブURLにも使用するため重複しないようにユニーク設定を有効にしました。</p><p><br></p><blockquote>重複を許可しない（ユニーク）<br>他のコンテンツで同じ値がある場合にはコンテンツを保存できなくなります。1つのAPIに対して最大で5つのフィールドに設定が可能です。</blockquote><p><br></p><h3 id="h3c014f255c">記事APIのAPIスキーマにカテゴリのフィールドを追加</h3><p>種類 - 複数コンテンツ参照を選択。</p><p><s>このままでは記事作成画面でカテゴリを選択すると参照元のコンテンツIDが登録・表示され、何のカテゴリを選択したのかわからなくなります。</s></p><p><s>種類を選択したあとは、詳細で一覧画面に表示する項目を「タイトル」に変更することをおすすめします。</s></p><p><br></p><p>記事にカテゴリを紐づけてmicroCMSの設定は完了です。</p><h3 id="hcf83e1357e"><br></h3>

<h2 id="h0ed606a662">Next.jsにカテゴリを表示</h2><h3 id="hb3bea170cb"><strong>追加したフォルダ・ファイル</strong></h3><p>もともと作成していたファイルは除き、カテゴリ情報を追加・表示するために追加したフォルダ・ファイルの一覧です。</p>

📁src
├ 📁api
│└ 📁cateogry
│　└ index.ts
├ 📁components
│　└ CategoryList.tsx
├ 📁pages
│└ 📁category
│　├ 📁[slug]
│　│　└ index.tsx
│　├ 📁page
│　│　└ [num].tsx
├ 📁types
│　└ category.ts
└ 📁utils
  　└ fetchCategory.ts

<h3 id="h1a7737a701">APIクライアントの作成</h3><p>microCMS公式ブログでも紹介されているaspidaでカテゴリ用のAPIクライアントを作成します。</p><p>複数ページで読み込めるように使用するため以下のファイルで</p><p><br></p><p>参考：<a href="https://blog.microcms.io/how-to-use-aspida" target="_blank" rel="noopener noreferrer">Aspida + microcms-js-sdkを使った型安全なAPI開発</a></p>

// api/content/index.ts
import { MicroCMSListResponse, MicroCMSQueries } from 'microcms-js-sdk';
import { Category } from '@/types/category';

export type Methods = {
  get: {
    query?: MicroCMSQueries,
    resBody: MicroCMSListResponse<Category>
  }
}

<h3 id="h3339f7c956">カテゴリ一覧を作る</h3><ul><li>カテゴリを全件取得（件数が多くないので一旦limit:300で取得）</li><li>カテゴリのスラッグフィールドをページURLに使用するのでフォルダ名を[slug]とする</li><li>2ページ目以降はpageフォルダに[num].tsxを作成</li></ul>

import { client } from "@/utils/client"

export const fetchCategories = () => {
  const categories = client.category.$get({
    query: {
      offset: 0,
      limit: 300,
    },
  });
  return categories;
};

import { fetchCategories } from "@/utils/fetchCategory";
//略
export const getStaticPaths: GetStaticPaths = async () => {
  const data = await fetchCategories();
  const paths = data.contents.map((content) => `/category/${content.slug}`);
  return { paths, fallback: false };
};
export const getStaticProps: GetStaticProps = async (context) => {
  const slug = context.params?.slug;
  const categories = await fetchCategories();
  const filterCategories = await client.category.$get({
    query: {
      filters: `slug[equals]${slug}`,
    },
  });
  const category = filterCategories.contents[0];
  const data = await client.blog.$get({
    query: {
      limit: BLOG_POSTS_PER_PAGE,
      filters: `category[contains]${category.id}`,
    },
  });
  return {
    props: {
      category,
      categories: categories.contents,
      postsData: data.contents,
      totalCount: data.totalCount,
      offset: data.offset,
    },
  };
};
//略

<p>カテゴリのスラッグがイコールの場合・・としてしまいそうだが、<code>category[equals]${category.slug}</code>では取得できない。</p><p> </p><p><code>filters: category[contains]${category.id}</code></p><p>記事対してカテゴリを「複数のコンテンツ参照」で紐づけているためフィルタリング機能で取得する</p><p><br></p><p><strong>category</strong>（<u>記事のカテゴリフィールド</u>）<strong>[contains]</strong>（<u>絞り込む</u>）<strong>${category.id}</strong>（<u>カテゴリのコンテンツID</u>）</p>

<h3 id="h489a66bcb4">２ページ目以降の一覧を作る</h3>

export const getStaticPaths: GetStaticPaths = async () => {
  const categories = await fetchCategories();
  const resPaths = await Promise.all(
    categories.contents.map((category) => {
      const result = client.blog
        .$get({
          query: {
            offset: BLOG_POSTS_PER_PAGE,
            limit: 300,
            filters: `category[contains]${category.id}`,
          },
        })
        .then(({ totalCount }) => {
          if (totalCount <= BLOG_POSTS_PER_PAGE) return [];
          const range = (start: number, end: number) =>
            [...Array(end - start + 1)].map((_, i) => start + i);
          return range(2, Math.ceil(totalCount / BLOG_POSTS_PER_PAGE)).map(
            (i) => `/category/${category.slug}/page/${i}`
          );
        });
      return result;
    })
  );
  const paths = resPaths.flat();
  return {
    paths,
    fallback: false,
  };
};

<pre><code>offset: BLOG_POSTS_PER_PAGE,</code></pre><p>１ページ目は、src/pages/category/[slug]/index.tsx で表示しているので記事の開始位置を表示件数分ずらす</p><p><br></p><pre><code>if (totalCount &lt;= BLOG_POSTS_PER_PAGE) return [];</code></pre><p>１ページあたりの表示件数より記事数が少ない場合は、空配列を返す</p><p><br></p><pre><code>&nbsp;return range(2, Math.ceil(totalCount / BLOG_POSTS_PER_PAGE)).map(</code></pre><p>１ページ目はpathsに含めないためrangeのstart=2とする</p><p><br></p><p>参考：<a href="https://blog.hpfull.jp/nextjs-xmicrocms-tag/" target="_blank" rel="noopener noreferrer">Next.js×microCMSでタグ機能を作成する！[ネストされた動的なルーティング][getStaticPaths]</a></p><p><br></p><h3 id="hd996cb9bdd">pathsの中が知りたい・・</h3><pre><code>console.log(paths)</code></pre><p><br></p><p>Google Chromeデベロッパーツール＞コンソールでは確認できません。</p><p><br></p><blockquote>getStaticPaths will only run during build in production, it will not be called during runtime.</blockquote><p><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching/get-static-paths" target="_blank" rel="noopener noreferrer">Next.jsドキュメント</a></p><p><br></p><p>公式ドキュメントで紹介されているツールかVScodeのターミナルで中身が確認できます。</p><p><br></p><p>npm run dev で実行し、該当ページにアクセスするとVSCodeのターミナルにpathsの値が表示されます。</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/a138ccc6fe5f49ddbb1fd5e4678e9775/rapture_20230625180816.png" alt="" width="675" height="131"></p>

<h2 id="h054e36b801">各カテゴリ一覧へのリンクボタン（サイドバー）を作って各ページで読み込む</h2>

import { Content } from "@/api/types";
import Link from "next/link";
import styles from "./CategoryList.module.scss";
import clsx from "clsx";

type CategoryListProp = {
  categories?: Content[];
  currentSlug?: string;
};
export const CategoryList = ({ categories, currentSlug }: CategoryListProp) => {
  return (
    <div className={styles.wrap}>
      <p className={styles.head}>Category</p>
      <ul className={styles.list}>
        {categories &&
          categories.map((category, index) => {
            return (
              <li
                key={index}
                className={clsx(
                  styles.item,
                  currentSlug === category.slug && styles.current
                )}
              >
                <Link
                  href={`/category/${category.slug}/`}
                  className={styles.link}
                >
                  {category.title}
                </Link>
              </li>
            );
          })}
      </ul>
    </div>
  );
};

<p>作成したCategoryListコンポーネントを各ページに読み込む</p>

<CategoryList categories={categories} />

//カテゴリ一覧にはカレントページのslug情報を渡す
<CategoryList categories={categories} currentSlug={category.slug} />


microCMSにカテゴリAPIを作成しカテゴリ一覧ページとカテゴリ一覧ボタンのサイドバーを表示する

<p>microCMSブログ記事「<a href="https://blog.microcms.io/how-to-use-aspida/" target="_blank" rel="noopener noreferrer">Aspida + microcms-js-sdkを使った型安全なAPI開発を参考にしながらaspida</a>」を参考にaspidaを使い本サイトの記事を取得・表示したので、<br></p><h3 id="h58a6675258">パッケージのインストール</h3><pre><code>npm i @aspida/fetch</code></pre><p><br>他にも<code>@aspida/axios</code> <code>@aspida/node-fetch</code>もあるけど、microCMSで紹介されていたので、<code>@aspida/fetch</code>を選択。<br></p><h3 id="h814de21b1d">APIkeyとbaseURLは.env</h3><pre><code>API_KEY="xxxxxxxxxxxxxxx"
CMS_API_URL="https://xxxxx.microcms.io/api/v1"</code></pre><p><br></p><pre><code>const fetchConfig: Required&lt;Parameters&lt;typeof aspida&gt;&gt;[1] = {
&nbsp; headers: {
&nbsp; &nbsp; "X-MICROCMS-API-KEY": process.env.API_KEY || "",
&nbsp; },
&nbsp; baseURL: process.env.CMS_API_URL || "",
};</code></pre><p><br></p><h3 id="hbe8641c492">記事のタイトルを表示してみる</h3><pre><code>const fetchPosts = async () =&gt; {
&nbsp; const data = await client.blog.$get();
&nbsp; return { data };
};
export const getStaticProps = async () =&gt; {
&nbsp; const { data } = await fetchPosts();
&nbsp; return {
&nbsp; &nbsp; props: { postsData: data },
&nbsp; };
};
type Props = InferGetStaticPropsType&lt;typeof getStaticProps&gt;;

const Home: NextPage&lt;Props&gt; = ({ postsData }) =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;&gt;
&nbsp; &nbsp; &nbsp; &lt;main&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {postsData.contents.map((post: Content) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li key={post.id}&gt;{post.title}&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/main&gt;
&nbsp; &nbsp; &lt;/&gt;
&nbsp; );
};</code></pre><p><br></p>

<p>microCMSブログ記事「<a href="https://blog.microcms.io/how-to-use-aspida/" target="_blank" rel="noopener noreferrer">Aspida + microcms-js-sdkを使った型安全なAPI開発を参考にしながらaspida</a>」を参考にaspidaを使い本サイトの記事を取得・表示してみました。</p><p><br></p><h3 id="h58a6675258">パッケージのインストール</h3><p><code>npm i @aspida/fetch</code></p><p><br></p><p><code>@aspida/axios</code> <code>@aspida/node-fetch</code>など他にもありますが、参考記事と同じ<code>@aspida/fetch</code>を選択しました。</p><p><br></p><h3 id="h90b69cb24d">.envの作成</h3>

API_KEY="xxxxxxxxxxxxxxx" //microCMSのAPIキー
CMS_API_URL="https://xxxxx.microcms.io/api/v1"

const fetchConfig: Required<Parameters<typeof aspida>>[1] = {
  headers: {
    "X-MICROCMS-API-KEY": process.env.API_KEY || "",
  },
  baseURL: process.env.CMS_API_URL || "",
};

<h3 id="hbe8641c492">記事のタイトルを表示してみる</h3>

<h3 id="h4c3dde1119">詳細ページを表示する</h3><p><br></p>