Previewing draft content is a must-have for content editors. With Payload CMS and Next.js, it’s easier than ever to implement seamless draft previews using Payload’s built-in support and Next.js draftMode.

This guide will walk you through how to add preview support for your pages collection using the latest best practices.

I recommend you read our first blog about payload so you can have a working setup!

🟣 Enable draftMode

Add the following route app/(frontend)/preview/route.ts

In here you can add any authentication and validation logic that you desire. For this example we'll keep it simple and just validate that whoever tries to access draft preview has a valid user and the correct preview secret.

If everything goes well, we enable next js draft mode and redirect to the path the user wants to preview.

🟣 Use draftMode in Your Dynamic Page Route

In your app/(frontend)[...path]/page.tsx, use draftMode() and fetch the page as a draft if draft mode is on:

As you may notice, we just slightly modified our logic from the previous blog.

Here is how our getPage function will look like:

🟣 Configure Preview in Payload

In your pages collection add the following logic:

This will tell payload what to do and where to redirect when you click on the preview button in the admin panel.

🟣 Add the new preview secret to your env

You can generate it in any way you like

✅ You’re Done!

Your editors can now:

• Create or update a page

• Click the “Preview” link in the admin panel

• View the draft content in real time

For bonus points, you can create a simple banner so editors can exit preview as follows:

And add the following route /app/(frontend)/exit-preview/route.ts

As always, feel free to customize and experiment with the code to your heart’s content. One of the great things about Payload is its flexibility - you can easily build your own custom functionality, so have fun exploring!