Has anyone successfully integrated pagefind in an SSG-driven Next.js site?
Open in Discord
Masai Lion posted this in #help-forum
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?
did you managed to do that? i have same problem, but on next13
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.
@Norwich Terrier I've attached a simplified example to this message. Let me know if you have any questions. Hope that helps!
thank you very much bro! i am gonna test it tomorrow probably because so I will ask any questions if i will find time to test it
how your next-sitemap config is looking like?
last part of the command is causing this error:
mv: cannot stat '.next/_pagefind': No such file or directory. do you know what is wrong maybe?
also i got a lot of typescript errors, is it possible to use this lib with typescript?