Next.js Draft Mode: Previewing Static Content

WHY IT EXISTS Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are fast, but they create a problem for content creators. How can they preview their changes on the live site without publishing them to everyone or waiting for a full site rebuild? Draft Mode was created to solve this exact preview problem.

THE MENTAL MODEL Draft Mode is like a temporary VIP pass for your browser. Normally, Next.js shows everyone the pre-built, static version of a page. With the pass (a browser cookie), Next.js knows to ignore the static cache just for you and instead fetch the very latest, unpublished content on-demand from your data source, like a headless CMS.

HOW IT WORKS The process starts with a special link, often from a CMS's "Preview" button. This link hits a dedicated API Route in your Next.js app. This route validates a secret token, then calls draftMode().enable(), which sets a secure cookie in your browser. The route then redirects you to the page you want to preview. Because the cookie is now present, Next.js will bypass the static cache for you and re-fetch the data for the page, ensuring you see the freshest draft content.

WHEN TO USE IT Use Draft Mode whenever you have a headless CMS (like Contentful, Sanity, or Strapi) feeding content to a Next.js site that uses SSG or ISR. It is the standard mechanism for enabling a content preview workflow for editors and writers, bridging the gap between the CMS and the final site.

WHEN NOT TO USE IT Don't use it for sites that are purely server-rendered on every request (SSR) or client-side rendered (CSR), as there is no static content to bypass. It is also not a replacement for a proper authentication system; it's for previewing soon-to-be-public content, not for protecting sensitive user data.

ONE CANONICAL EXAMPLE A marketing editor writes a new blog post in a headless CMS. Before publishing, they click a "Preview" button. This opens a new tab to the Next.js site, enabling Draft Mode and showing them the unpublished post rendered with the live site's layout. Meanwhile, all other public visitors continue to see the existing, cached version of the site, unaware of the draft.