Services

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 are checked together so preview trust can be restored.
  • Preview, publishing, route, and cache behaviour are made explicit.
  • Content modelling risks are separated from rendering and template faults.
  • Editor workflow stability and SEO‑critical output are checked together.
  • Fixes are prioritised by publishing confidence and delivery risk.

How This Usually Works

  1. Technical Diagnostic

    A focused review of affected routes, templates, deployment behaviour, crawl signals, CMS behaviour, performance bottlenecks, or code paths, followed by a prioritised fix plan the team can take into delivery.

  2. Recovery Sprint

    A short, concentrated engagement for a defined technical SEO, performance, CMS, Vercel, migration, or production issue where the business needs the cause isolated and the first fixes moved quickly.

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.

Get in touch about the CMS issue

A short description of the CMS problem and where preview, publishing, or releases are losing trust is enough. I'll read it and suggest the next step.

Get in touch

Related Case Studies and Project Work

  1. Screenshot of the Nando’s website; part of John Kavanagh's selected project work.

    A Complete Migration and Replatform for Nando’s

    On Nando’s, headless content, Next.js rendering, Vercel deployment behaviour, and search‑critical local pages had to work as one system.

    View case study

More Specific Service Pages

Related Services

All Services

Related Technical Articles