draft pages preview

bhavikak

2 months ago

51

• 

  jesschow

  Payload Team

  2 months ago

  Hi @bhavikak - take a look our Preview example here

  https://github.com/payloadcms/payload/tree/master/examples/preview
• 

  bhavikak

  2 months ago

  hiii @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

• 

  jesschow

  Payload Team

  2 months ago

  @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 mode

  or

  logout

  
• 

  bhavikak

  2 months ago

  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.

  
• 

  jesschow

  Payload Team

  2 months ago

  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?

• 

  bhavikak

  2 months ago

  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 })}

  ,

  
  

  },

• 

  jesschow

  Payload Team

  2 months ago

  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

• 

  bhavikak

  2 months ago

  i have to create preview collection?

  
  

  
  

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

• 

  jesschow

  Payload Team

  2 months ago

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

• 

  bhavikak

  2 months ago

  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

  slug.tsx
• 

  sarah.codes

  2 months ago

  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

• 

  bhavikak

  last month

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

• 

  jesschow

  Payload Team

  last month

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

  
  
  

  @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-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
• 

  bhavikak

  last month

  heyy @jesschow i successfully implemented preview functionality with SSR

  
  

  
  

  thanks a lot for the guide 🙌

• 

  jesschow

  Payload Team

  last month

  absolutely! glad you are setup now! 🎉

• 

  sarah.codes

  last month

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

• 

  bhavikak

  last month

  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.

• 

  sarah.codes

  last month

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

• 

  bhavikak

  last month

  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.

  
• 

  jesschow

  Payload Team

  last week

  Hi @bhavikak, 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?

• 

  bhavikak

  last week

  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.

• 

  jesschow

  Payload Team

  last week

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

• 

  bhavikak

  last week

  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.

• 

  jesschow

  Payload Team

  last week

  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.

  Screen_Recording_2023-05-23_at_4.33.41_PM.mov