How to Add Preview Mode to a Next.js + Sanity Site

A static Next.js site shows published content. Editors, though, want to see a draft exactly as it will look before it goes live. That’s what preview mode is for, and on a Sanity-backed site it’s a specific, well-worn pattern once you know the moving parts.

What preview mode actually does

Preview mode flips your app into a state where it fetches draft content instead of published content, for that editor’s session only. Next.js has built-in draft-mode support that sets a cookie; while it’s active, your data-fetching reads unpublished documents from Sanity rather than the published, cached versions.

The Sanity side

To read drafts you need a token and a non-CDN, fresh read, the CDN only serves published content. The pattern is: in preview, create a Sanity client with a token and useCdn set to false, so the editor sees the very latest draft, not a cached copy.

The route that turns it on

You add an API route that validates a secret, enables draft mode, and redirects to the page being previewed. Sanity’s Presentation tool can drive this, giving editors a live side-by-side of the Studio and the rendered draft.

The traps

Two catch people out. First, protect the preview route with a secret so drafts aren’t exposed to the public. Second, make sure preview requests bypass caching entirely, a cached preview defeats the purpose and confuses editors who don’t see their latest edit.

Where hosting comes in

Preview needs a live server render with a token, it’s not something a purely static export can do. That’s one more reason a real Next.js + Sanity site wants a Node host rather than a plain CDN. We cover that trade-off at /sanity.

The bottom line

Preview mode is a small amount of plumbing that pays for itself the first time an editor catches a mistake before it ships. Get the secret and the cache-bypass right and the rest is straightforward. More on hosting the stack at /sanity.