Pagefind examples using Next.js?

[pmillspaugh]

Hey, pagefind looks great! I'm hoping the community could share examples implementing the search API in a Next.js static site.

I am wrestling with the setup here. Generating the search index works (I pushed the generated /public/pagefind dir in that branch I linked just to show), but I'm struggling to initialize the search API within my React component. The import path is tripping me up.

I'll need a different path for development versus production, but just to get it working I generated the /public/pagefind dir and imported it here in a React component. I am running into a Failed to load Pagefind metadata error on pagefind.init(), which is thrown upon calling fetch(`${this.basePath}pagefind-entry.json?ts=${Date.now()}`)

I'd appreciate if anyone could share any examples with React/Next, thanks!

[pmillspaugh]

Adding some more detail on that fetch error^: Not allowed to load local resource: file:///Users/petermillspaugh/dev/projects/petemillspaugh.com/src/pagefind/pagefind-entry.json?ts=1697986568739

I tried tweaking the bundlePath, but no luck there. The browser blocks fetching from the file system for security reasons, but how else could I point to that pagefind entry file client-side?

I updated my PR to be much more minimal: https://github.com/pmillspaugh/petemillspaugh.com/pull/15/files

[pmillspaugh]

I'd be happy to write up a how-to once I figure this out if no one else has yet (for Next.js) 🙂

[pmillspaugh]

Solved #482 ✅