draft pages preview

default discord avatar
bhavikak
2 months ago
51

hello


i want preview pages those are in a draft

  • discord user avatar
    jesschow
    Payload Team
    2 months ago

    Hi @bhavikak - take a look our Preview example here

    https://github.com/payloadcms/payload/tree/master/examples/preview
  • default discord avatar
    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

  • discord user avatar
    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
    Screen_Shot_2023-03-22_at_4.31.02_PM.png
  • default discord avatar
    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.

    image.png
  • discord user avatar
    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?

  • default discord avatar
    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 })}

    ,


    },

  • discord user avatar
    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

  • default discord avatar
    bhavikak
    2 months ago

    i have to create preview collection?



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

  • discord user avatar
    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

  • default discord avatar
    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

  • default discord avatar
    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

  • default discord avatar
    bhavikak
    last month

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

  • discord user avatar
    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
  • default discord avatar
    bhavikak
    last month

    heyy @jesschow i successfully implemented preview functionality with SSR



    thanks a lot for the guide ๐Ÿ™Œ

  • discord user avatar
    jesschow
    Payload Team
    last month

    absolutely! glad you are setup now! ๐ŸŽ‰

  • default discord avatar
    sarah.codes
    last month

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

  • default discord avatar
    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.

  • default discord avatar
    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. ๐Ÿ˜„

  • default discord avatar
    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.

    image.png
  • discord user avatar
    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?

  • default discord avatar
    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.

  • discord user avatar
    jesschow
    Payload Team
    last week

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

  • default discord avatar
    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.

  • discord user avatar
    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.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.