#Has anyone successfully integrated pagefind in an SSG-driven Next.js site?

10 messages · Page 1 of 1 (latest)

fleet rapids
#

I'm having a bit of trouble trying to work out the best way to use https://pagefind.app on a Next.js v12 site whose pages are all statically compiled. Running the binary at build time (pointed at ".next") seems to be the easy part. The binary runs postbuild and is emitted to .next. The part I seem to be struggling with is the method to reference pagefind client-side via the JS API (https://pagefind.app/docs/api/). I can't seem to figure out the best strategy to ensure the /_pagefind/pagefind.js file generated in .next is accessible in the bundle. Anyone have any insight?

Pagefind
Pagefind | Pagefind

Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.

shut ridgeBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

steady lion
fleet rapids
#

I did. I’m on my phone, but if you give me a moment I can grab my laptop and share what I did with you.

#

I added this postbuild command to my package.json since my site is hosted on Netlify:

// rest of scripts
 "postbuild": "next-sitemap && npx pagefind --source '.next' && mv .next/_pagefind public/",
#

It moves the emitted pagefind folder into public, which is subsequently correctly deployed by next/runtime along with the rest of the files in public/ to the CDN. You may or may not be having the same problem.

#

@steady lion I've attached a simplified example to this message. Let me know if you have any questions. Hope that helps!

📎 message.jsx
steady lion
steady lion
steady lion