Simplify your stack and build anything. Or everything.
Build tomorrowโ€™s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
Itโ€™s time to take back your content infrastructure.

draft pages preview

default discord avatar
bhavikak.2 years ago
27

hello


i want preview pages those are in a draft

  • default discord avatar
    jessrynkar2 years ago

    Hi

    @1043125033519820902

    - take a look our Preview example here

    https://github.com/payloadcms/payload/tree/master/examples/preview
  • default discord avatar
    bhavikak.2 years ago

    hiii

    @854377910689202256

    i tried it but it's preview page if page is published.



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



    heyy

    @854377910689202256

    now it's working ๐Ÿ˜€



    thanks a lot ๐Ÿ˜€



    heyy

    @854377910689202256

    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;


    },



    @854377910689202256

    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

  • default discord avatar
    jessrynkar2 years ago
    @1043125033519820902

    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
  • default discord avatar
    bhavikak.2 years ago

    hiii

    @854377910689202256

    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

    @854377910689202256

    i'm waiting for your response.

  • default discord avatar
    jessrynkar2 years ago

    hi

    @1043125033519820902

    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 years ago

    nope

    @854377910689202256

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

    ,


    },

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

    i have to create preview collection?



    thanx

    @854377910689202256

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

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

    okay

    @854377910689202256

    hii

    @854377910689202256

    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.codes2 years ago

    Hi!

    @854377910689202256

    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.2 years ago

    hello

    @854377910689202256

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

  • default discord avatar
    jessrynkar2 years ago

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



    @1043125033519820902

    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.



    @1090313890639917188

    is this the boilerplate you are working with?

    https://github.com/payloadcms/nextjs-custom-server

    @1043125033519820902

    @1090313890639917188

    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.2 years ago

    heyy

    @854377910689202256

    i successfully implemented preview functionality with SSR



    thanks a lot for the guide ๐Ÿ™Œ

  • default discord avatar
    jessrynkar2 years ago

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

  • default discord avatar
    sarah.codes2 years ago

    Thank you

    @854377910689202256

    !! I will take a look at the repo.

  • default discord avatar
    bhavikak.2 years ago

    hello

    @854377910689202256

    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.codes2 years ago

    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.2 years ago

    hii

    @854377910689202256

    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

    @854377910689202256

    i'm waiting for your response



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

  • default discord avatar
    jessrynkar2 years ago

    Hi

    @1043125033519820902

    , 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.2 years ago

    hii

    @854377910689202256

    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.

  • default discord avatar
    jessrynkar2 years ago

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

  • default discord avatar
    bhavikak.2 years ago

    l'll inform soon.



    can i use secret key for NEXT_PRIVATE_REVALIDATION_KEY



    hello

    @854377910689202256

    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.

  • default discord avatar
    jessrynkar2 years ago

    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.

  • default discord avatar
    bhavikak.2 years ago

    hello

    @854377910689202256

    i'm sharing a screen recording. hope it helps to understand.



  • default discord avatar
    jessrynkar2 years ago

    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?

  • default discord avatar
    bhavikak.2 years ago
    @854377910689202256

    this is my preview function.





    hello

    @854377910689202256

    i'm waiting for your response



    still i'm facing this issue.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.