Next.js × microCMSで店舗検索機能を実装する

こんにちは、カスタマーエンジニアの高宮です。 今回はNext.jsとmicroCMSを使って店舗検索機能を実装する方法をご紹介いたします。 近年、複数の店舗を運営している事業でのmicroCMSの導入や導入のご相談が増えてきております。 飲食店チェーン、小売業、美容サロンなど、複数の店舗情報を管理するサイトにおいて、ユーザーが簡単に店舗を見つけられることは、顧客満足度向上の鍵となりますので、参考にしていただければ幸いです。 はじめに今回の実装の全体像は以下の通りです。 Next.js 14 App Routerを使用店舗のデータはmicroCMSで管理キーワード、カテゴリー、都道府県の3種類で複合検索microCMSのfiltersパラメータ、qパラメータを利用して絞り込む検索結果をGoogle Mapに反映 以下については未実装となっております。 Google Map APIのカスタマイ