Set up draft mode and visual preview

Wire Next.js Draft Mode and the Sanity Presentation tool together so editors can preview unpublished content on the live frontend.

Set this up before launch. It requires configuration in both Next.js and Sanity Studio.

Generate a random string and store it in both projects:

# .env.local (Next.js)
SANITY_PREVIEW_SECRET=your-random-string-here
NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production

Ask AI to set up both sides in one pass:

@next/app/ @sanity/sanity.config.ts Set up Next.js Draft Mode and the Sanity Presentation tool together. Create app/api/draft/route.ts — a GET route that validates a secret query param against SANITY_PREVIEW_SECRET, enables draft mode, and redirects to the slug param. Then update sanity.config.ts to add the presentationTool plugin pointing at /api/draft as the preview enable endpoint. Use the existing plugin array structure in the config file.

Once wired up, open Studio and navigate to Presentation. Clicking Open Preview should load your Next.js frontend with draft content visible. Unpublished changes appear in the preview in real time.

Next, you’ll work through the launch checklist and transfer DNS.

Mark lesson as complete

You have 1 uncompleted task in this lesson

0 of 1

Create a preview secret

Wire up Draft Mode and the Presentation tool