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:
. 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),
})
})
}
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.
The woes of life of the bleeding edge 🗡️🩸
Does this mean your website cms doesn't have a functioning preview?
Correct 🩸
Livin on the edge
It had preview for ~2 weeks until we decided to migrate to Next.js 13 beta
For my future self and anyone else that looks this up, I believe this constitutes
Preview mode:
https://beta.nextjs.org/docs/app-directory-roadmapJust merged in a preview example in you wanna take a look:
https://github.com/payloadcms/payload/tree/master/examples/previewIt includes an example Next.js app running Next 13
pagesdirectory.
Once that Next.js roadmap item is complete we can throw an
appdirectory example in there too
Nice one, thanks
@808734492645785600. I've come to the end of my spike but will likely be picking this up again soon
Star
Discord
online
Get dedicated engineering support directly from the Payload team.