https://zenn.dev/kanasugi/articles/89cd178e0bc208

前提

• Next.js
• TypeScript
• styled-components
• microCMS
• AWS
  • S3
  • Cloud Front
  • Route53

Next.jsのSSGで生成した静的ファイルをS3にアップロードして、静的なメディアサイトを作っています。 CMSはmicroCMSを利用していて、メディアの記事の部分をmicroCMSから配信しています。

やりたいこと

Next.jsのSSGで作成した静的なメディアにおいて、全文検索機能を追加したいというのが今回のやりたかったことです。next devでローカル開発してるときは、getStaticProps内が変更はいるたびに更新され、再buildされるので、うまくいったように見えてましたが、S3にあげてみると、うまくいかなかったので、その対策をしたかったです。

結論

• microCMSの全文検索APIをつかう
• AWSのLambdaでエンドポイントを作成し、Next.jsからは、そのLambdaをコールし、Lambda内でmicroCMSの全文検索APIをコールすることで実現させる

microCMSの全文検索APIと呼んでいるのは、こちらのAPIです。

方法

調査したところ、今回の前提条件下でNext.jsのSSGで全文検索を実現するのには、2つの方法があることがわかりました。

1. Algoliaを使用する
2. AWSのLambdaでエンドポイントを作成し、Next.jsからは、そのLambdaをコールし、Lambda内でmicroCMSの全文検索APIをコールすることで実現させる