Technical Diagnostic
A focused review to establish what is happening, where the risk sits, and what should happen next, ending with a prioritised plan the team can take into delivery.
Fix Next.js Draft Mode and CMS Preview Iframe Failures
Preview may technically exist, but editors cannot trust it when cookies, auth, iframe rules, or route handling keep breaking in practice.
Restore reliable draft mode and CMS preview flows so editors can review unpublished content without fighting cookies, auth, or iframe failures.
Short Answer
Preview is only useful if editors can trust it. When draft mode, cookies, auth, iframe rules, or route handling vary by environment, teams start approving content through workarounds instead of the platform. A reliable fix reproduces the CMS preview path properly, finds the failing boundary, and stabilises the content types editors use most.
Typical Symptoms
- Editors cannot open preview routes reliably from the CMS.
- Preview cookies, auth state, or iframe behaviour are inconsistent by environment.
- Draft content preview works sometimes, but not predictably enough for editorial work.
Likely Causes
- Preview entry points are not aligned with environment, auth, or cookie behaviour.
- Draft mode is enabled inconsistently across routes or content types.
- The CMS preview model was added without enough platform‑level guardrails.
What I Look at First
- Reproduce preview from the CMS entry point across the affected environments and content types, not just from a copied URL.
- Whether the failure is route‑specific, environment‑specific, or iframe‑specific.
- Which content types or page templates are affected first.
How I Help Fix This
- Trace the failure to the route, auth, iframe, or cookie rule that is breaking preview.
- Stabilise the preview path for the important content types first.
- Roll out a preview flow that editors can trust.
When to Look at This
- When preview is blocking editorial QA or delaying content release.
- When the preview flow exists on paper but breaks often enough that teams work around it.
What Gets Resolved
- Draft Mode, iframe preview, cookies, auth, and route handling work as one reliable editorial preview path.
- Preview URLs set and clear draft state consistently across the environments editors use.
- CMS iframe requests carry the required cookies and auth without exposing unpublished content on public routes.
- Supported content types open the correct unpublished route and draft state from the CMS entry point.
- Editors can review and approve changes without copied URLs, manual cookie steps, or other preview workarounds.
How This Usually Works
Recovery Sprint
A short, concentrated engagement to isolate a defined problem, stabilise the immediate situation, and move the first fixes into delivery.
Common Questions
- Is this usually a CMS problem or a Next.js problem?
- It can be either, but most failures sit at the join between them: preview URLs, cookies, auth state, iframe restrictions, or route handling that only breaks under editorial preview conditions.
- Can you fix this without redesigning the whole preview model?
- Usually yes. The first step is to stabilise the current preview flow for the important content types, then decide whether the wider preview architecture also needs to be simplified.
More Specific Service Pages
Headless CMS Cache and Revalidation Debugging
Fix content not updating from your CMS before stale pages and revalidation failures stop editors trusting what the live site is actually showing.
Contentful Preview Performance in Next.js
Improve slow or unreliable Contentful preview before editorial latency turns preview into a bottleneck instead of a safeguard for publishing teams.
Related Services
Headless CMS Integration
Fix headless CMS operations where preview, publishing freshness, revalidation, metadata, rich text, media, environments, or editor trust has stopped being reliable.
Headless Architecture Consulting
Headless architecture advice before CMS, content model, preview, revalidation, metadata, schema, media, localisation, and editorial ownership decisions become expensive to reverse.
Vercel Deployment Debugging
Debug Vercel deployment paths where local, preview, build, and production behaviour diverge around logs, environment variables, middleware, cache, runtime behaviour, or failing routes.
Next.js Platform Consulting
Senior platform assessment and technical direction for React and Next.js estates where routing, CMS, deployment, SEO, ownership, and delivery risk have become one problem.
Related Technical Articles
Preview Mode in Next.js with a Headless CMS. Preview Mode in Next.js with a Headless CMS
Preview Mode in Next.js explained with a headless CMS, draft content workflows, preview cookies, and how editors can see unpublished pages safely.
Fixing Contentful Preview in Next.js Draft Mode. Fixing Contentful Preview in Next.js Draft Mode
Fix Contentful preview in Next.js by checking Draft Mode, preview URLs, iframe cookies, draft data boundaries, auth, performance, and editor trust.
CMS Preview Should Be a Migration Requirement, Not an Afterthought. CMS Preview Should Be a Migration Requirement, Not an Afterthought
Why CMS preview belongs in the migration plan for Next.js sites, covering draft state, auth, cookies, iframes, cache invalidation, and governance.
Previewing CMS Content in Gatsby Workflows. Previewing CMS Content in Gatsby Workflows
Plan CMS preview in Gatsby workflows by setting expectations around draft content, preview builds, webhooks, deployment timing, and editor confidence.
Rendering CMS Rich Text Safely in Gatsby and React. Rendering CMS Rich Text Safely in Gatsby and React
Render CMS rich text safely in Gatsby and React with node mapping, link handling, embeds, headings, validation, and failure‑safe fallbacks.
Planning Content Models for a Headless CMS. Planning Content Models for a Headless CMS
How to plan headless CMS content models around reusable content, editor workflows, front‑end rendering, SEO fields, references, and migration risk.