Like what we’re doing? Star us on GitHub!

Preview example with app directory

remy
last month
11

I'm struggling to get preview functionality working in the app directory.



I'm using the payload website + cms as a template but don't appear to be able to get previewing, even a clean copy - I assume it works for you guys?



I've seen the following:


https://github.com/payloadcms/payload/pull/1950

. This appears to rely on a

payloadToken

from

GetStaticPropsContext

.



How can this be accomplished within the app directory on the server?



I can only see

import { previewData } from 'next/headers';

but this appears to only work on the client.



What I've implemented:


CMS:


slug: 'page',
  admin: {
    useAsTitle: 'Page',
    defaultColumns: ['title', 'slug', 'updatedAt'],
    preview: (doc) => {
      return `${process.env.PAYLOAD_PUBLIC_APP_URL}/api/preview?url=${formatAppURL(doc.slug)}`
    },
  versions: {
    drafts: true
  },
  access: {
    read: () => true,
  },
  },

Website:


export async function generateStaticParams(props) {
  const pages = await fetchPages()
  return pages.map((page) => {
    return ({
      slug: page.map(data => data?.slug),
    })
  })
}
  • jacobsfletch
    Payload Team
    last month

    @remy afaik Next.js app directory does not yet support preview, but we'll be the first to implement it as soon as it ships! That example uses the pages directory and will be merged within a day or two.

  • remy
    last month

    The woes of life of the bleeding edge 🗡️🩸



    Does this mean your website cms doesn't have a functioning preview?

  • jacobsfletch
    Payload Team
    last month

    Correct 🩸



    Livin on the edge



    It had preview for ~2 weeks until we decided to migrate to Next.js 13 beta

  • remy
    last month

    For my future self and anyone else that looks this up, I believe this constitutes

    Preview mode

    :

    https://beta.nextjs.org/docs/app-directory-roadmap
  • jacobsfletch
    Payload Team
    last month

    Just merged in a preview example in you wanna take a look:

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


    It includes an example Next.js app running Next 13

    pages

    directory.



    Once that Next.js roadmap item is complete we can throw an

    app

    directory example in there too

  • remy
    last month

    Nice one, thanks @jacobsfletch. I've come to the end of my spike but will likely be picking this up again soon

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More