pagefind というツールを使うと、静的サイトに検索エンジンを導入できます。
ここではNext.jsで使う方法を記します。
index.htmlに下記のようなタグを追記します。
1<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
2<script src="/pagefind/pagefind-ui.js"></script>
3<div id="search"></div>
4<script>
5 window.addEventListener("DOMContentLoaded", (event) => {
6 new PagefindUI({ element: "#search", showSubResults: true });
7 });
8</script>/pagefindはpagefindコマンドで生成されます。
<div id="search"></div>は検索フォームになります。スタイルは当たりますが、その場に展開されるような形式なので、ヘッダーなどに検索フォームを入れたい場合はモーダルなどコンテンツを展開できる要素に入れると良さそうです。
outディレクトリに静的サイトがあるとき、下記のコマンドでインデックスを生成します。
1npx -y pagefind --site out --serve--siteオプションでサイトのディレクトリを指定します。
--serveオプションをつけると、そのままディレクトリをホストできます。
デフォルトではhttp://localhost:1414でホストされます。
Next.js で使うときに、公式で書かれているようなscriptタグを貼り付けるやり方では、再レンダリングされるときに、PagefindUIが消されてしまいます。
そのため、コンポーネント等で遅延して発火させる必要があります。
下記のように、useLayoutEffectを使って、PagefindUIを初期化しました。
1declare global {
2 interface Window {
3 PagefindUI: any;
4 }
5}
6
7let pagefindUI: any;
8
9function Search() {
10 useLayoutEffect(() => {
11 if (window.PagefindUI) {
12 pagefindUI = new window.PagefindUI({
13 element: "#search",
14 showSubResults: true,
15 });
16 }
17 return () => {
18 if (pagefindUI) {
19 pagefindUI.destroy();
20 }
21 };
22 }, []);
23 return <div id="search" />;
24}クリーンアップする API が見当たりませんでしたが、検索したところ、destroyメソッドが作られていたので、それを使っています。
