はじめに
技術ブログの記事数が増えてくると、カテゴリ一覧やタグだけでは目的の記事にたどり着きにくくなります。
特に、技術記事、用語集、開発事例を別ページとして持っている場合、読者は「GAS PDF」「ZIP PowerShell」「Codex AGENTS.md」のように、知りたい語句から横断的に探したくなります。
この記事では、Next.jsの静的サイトに、DBなしで動くサイト内検索を追加する実装パターンを紹介します。
使う場面
- 技術ブログの記事数が増えてきた
- 記事、用語集、開発事例を横断して探せるようにしたい
- Algoliaなどの外部検索サービスを入れるほどではない
- サーバーやDBを増やさず、静的サイトのまま検索を付けたい
- ヘッダーに「検索」導線を追加して回遊性を上げたい
小規模から中規模の技術ブログであれば、検索対象データをビルド時に作り、ブラウザ側で絞り込むだけでも十分実用的です。
全体の考え方
今回の構成は、次の3層に分けています。
| 役割 | ファイル | 内容 |
|---|---|---|
| 検索データ生成 | src/lib/search.ts | 記事、用語集、開発事例を共通形式へ変換 |
| 検索UI | src/components/SearchClient.tsx | 入力値、絞り込み、検索結果表示を担当 |
| 検索ページ | src/app/search/page.tsx | ビルド時に検索データを渡し、ページとして表示 |
検索対象は、タイトルだけではなく、説明文、カテゴリ、タグ、本文、用語説明、開発事例の概要まで含めます。
記事MDX / 用語集 / 開発事例
|
v
getSearchItems() で共通形式へ変換
|
v
SearchClient へ渡す
|
v
ブラウザ側でキーワード検索
検索データを作る
まず、ビルド時に検索対象のデータを集めます。
記事はgetAllArticles()とgetArticle()から、用語集はgetAllTerms()から、開発事例はgetAllCases()から取得し、SearchItemという共通形式へ変換します。
コードを読み込み中...ポイントは、表示用のtitleやdescriptionとは別に、検索判定用のsearchTextを持たせることです。
searchTextには、本文やタグ、説明文などをまとめて入れています。これにより、表示カードは短く保ちつつ、検索対象だけ広くできます。
また、MDX本文にはコードブロックやHTMLタグが混ざるため、normalizeText()で最低限の整形をしています。
クライアント側で絞り込む
検索フォームは入力状態を持つため、Client Componentとして実装します。
useStateで検索語と検索対象の種別を持ち、useMemoで検索結果を再計算します。
コードを読み込み中...今回の検索では、検索語を空白で分割し、複数語検索に対応しています。
スコアはシンプルに、次の順で重みを付けています。
| 一致箇所 | 点数 | |---|---:| | タイトル | 8 | | タグ | 5 | | 説明文 | 4 | | 本文などの検索対象全文 | 1 |
厳密な全文検索エンジンではありませんが、技術ブログのサイト内導線としては扱いやすいバランスです。
検索ページを追加する
/searchページでは、サーバー側でgetSearchItems()を呼び、検索UIへ渡します。
コードを読み込み中...このページ自体は静的に生成されます。検索フォームの入力や結果更新だけがブラウザ側で動く構成です。
ヘッダーには「検索」リンクを追加して、記事を読んでいる途中でも検索ページへ移動しやすくしました。
DBなし検索のメリット
この方式の良いところは、構成が軽いことです。
- 外部検索サービスが不要
- サーバーAPIが不要
- 静的ホスティングのまま使える
- 記事追加時はビルドで検索対象も更新される
- 用語集や開発事例も同じUIで探せる
記事数が数百件程度であれば、まずこの方式で十分です。将来的に記事数が大きく増えたり、検索精度を上げたくなった場合に、検索インデックス生成や外部検索サービスへ発展させればよいです。
注意点
- 検索対象データをクライアントへ渡すため、非公開情報を含めない
- MDX本文を検索対象にする場合、コードや内部メモが混ざらないか確認する
- 記事数が大きく増えたら、データサイズや検索速度を見直す
- 日本語の形態素解析まではしていないため、検索語は短めに入れる前提にする
- 検索結果の順位は簡易スコアなので、必要に応じて調整する
特に技術ブログでは、記事本文に顧客名や実パスを残さない公開前チェックが重要です。公開前の確認観点は 技術記事を公開する前のリスクチェックリスト と組み合わせると安全です。
まとめ
Next.jsの静的サイトでも、記事・用語集・開発事例をまとめたサイト内検索は十分実装できます。
まずは検索データを共通形式へ変換し、Client Component側で入力語に応じて絞り込む構成にすると、DBや外部サービスを増やさずに使いやすい検索ページを作れます。
テックブログでは、記事が増えるほど「探せること」自体が価値になります。検索ページを用意しておくと、読者にとっても、運営者が過去記事を確認する上でも便利な導線になります。