Sanity draft mode preview on Vercel edge sounds simple until you hit the edge runtime's cookie restrictions, a leaked preview secret in a Git repo, or a client asking why their unpublished page just appeared in Google Search Console. This post walks through the exact setup I ship on production projects: a typed route handler, an HttpOnly cookie, and Vercel Edge Config so you can rotate the secret without a redeploy.
How Sanity draft mode preview actually works in Next.js App Router
Next.js ships a built-in Draft Mode API (draftMode() from next/headers). When it is enabled for a request, fetch cache is bypassed and you can make authenticated Sanity queries that include _id values starting with drafts.. Sanity's hosted CDN never serves drafts — you query the API directly with a token. The flow is:
Editor clicks the preview URL (usually https://your-site.vercel.app/api/preview?secret=XXX&slug=/some-page).
Your route handler validates the secret, calls draftMode().enable(), and redirects to the slug.
