microCMS+Next.js で記事検索ページを作る

2024/10/31 (木) - 09:00　JavaScript PHP&CMS

和製のヘッドレスCMSであるmicroCMSとフロントエンドのNext.jsを使って記事の検索ページを作ったときの備忘録メモ。環境は以下でApp Routerで実装しました。

microcms-js-sdk 3.1.x
Next.js 14.0.x

まずはHTMLで検索フォームを用意します。コンポーネント化して使い回すのも良き。

<form action="/search/" method="GET" name="form">
 <input type="search" name="q" placeholder="馬名を入れてね" />
</form>

検索結果ページを用意します。ファイルは/search/page.jsとしました。コードは以下のように記述し、内容やエンドポイントはCMSのフィールドに応じて修正します。

import { client } from '@/app/libs/client';
import Link from 'next/link';
export default async function SearchPage( props ) {
 const q = props.searchParams.q;
 const data = await client.get({
  endpoint: 'post',
  queries: { q: decodeURI(q) }
 });
 if(!data.totalCount){
  <!-- 見つからない時 -->
  return <h2><em>（{q}）</em>ないです。</h2>
 }else{
  return (
   <div>
    <!-- 見つかった時 -->
    <h2><em>{q}</em>は<em>{data.totalCount}</em>件 見つかりました！</h2>
    <ul>
     {data.contents.map((data) => (
      <li key={data.id}>
       <Link href={`/horse/${data.id}`}>{data.title}</Link>
      </li>
     ))}
    </ul>
   </div>
  );
 }
}

上記のサンプルコードのポイントとしてはqパラメータを利用して検索を使用するところです。

また、filtersパラメータを利用して特定のフィールドに限って検索することも出来ます。その場合は、filters: 【フィールド名】[contains]【検索値】で指定します。例えばtitleおよびcontentというフィールド値に対し該当のキーワードを含む記事のみ絞り込みたい場合は、filters: `title[contains]${q}[or]content[contains]${q}`と指定します。filtersパラメータの詳細は以下を参考に。

qパラメータはmicroCMSで予め用意されているので動作が高速ですが、filtersパラメータは少し時間がかかるのがデメリットです。