next-pagefind

Use Pagefind with next.js non static exports.

Insallation

Install the modules required for the program.

  1. cargo install spider_cli
  2. cargo install pagefind
  3. cargo install next-pagefind

Getting Started

  1. Run next-pagefind at the root directory of your next application to create your search index's and output the content into the public folder.
  2. Setup pagefind in the your next.js project. The example before uses the layout to setup the PageFindUI wasm module once.

```tsx import { useEffect } from "react";

export function Layout({ Component, pageProps }) { const loaded = useRef(false);

useEffect(() => { if (!loaded.current) { loaded.current = true; const PagefindUI = // @ts-ignore typeof window.PagefindUI !== "undefined" && window.PagefindUI;

  if (PagefindUI) {
    new PagefindUI({
      element: "#search",
      resetStyles: false,
      showImages: false,
      showEmptyFilters: false,
    });
  }
}

}, [loaded]);

return ( <>