Issue with preview
Lets say you have Payload on port 8000 and a NextJS site on port 3000. The end goal is to get preview working for a "pages" collection. What would you add for the preview function? I know that the docs outline a function here:
https://payloadcms.com/docs/configuration/collections#previewbut it doesn't work for me in this case. How do you handle preview when Payload's backend on a separate server from it's frontend?
Hi @samtietjen, the payload website does exactly what you're looking for (has the backend / frontend on different servers and uses the preview feature) and would be a good example for you. Take a look at how we do it here:
https://github.com/payloadcms/website-cms/blob/f44cc077dfd85d3e3941df39b6ce13f4baee7fb4/src/utilities/formatPreviewURL.ts#L3Thanks for the reply! This is exactly what I was referencing. process.env.PAYLOAD_PUBLIC_APP_URL would be localhost:8000 right? If I do that then I get a "cannot get". If I do 3000 (Next) it 404s me. I did notice the following commits
https://github.com/payloadcms/website/search?q=preview&type=commits. This made sense because I didn't have anything configured in Next for preview; however, looking at the site's current front end all of this was removed and the word preview isn't found anywhere in the source code.
Still a newbie to Payload, so I appreciate your help!
Wow that is because it is broken on our site oh dear 😂
You definitely need a preview API route (pages/api/preview.tsx) that should be your missing piece. The nextjs docs will help here:
https://nextjs.org/docs/advanced-features/preview-modeAhhhh, that makes me feel less crazy! Thank you! I'm guessing those old commits I sent you probably work for reference. Think this'll be documented in the future?
@samtietjen the "preview" button in Payload is just meant to point to your front-end, whatever it might be. In our case we tied it into Next's preview so we could view drafts—but this is all extra. We've since migrated to Next 13's
appdirectory which did not support preview or ISR at the time although we left our code in place.
Was just chatting on GitHub discussions about this. Makes more sense now. So preview is really just the ability to add a button to your admin UI that can generate a URL. It’s up to you to do the rest. In the case of the Payload website it’s more of a “draft view”.
Spot on
https://github.com/payloadcms/payload/tree/master/examples/previewJust merged in a preview example if you wanna take a look! It includes an example Next.js app running on the
pagesdirectory.
Continue the discussion in Discord
Get help straight from the Payload team with an Enterprise License.Learn More