Preview example with app directory

remy

last month

11

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

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