How to Add Page Preview with Payload CMS and Next.js

Easily add Page Preview with Payload CMS and Next.js to let editors view draft content in real time. Explore our Headless CMS integration services for seamless Next.js projects.

The Preview feature in Payload CMS helps editors instantly view how content will appear on the live site. Once enabled, a Preview button appears inside the Admin Panel, linking directly to your frontend application. This removes the need for editors to manually find URLs or guess page routes, especially in complex applications.

In addition, this feature supports something called Draft Preview, which lets you enter a special “draft mode.” In this mode, your frontend displays unpublished (draft) content instead of the published version. It’s a great way to ensure that your updates look perfect before they go live.

Why Use Draft Preview?

Draft Preview bridges the gap between content creation and visual verification. Editors can test layout, design, and copy changes in real time on the frontend, reducing guesswork and errors before publishing.

Now, let’s walk through how to set up preview functionality for your pages collection using Payload CMS and Next.js.

Step 1: Enable Next.js Draft Mode

Create a new route file at:

app/(frontend)/preview/route.ts

Inside this file, you can add your own authentication or validation logic. We’ll validate that the user accessing the preview has the correct credentials and a valid preview secret.

If everything checks out, activate the Next.js draft mode and redirect the user to the path they want to preview.

Step 2: Use draftMode in Your Dynamic Page Route

In your dynamic page file:

app/(frontend)/[...path]/page.tsx

Use the `draftMode()` hook and adjust your data-fetching logic to load draft content when draft mode is active. This ensures that unpublished updates are visible during preview, without affecting the live site.

Your updated `getPage` function should conditionally fetch the draft version when draft mode is turned on.

Step 3: Configure Preview in Payload

In your Pages collection, add preview configuration logic that defines what happens when an editor clicks the Preview button in the Admin Panel.

This setup tells Payload which route to use and how to redirect to your frontend’s preview mode.

Step 4: Add the Preview Secret to Your Environment Variables

Generate a new secret key. You can do this manually or programmatically and add it to your `.env` file. This ensures that only authenticated users can access the preview environment.

Step 5: Create an Exit Preview Route

To let editors exit draft mode, add a new route:

app/(frontend)/exit-preview/route.ts

You can also display a simple banner on your frontend that includes an Exit Preview button. When clicked, it redirects users to this route and restores normal published content.

After Configuration

Once configured, your content editors can:

1. Create or edit a page in the Admin Panel.
2. Click the Preview button.
3. Instantly view unpublished content on the live frontend.

This workflow makes content editing faster, safer, and more intuitive. Payload CMS’s flexible architecture allows you to customize the preview flow further, whether by adding authentication, version control, or advanced preview states. For teams evaluating their content strategy, our comparison of traditional CMS vs headless CMS outlines the key differences in scalability, customization, and deployment flexibility.

Conclusion

Enabling Draft Preview in Payload CMS with Next.js gives your editorial team a smooth, real-time content editing experience. It bridges the gap between backend content management and frontend presentation, helping ensure every update looks perfect before it’s published.

Experiment with this setup, refine your workflow, and take full advantage of Payload’s flexibility to build an editing experience tailored to your team’s needs.