Pagefindで静的検索を導入する(Next.js Export対応)

Next.jsの静的エクスポートにPagefindを組み合わせて、クライアントサイド全文検索を実現します。

2025-11-12

Pagefindで静的検索を導入する(Next.js Export対応)

Pagefindで静的検索を導入する(Next.js Export対応)

静的サイトでも Pagefind を使えば全文検索ができます。生成された out/ に対してインデックスを作る仕組みで、導入が非常に簡単です。

手順の流れ

  • next export で out/ を作る
  • npx pagefind --source out を実行(out/pagefind/* が生成)
  • フロントから Pagefind のUIを読み込むか、window.pagefind.search() を使う
  • 運用ポイント

  • 文章量が多いほどインデックス生成に時間がかかるので、CIでのキャッシュを検討
  • 非公開ページ(下書き)はエクスポート対象から外す
  • 検索ページ /search を専用に用意してUXを整える
  • 静的でも 十分実用的な検索 が手に入ります。サーバ不要でコストも低いのが魅力です。