Preview example with app directory

remy_902 years ago

6

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

  2 years ago

  @536888652257558538

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

  The woes of life of the bleeding edge 🗡️🩸

  
  
  

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

• 

  jacobsfletch

  2 years ago

  Correct 🩸

  
  
  

  Livin on the edge

  
  
  

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

• 

  remy_902 years ago

  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

  2 years ago

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

  Nice one, thanks

  @808734492645785600

  . I've come to the end of my spike but will likely be picking this up again soon