Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
If your Next.js browser session still shows unpublished content after you finish previewing, disable Draft Mode to remove its __prerender_bypass cookie. In the current App Router, do that in a Route Handler with await draftMode() followed by draft.disable(). This clears preview mode for that browser; it does not publish the content or make it visible to other visitors.
Why unpublished content can remain visible
Next.js Draft Mode is a preview mechanism for viewing draft content from a headless CMS without rebuilding statically generated pages. When a request carries the Draft Mode cookie, Next.js can render the page at request time and fetch draft data. If you leave Draft Mode enabled, later requests from that browser can continue to use the preview behavior, so the page may still show a draft after you think the preview is over. That does not mean the content has been published or that every visitor can see it. Next.js explains Draft Mode for the App Router.
By default, the Draft Mode session ends when the browser closes. To end it sooner, explicitly disable the mode. The Next.js draftMode API reference describes the cookie behavior: enable() sets __prerender_bypass, while disable() deletes it.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Disable Draft Mode in the App Router
Create a Route Handler that calls disable(), then request that route from the browser where you want to leave preview mode. The current API is asynchronous, so await draftMode() before calling the method.
#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')
}For example, save this handler as app/api/disable-draft/route.ts, then navigate to /api/disable-draft in the previewing browser. The route’s path is an example; use the path where you created your handler. After it runs, reload the content page to check the non-preview result.
If you use a Next.js Link
If a <Link> points to the disable endpoint, set prefetch={false}. Link prefetching can request the endpoint before the user clicks, clearing the cookie unexpectedly. For example:
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 preview
Disabling Draft Mode is only half of a safe preview flow. The route that enables it should not accept arbitrary requests that can activate preview or redirect a visitor to an untrusted destination. Next.js recommends checking a shared secret between your app and CMS, requiring a content slug, verifying that the content exists, and enabling Draft Mode only after those checks pass. Redirect to the path resolved from the verified CMS record—not to a raw query-string value such as slug, which can create an open redirect vulnerability. See the Next.js Draft Mode guide for the activation flow.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteNext.js changes the built-in bypass cookie value each time next build runs, which the API reference says prevents the value from being guessed. That is not a substitute for protecting the activation endpoint with a secret and validating the requested content.
Rank #3
App Router and Pages Router use different APIs
Do not mix examples from the two router systems. The App Router uses the asynchronous draftMode() API in a Route Handler. Draft Mode was introduced in Next.js 13.4.0; the API became asynchronous in the Next.js 15.0.0 release candidate. Next.js 15 retained synchronous access temporarily for backward compatibility, but it is deprecated. Use the awaited form in current App Router code.
The Pages Router has a separate API and data-fetching model. Its documented disabling method is res.setDraftMode({ enable: false }), used with Pages Router request/response handling rather than the App Router’s draftMode().disable(). Consult the Pages Router Draft Mode guide instead of copying an App Router handler into a Pages Router project.
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
If you still see draft content after disabling it
Check the request path in order: confirm the disable endpoint ran in the same browser, verify that the __prerender_bypass cookie is gone, and reload the page. If the cookie is cleared but the content remains, investigate which data source the page uses in preview and published modes, then review application and deployment caching. The behavior of a particular hosting cache is not established by the Next.js documentation cited here.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Do not assume adding a generic Cache-Control header will bypass Draft Mode. The Pages Router guide warns against setting that header when using Draft Mode because the mode cannot bypass it, and points to Incremental Static Regeneration (ISR) guidance instead. For App Router 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 in the value it needs; see the Next.js request-information 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.
