draft pages preview
hello
i want preview pages those are in a draft
Hi @bhavikak - take a look our Preview example here
https://github.com/payloadcms/payload/tree/master/examples/previewhiii @jesschow i tried it but it's preview page if page is published.
when page in a draft it's not preview the page.
heyy @jesschow now it's working 😀
thanks a lot 😀
heyy @jesschow i have one more query on it
i saved page as a draft and i hit slug with baseurl it's showed page insted of 404
preview: (doc, { locale }) => {
if (doc?.slug) {
return
${process.env.PAYLOAD_PUBLIC_SERVER_URL}/${doc.slug};
}
return null;
},
@jesschow this is my code. preview button redirect to base url and show the page but i don't want to show draft page to end user
if i preview page in this way than no any difference between draft and published
@bhavikak this is because you are authorized, if you log out of the cms and revisit the page you'll get 404. The example uses the admin bar plugin which makes this really easy, on the front end click
exit preview modeor
logout
hiii @jesschow i logout from the CMS and revisit the page i'm not getting 404 page.
i'm not getting any this type of option in frontend like (exit preview mode)
this is my frontend view
hello @jesschow i'm waiting for your response.
hi @bhavikak thanks for being patient, let's get to the bottom of this today. I think we are having a miscommunication here so let's take a step back - are you running the preview example or your own code?
nope @jesschow i review the example so i have a one query about (api/preview) that added in this code preview: doc =>
${process.env.PAYLOAD_PUBLIC_SITE_URL}/api/preview?url=${formatAppURL({ doc })},
},
Your preview function doesn't look right, it should return
return ${process.env.PAYLOAD_PUBLIC_SERVER_URL}/api/preview?url=${doc.slug};Then make sure you have an
api/preview.tsfile that you are rendering on the front end, in the demo this is here:
https://github.com/payloadcms/payload/tree/docs/pagination-options/examples/preview/nextjs/pages/apiand to read about how this works, here are the nextjs docs:
https://nextjs.org/docs/advanced-features/preview-modeYou'll see in the payload
preview.ts, we are checking for the
payloadTokenso only authorized users will be able to use preview and view drafts.
Check that you have an
api/preview.tsfile to begin with, then compare your setup with the links above and I think you should be back on track
i have to create preview collection?
thanx @jesschow for your response. i'll try to implement it step by step.
nope you don't need a preview collection! it will just be a static file that lives on your site
okay @jesschow
hii @jesschow i add this preview: (doc) =>
${process.env.PAYLOAD_PUBLIC_SERVER_URL}/api/preview?url=${formatAppURL({ doc })},
in my collection and make a preview.ts file in pages/api but i save page as a draft it showing me 404 page.
and i'm getting console.log(ctx.previewData) true every time if i'm logout from admin panel still i get true
and this is the my slug.tsx file
Hi! @jesschow Would a solution similar to this one work for those of us using the NextJS Server Rendered boilerplate? I am struggling on how to get the API portion for the previews to work with this template
hello @jesschow can i use preview feature using getsServerside Rendering(SSR).
Thanks for being patient guys we have had a busy couple weeks here!
@bhavikak okay let's figure out what is going wrong here - does
PAYLOAD_PUBLIC_SERVER_URLaccurately match your front end url? Also, have you booted up the preview example just to see how it should look when it is working? I feel like that might fill in some of the gaps here.
@sarah.codes is this the boilerplate you are working with?
https://github.com/payloadcms/nextjs-custom-server@bhavikak @sarah.codes yes you can use preview with SSR - to demonstrate I have cloned the
nextjs-custom-serverrepo and added preview mode here:
https://github.com/JessChowdhury/nextjs-custom-server-previewTake a look at this commit, these are the only changes I needed to add to get preview setup:
https://github.com/JessChowdhury/nextjs-custom-server-preview/commit/0fa53786ab9244a7a4204b782cc01fc059835bffAnd as always the next.js docs on preview can be helpful
https://nextjs.org/docs/advanced-features/preview-modeheyy @jesschow i successfully implemented preview functionality with SSR
thanks a lot for the guide 🙌
absolutely! glad you are setup now! 🎉
Thank you @jesschow!! I will take a look at the repo.
hello @jesschow one more issue come in preview if i'm duplicate a page and change only pagetitle and slug and save as a draft it showing me 404.
I used your example and it is working now. Thanks again! I guess I hadn't ventured into the advanced features section yet. Some awesome stuff in there. 😄
hii @jesschow i'm facing one issue. page preview not working properly when i duplicate a page.
and this hook is mandatory?
and also if i'm duplicate a page and change only slug and then save as a draft preview button not showing original slug
hello @jesschow i'm waiting for your response
is it possible to review this repo. bcz i'm getting 404 now.
Hi @bhavikak, that
afterChangehook is not required however all it does it revalidate the page if you are using ISR, you can read more about on demand revalidation here:
https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regenerationTo clarify, the issue you are having is when you duplicate a page, the page preview button gives the wrong url?
hii @jesschow can i know why after change the slug preview button not showing actual slug?
and one more thing is that if i'm duplicate a page and save as draft and than refresh the page. preview button showing changed url and redirect to the frontend bt i'm getting 404 page.
also i'm use SSR.
Any chance you could share the repo you are working in?
l'll inform soon.
can i use secret key for NEXT_PRIVATE_REVALIDATION_KEY
hello @jesschow Due to our company policies I will not be able to share the repo access with you.
Please share any other way-around to identify the issue.
Could you share a screen recording? I'm having trouble understanding and replicating your issue.
Here you can see when I duplicate a page, then change the slug and save as draft - preview is still working correctly.
hello @jesschow i'm sharing a screen recording. hope it helps to understand.
Thank you this helps a lot!
Okay your preview definitely isn't working correctly, could you show me what your preview function looks like in your 'innerpages' collection?
@jesschow this is my preview function.
hello @jesschow i'm waiting for your response
still i'm facing this issue.
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.