[Next.js+microCMS] 1ページ内でカテゴリごと記事一覧を表示

2025/03/21 (金) - 09:00　JavaScript PHP&CMS

Jamstackの開発が活発になり、ヘッドレスCMSとして和製のmicroCMSを採用するケースもあるかと思います。今回はmicroCMSとNext.jsを使って記事カテゴリごとに記事一覧を分割して表示させる方法をメモします。

Next.js+microCMS 作成イメージ

記事カテゴリAPIと記事APIの2つを使います。記事のAPIスキーマにはタイトルや記事本文のほか、カテゴリ用のフィールドを用意しコンテンツ参照で記事カテゴリAPIを参照します。また開発にはmicrocms-js-sdkを使っています。今回は社員のスタッフリストをつくりました。役職ごとカテゴリを作りその下に所属するスタッフを一覧で表示します。

今回は下記の環境にて作成。

Node.js 20.18.x
Next.js 14.2.x
microcms-js-sdk 3.1.x

microCMSカテゴリ管理

スタッフリスト部分はコンポーネントとしてimportします。スタッフ一覧ページのファイルを/staff/page.jsとします。

import { client } from '@/libs/client';
import StaffList from '@/component/StaffList';
export default async function Home() {
 const category = await client.get({
 endpoint: 'staff_category',
 });
 return (
 <div>
 {category.contents.map((category) => (
  <article key={category.id}>
   <h2>{category.name}一覧</h2>
   <StaffList id={category.id} />
  </article>
 ))}
 </div>
 );
}

スタッフ一覧コンポーネントとして/component/StaffList.js用意します。

import Link from 'next/link';
import { client } from '@/libs/client';
import { format } from 'date-fns';
export default async function StaffList({id}){
 const category_staff = await client.get({
 endpoint: 'post',
 queries: { filters: `category[equals]${id}`}
 });
 return (
 <ul>
 {category_staff.contents.map((staff_data) => (
  <li key={staff_data.id}>
  <Link href={`/staff/${staff_data.id}`}>
  <img src={staff_data.eyecatch.url} alt="" loading="lazy" width="100" height="100" />
   <h3>{staff_data.title}</h3>
   <p><time>入社日：{format(new Date(staff_data.date), 'yyyy.MM')}</time></p>
  </Link>
  </li>
 ))}
 </ul>
 );
}

スタッフ詳細ページとして/staff/[id]/page.js用意します。

import { client } from '@/libs/client';
import { format } from 'date-fns';
export async function generateStaticParams() {
 const data = await client.get({
  endpoint: 'post',
 });
 return data.contents.map((data) => {
  return { id: data.id}
 })
}
export default async function DetailPage( props ) {
 const data = await client.get({
  endpoint: `post/${props.params.id}`,
 });
 return (
  <div>
   <p>{data.category.name}</p>
   <h1>{data.title}</h1>
   <img src={data.eyecatch.url} alt="" loading="lazy" width="100" height="100" />
   <p><time>入社日：{format(new Date(data.date), 'yyyy.MM')}</time></p>
   <div dangerouslySetInnerHTML={{ __html: data.content }}></div>
  </div>
 );
}

所属部署（カテゴリ）、名前、顔写真、入社日、自己紹介メッセージが表示されました。

詳細画面イメージ