2023-06-10
[Next.js]検索フォームをmicroCMS SDKを利用して実装してみた
本ブログには未実装ですが、next.jsとmicroCMSを使ったブログにて検索機能を実装してみました。
こちらにもある通り、microCMSではAPIにqというクエリをつけることで検索機能を簡単に作ることができます。
ほぼ参考記事の通りなのですが、useSWRでかつmicroCMSのSDKを利用したAPI疎通の記事が見当たらなかったので新たに書いてみようと思います。
大まかな流れ
まず細かい実装の前に今回作成する検索機能の大まかな流れを見ておきます。
- searchというStateをグローバルで管理できるようにする
- 検索用のコンポーネントを作成する
- 検索結果ページを作成する
- 検索結果を取得するAPIを実装する
という感じです。検索機能はクライアントサイドからAPIを叩く必要があるので、例のごとくpages/apiディレクトリ配下に新たにAPIを実装していきます。
グローバルなStateの管理
↑参考記事と殆ど同じことをするのですが、