Next.js App RouterでPagefindを使うときのあれこれ

"build:pagefind": "pagefind --site .next --output-path public/search"

"build": "next build",
"postbuild": "pnpm run build:pagefind",

import { createIndex } from "pagefind";
// このサイトで表示している外部記事のデータ
import { externalArticles } from "../app/_features/articles/data/externalArticles";
 
async function main() {
  const { index } = await createIndex({});
 
  if (index === undefined) {
    throw new Error("Failed to create index");
  }
 
  // `--site .next` と同等
  await index.addDirectory({
    path: ".next",
  });
 
  // addCustomRecord() を利用し、外部記事のデータをインデックスに追加
  for (const article of externalArticles) {
    await index.addCustomRecord({
      url: article.href,
      content: article.title,
      meta: {
        title: article.title,
        externalLink: "true",
      },
      language: "ja",
    });
  }
 
  // `--output-path public/search` と同等
  await index.writeFiles({
    outputPath: "public/search",
  });
}
 
main();

export const externalArticles = [
  {
    title: "チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション",
    publishedAt: "2024/07/03",
    href: "https://tech.route06.co.jp/entry/2024/07/03/154219",
    tags: ["route06-tech-blog"],
  },
  ...
]

"build:pagefind": "pagefind --site .next --output-path public/search"
"build:pagefind": "tsx ./scripts/pagefind.mts"

void (async () => {
  if (typeof window !== "undefined" && typeof window.pagefind === "undefined") {
    try {
      window.pagefind = await import(
        // @ts-expect-error pagefind.js generated after build
        /* webpackIgnore: true */ "/search/pagefind.js"
      );
    } catch {
      window.pagefind = { search: () => Promise.resolve({ results: [] }) };
    }
  }
})();

// Pagefindの型定義
type Data = {
  url: string;
  meta: {
    title: string;
  };
};
 
type Result = {
  id: string;
  data: () => Promise<Data>;
};
 
type Pagefind = {
  search: (query: string) => Promise<{ results: Result[] }>;
};
 
declare global {
  interface Window {
    pagefind: Pagefind | undefined;
  }
}
 
// キャッシュを有効にしつつ、データを取り出す関数
const getData = cache(async (result: Result) => result.data());
 
// .next内のhtmlファイル名がPageFindの検索結果として使われてしまうため変換する関数
// /server/app/articles/pagefind-with-app-router.html を
// /articles/pagefind-with-app-router にする
const formatUrl = (url: string): string => {
  return url.replace(/\/server\/app\/articles\/(.*)\.html/, "/articles/$1");
};
 
const SearchResultItem: FC<{ result: Result }> = ({ result }) => {
  // `use()` でPromiseから値を取り出す
  const data = use(getData(result));
 
  return <Link href={formatUrl(data.url)}>{data.meta.title}</Link>;
};
 
// PageFindの検索を実行する関数 こちらも `cache()` でラップ
const search = cache(async (query: string): Promise<Result[]> => {
  if (!window.pagefind) {
    return [];
  }
 
  return (await window.pagefind.search(query)).results;
});
 
const InnerSearchResultItems: FC<{ query: string }> = ({ query }) => {
  // `use()` でPromiseから値を取り出す
  const results = use(search(query));
 
  return results.map((result) => (
    <Suspense key={result.id}>
      <SearchResultItem result={result} />
    </Suspense>
  ));
};
 
export const SearchResultItems = () => {
  return (
    <Suspense>
      <InnerSearchResultItems />
    </Suspense>
  );
};