If you can still see unpublished content after finishing a preview, your browser may still be in Next.js Draft Mode. Draft Mode is a preview state—not publication—and its __prerender_bypass cookie affects later requests from that browser. In the App Router, clear it with a Route Handler that awaits draftMode() and calls disable().
Why draft content remains visible after previewing
Next.js Draft Mode lets an application preview draft content from a headless CMS without rebuilding statically generated pages. When a request carries the Draft Mode cookie, Next.js renders the page at request time, allowing it to fetch draft data. As a result, a developer may continue to see unpublished content in the same browser after the editorial preview is over.
As an Amazon Associate I earn from qualifying purchases.
That does not mean the content has been published or that every visitor can see it. The preview state belongs to requests carrying the browser’s __prerender_bypass cookie. By default, the Draft Mode session ends when the browser is closed, or it can be ended explicitly by clearing the cookie. Next.js documents the cookie and session behavior in the draftMode API reference.
Disable Draft Mode in the App Router
In current App Router code, draftMode() is asynchronous. Put the disable call in a Route Handler and call that route when you want to leave preview mode:
#1 Best Overall
import { draftMode } from 'next/headers'
export async function GET() {
const draft = await draftMode()
draft.disable()
return new Response('Draft mode is disabled')
}Calling disable() deletes the Draft Mode cookie. The handler above uses a GET request, as in the Next.js API reference example; trigger it only when the user intentionally exits preview.
Prevent a Link from clearing the cookie during prefetch
If the disable route is linked with Next.js <Link>, set prefetch={false}. Otherwise, Next.js may prefetch the route and invoke it before the user chooses to leave preview, clearing the cookie unexpectedly.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<Link href="/api/disable-draft" prefetch={false}>
Exit preview
</Link>Secure the route that enables Draft Mode
Disabling preview fixes a stale preview session; secure activation prevents unauthorized users from creating one. Next.js’s App Router guide recommends checking a shared secret, requiring a content slug, verifying that the content exists, and enabling Draft Mode only after those checks succeed. Resolve the redirect destination from the verified CMS record rather than redirecting to an untrusted query-string value such as slug, which could enable an open redirect.
- Compare the supplied secret with the secret shared by the app and CMS.
- Require a content identifier and look up that item in the CMS.
- Reject the request if the secret is invalid, the identifier is missing, or the content does not exist.
- Enable Draft Mode, then redirect to the path resolved from the verified CMS record.
Next.js changes the built-in bypass cookie value each time next build runs, making the value harder to guess. That is not a substitute for protecting the route that issues the cookie with a secret and content validation. See the Next.js Draft Mode guide for the documented activation pattern.
Rank #3
App Router and Pages Router use different APIs
Do not copy a Pages Router example into an App Router application. The documented APIs and rendering paths differ:
| Router | Draft Mode API | How to disable it | Cache guidance |
|---|---|---|---|
| App Router | draftMode() from next/headers |
In a Route Handler, await draftMode() and call disable(). |
Request state is read with the App Router API; cache behavior may also depend on application and deployment configuration. |
| Pages Router | Legacy Pages Router APIs, including res.setDraftMode and the getStaticProps/getServerSideProps context |
Use the documented setDraftMode({ enable: false }) API. |
The Pages Router guide warns not to set Cache-Control when using Draft Mode; consult its ISR guidance. |
The Pages Router details are in the separate Next.js Pages Router Draft Mode guide. The API reference says Draft Mode was introduced in Next.js v13.4.0 and that draftMode became async in v15.0.0-RC; synchronous access in Next.js 15 was retained for backward compatibility but is deprecated. Follow the API for the router and version your application actually uses.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
What to check if draft content still appears
If the App Router disable handler ran but the page still shows a draft, trace the request and data path rather than assuming a cache header will fix it:
Recommended Free Tools
- Check whether the browser still has the
__prerender_bypasscookie and whether the disable route actually ran. - Confirm which CMS data source the page uses in preview mode versus published mode.
- Investigate application and deployment caching for the affected page and data. The outcome depends on the implementation and host; the Next.js documentation does not establish one universal host-specific result.
- Do not assume that adding a generic
Cache-Controlheader bypasses Draft Mode. The Pages Router guide specifically warns that Draft Mode cannot bypass that header and points to ISR guidance instead.
In code using cache scopes, request APIs such as draftMode() cannot be accessed inside a 'use cache' function. Read request state outside the cached function and pass the needed value in. Next.js explains this constraint in its request-information access guidance.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
