draft pages preview | Payload | Page 1

left minnow Mar 20, 2023, 9:25 AM

#

hello
i want preview pages those are in a draft

fervent star Mar 20, 2023, 5:11 PM

#

Hi @left minnow - take a look our Preview example here https://github.com/payloadcms/payload/tree/master/examples/preview

GitHub

payload/examples/preview at master · payloadcms/payload

The React + TypeScript CMS. Payload is a free and open-source Headless CMS and Application Framework built with TypeScript, Node.js, React, and MongoDB. - payload/examples/preview at master · paylo...

left minnow Mar 22, 2023, 9:52 AM

#

hiii @fervent star i tried it but it's preview page if page is published.

#

when page in a draft it's not preview the page.

left minnow Mar 22, 2023, 2:24 PM

#

heyy @fervent star now it's working 😀

#

thanks a lot 😀

left minnow Mar 22, 2023, 2:40 PM

#

heyy @fervent star 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

left minnow Mar 22, 2023, 3:09 PM

#

preview: (doc, { locale }) => {
if (doc?.slug) {
return ${process.env.PAYLOAD_PUBLIC_SERVER_URL}/${doc.slug};
}

  return null;
},

#

@fervent star 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

fervent star Mar 22, 2023, 4:31 PM

#

@left minnow 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 mode or logout

Screen_Shot_2023-03-22_at_4.31.02_PM.png

left minnow Mar 23, 2023, 5:27 AM

#

hiii @fervent star i logout from the CMS and revisit the page i'm not getting 404 page.

left minnow Mar 23, 2023, 5:28 AM

#

fervent star <@1043125033519820902> this is because you are authorized, if you log out of the...

i'm not getting any this type of option in frontend like (exit preview mode)

#

this is my frontend view

#

left minnow Mar 25, 2023, 6:47 AM

#

hello @fervent star i'm waiting for your response.

fervent star Mar 27, 2023, 11:10 AM

#

hi @left minnow 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?

left minnow Mar 27, 2023, 11:23 AM

#

nope @fervent star 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 })},
},

fervent star Mar 27, 2023, 11:23 AM

#

left minnow preview: (doc, { locale }) => { if (doc?.slug) { return `${process...

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.ts file 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/api

and to read about how this works, here are the nextjs docs:
https://nextjs.org/docs/advanced-features/preview-mode

You'll see in the payload preview.ts, we are checking for the payloadToken so only authorized users will be able to use preview and view drafts.

Check that you have an api/preview.ts file to begin with, then compare your setup with the links above and I think you should be back on track

left minnow Mar 27, 2023, 11:26 AM

#

i have to create preview collection?

left minnow Mar 27, 2023, 11:28 AM

#

fervent star Your preview function doesn't look right, it should return `return ${process.env...

thanx @fervent star for your response. i'll try to implement it step by step.

fervent star Mar 27, 2023, 11:32 AM

#

nope you don't need a preview collection! it will just be a static file that lives on your site

left minnow Mar 28, 2023, 5:35 AM

#

okay @fervent star

left minnow Mar 28, 2023, 12:50 PM

#

hii @fervent star 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.

left minnow Mar 28, 2023, 1:46 PM

#

and i'm getting console.log(ctx.previewData) true every time if i'm logout from admin panel still i get true

left minnow Mar 28, 2023, 2:30 PM

#

and this is the my slug.tsx file

📎 slug.tsx

cyan patio Mar 29, 2023, 8:38 PM

#

Hi! @fervent star 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

left minnow Apr 6, 2023, 6:12 AM

#

hello @fervent star can i use preview feature using getsServerside Rendering(SSR).

fervent star Apr 10, 2023, 11:24 AM

#

Thanks for being patient guys we have had a busy couple weeks here!

@left minnow okay let's figure out what is going wrong here - does PAYLOAD_PUBLIC_SERVER_URL accurately 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.

@cyan patio is this the boilerplate you are working with? https://github.com/payloadcms/nextjs-custom-server

fervent star Apr 10, 2023, 1:31 PM

#

@left minnow @cyan patio yes you can use preview with SSR - to demonstrate I have cloned the nextjs-custom-server repo and added preview mode here: https://github.com/JessChowdhury/nextjs-custom-server-preview

Take 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/0fa53786ab9244a7a4204b782cc01fc059835bff

And as always the next.js docs on preview can be helpful https://nextjs.org/docs/advanced-features/preview-mode

left minnow Apr 10, 2023, 2:44 PM

#

heyy @fervent star i successfully implemented preview functionality with SSR

#

thanks a lot for the guide 🙌

fervent star Apr 10, 2023, 2:51 PM

#

absolutely! glad you are setup now! 🎉

cyan patio Apr 12, 2023, 2:57 PM

#

Thank you @fervent star!! I will take a look at the repo.

left minnow Apr 13, 2023, 2:52 PM

#

hello @fervent star 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.

cyan patio Apr 13, 2023, 7:16 PM

#

fervent star <@1043125033519820902> <@1090313890639917188> yes you can use preview with SSR -...

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. 😄

left minnow Apr 24, 2023, 6:46 AM

#

hii @fervent star i'm facing one issue. page preview not working properly when i duplicate a page.

left minnow Apr 24, 2023, 7:05 AM

#

#

and this hook is mandatory?

left minnow Apr 24, 2023, 8:23 AM

#

and also if i'm duplicate a page and change only slug and then save as a draft preview button not showing original slug

left minnow May 22, 2023, 1:41 PM

#

hello @fervent star i'm waiting for your response

left minnow May 22, 2023, 2:05 PM

#

fervent star <@1043125033519820902> <@1090313890639917188> yes you can use preview with SSR -...

is it possible to review this repo. bcz i'm getting 404 now.

fervent star May 23, 2023, 10:37 AM

#

Hi @left minnow, that afterChange hook 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-regeneration

To clarify, the issue you are having is when you duplicate a page, the page preview button gives the wrong url?

left minnow May 23, 2023, 11:16 AM

#

hii @fervent star 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.

fervent star May 23, 2023, 11:24 AM

#

Any chance you could share the repo you are working in?

left minnow May 23, 2023, 11:28 AM

#

l'll inform soon.

#

can i use secret key for NEXT_PRIVATE_REVALIDATION_KEY

left minnow May 23, 2023, 1:54 PM

#

hello @fervent star 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.

fervent star May 23, 2023, 3:35 PM

#

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.

left minnow May 24, 2023, 7:30 AM

#

hello @fervent star i'm sharing a screen recording. hope it helps to understand.

#

fervent star May 24, 2023, 9:04 AM

#

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?

Screen_Shot_2023-05-24_at_10.03.46_AM.png

left minnow May 24, 2023, 1:58 PM

#

@fervent star this is my preview function.

#

left minnow Jul 26, 2023, 9:43 AM

#

hello @fervent star i'm waiting for your response

#draft pages preview