Draft Mode

Vercel's Draft Mode enables you to view your unpublished headless CMS content on your site before publishing it.

Table of Contents

Next.js (/app)

Draft Mode lets you view your unpublished headless CMS content on your website rendered with all the normal styling and layout that you would see once published.

Both Next.js and SvelteKit support Draft Mode. Any framework that uses the Build Output API can support Draft Mode by adding the bypassToken option to prerender configuration.

Draft Mode was called Preview Mode before the release of Next.js 13.4 . The name was changed to avoid confusion with preview deployments, which is a different product.

You can use Draft Mode if you:

Use Incremental Static Regeneration (ISR) to fetch and render data from a headless CMS
Want to view your unpublished headless CMS content on your site without rebuilding your pages when you make changes
Want to protect your unpublished content from being viewed publicly

How Draft Mode works

Draft Mode allows you to bypass ISR caching to fetch the latest CMS content at request time. This is useful for seeing your draft content on your website without waiting for the cache to refresh, or manually revalidating the page.

The process works like this:

Each ISR route has a bypassToken configuration option, which is assigned a generated, cryptographically-secure value at build time
When someone visits an ISR route with a bypassToken configured, the page will check for a __prerender_bypass cookie
If the __prerender_bypass cookie exists and has the same value as the bypassToken your project is using, the visitor will view the page in Draft Mode

Only team members will be able to view pages in Draft Mode.

Getting started

To use Draft Mode with Next.js on Vercel, you must:

Enable ISR on pages that fetch content. Using ISR is required on pages that you want to view in Draft Mode
Add code to your ISR pages to detect when Draft Mode is enabled and render the draft content

Toggle Draft Mode in the Vercel Toolbar by selecting the eye icon to view your draft content. Once toggled, the toolbar will turn purple, indicating that Draft Mode is enabled

Next.js (/app)

Next.js (/pages)

SvelteKit

app/page.tsx

import { draftMode } from 'next/headers';
 
async function getContent() {
  const { isEnabled } = await draftMode();
 
  const contentUrl = isEnabled
    ? 'https://draft.example.com'
    : 'https://production.example.com';
 
  // This line enables ISR, required for draft mode
  const res = await fetch(contentUrl, { next: { revalidate: 120 } });
 
  return res.json();
}
 
export default async function Page() {
  const { title, desc } = await getContent();
 
  return (
    <main>
      <h1>{title}</h1>
      <p>{desc}</p>
    </main>
  );
}

See the Next.js docs to learn how to use Draft Mode with self-hosted Next.js projects:

Once implemented, team members can access Draft Mode from the Vercel Toolbar by selecting the eye icon . Once selected, the toolbar will turn purple to indicate that Draft Mode is enabled.

Sharing drafts

To share a draft URL, it must have the ?__vercel_draft=1 query parameter. For example:

https://my-site.com/blog/post-01?__vercel_draft=1

Viewers outside your Vercel team cannot enable Draft Mode or see your draft content, even with a draft URL.

Last updated on September 27, 2024

Edit Mode

Conformance

Was this helpful?