Next.js(App Router)とmicroCMSでブログを作ろう!! ～ワード検索編～

やっとこさワード検索実装します。

ワード検索のロジック

microCMSにはデータ取得時にqパラメータでワードを渡してやると勝手に検索してくれる機能があるので、それを利用します。

そのqパラメータはURLからクエリパラメータで取得することにするので、実質一覧ページにクエリパラメータを受け取るロジックを実装すれば、作業はほぼ終わり。

app直下のpage.jsxを以下のように記述する。

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

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

  return (
    <>
      <main>
         <ArticleList contents={contents} />
        <CategoryLinks />
      </main>
    </>
  );
}

lib/microcms.jsの一覧取得ロジックを確認。

// ブログ一覧を取得
export const getList = async (queries) => {
  const listData = await client.getList({
    endpoint: "blogs",
    queries,
  });

  // データの取得が目視しやすいよう明示的に遅延効果を追加
  await new Promise((resolve) => setTimeout(resolve, 3000));

  return listData;
};

queriesが設定されて居ればOK。

試しに「/?q={検索ワード}」にアクセスし、設定したワードが出力される記事やタイトルにちゃんと含まれているのか確認。

ワード検索の画面を作成

例の如くコンポーネントを作成。componentフォルダにWordSearch.jsxを作成し、以下のように記述。

export default function StaticPage() {

  return (
    <div>
      <h2>ワード検索</h2>
      <form action="/" method="get">
        <input type="text" name="q"/>
        <button>検索</button>
      </form>
    </div>
  );
}

ワードを入力して検索ボタンをクリックすると検索した結果が一覧ページに表示されるはず。