Next.js(App Router)とmicroCMSでブログを作ろう!! ～記事一覧を共通パーツ化編～

前回、「次回はワード検索」と書きましたが、よくよく考えると既に記事一覧の部分が全体とカテゴリ毎で2つ出来てしまっているなと気づいたので、まずはこれらを共通化したいと思います。

記事一覧のコンポーネントを作成

まずは「app/component/BlogList.jsx」というファイルを作成。

このコンポーネント単体では記事を取得しません。呼び出し元の画面が記事を取得し、それをこのコンポーネントに受け渡し、渡ってきた記事一覧を表示するだけです。 ついでに記事が0件だった時の表示もこちらで対応しましょう。

import Link from "next/link";

export default async function StaticPage({contents}) {

  if (!contents || contents.length === 0) {
    return (
      <div>
        <h2>記事がありません</h2>
      </div>
    );
  }

  return (
    <div>
      <h2>記事一覧</h2>
      <ul>
        {contents.map((post) => {
          return (
            <li key={post.id}>
              <Link href={`/blog/${post.id}`}>{post.title}</Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

記事一覧ページから呼び出し

app直下の一覧ページから呼び出してみる

import Link from "next/link";
import BlogList from "./component/BlogList";
import CategoryLinks from "./component/CategoryLinks";
import { getList } from "../lib/microcms";

export default async function StaticPage() {
  const { contents } = await getList();

  return (
    <div>
      <BlogList contents={contents}/>
      <CategoryLinks />
    </div>
  );
}

カテゴリ毎の一覧ページから呼び出してみる

import Link from "next/link";
import CategoryLinks from "../../component/CategoryLinks";
import BlogList from "../../component/BlogList";
import { getList } from "../../../lib/microcms";

export default async function StaticPage({
  params: { id },
}) {
  const { contents } = await getList({ filters: `category[equals]${id}` } );

  return (
    <div>
      <BlogList contents={contents}/>
      <CategoryLinks />
    </div>
  );
}

以上、これだけ。

次回こそワード検索を実装します。