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.

Preview example with app directory

default discord avatar
remy_902 years ago
6

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

  • default discord avatar
    remy_902 years ago

    The woes of life of the bleeding edge 🗡️🩸



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

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

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

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

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.