Loading auth...
Hard15 minNext.js Fundamentals
UpdatedAug 3, 2026
Edit

Next.js Draft Mode (Preview)

CONCEPTS:Next.js Draft Mode

Question Variations

  • "How do you implement a preview mode for a Headless CMS in Next.js?"
  • "What happens to the Data Cache when Draft Mode is enabled?"
  • "How does Next.js know to show draft content instead of the production version?"
  • "Is Draft Mode available in the Pages Router?" (Answer: It was called Preview Mode there, but the concept is similar).

Why This Is Asked

Static sites are great for speed but historically bad for content editors who need real-time previews. Next.js solves this with Draft Mode. Interviewers want to know if you can integrate a CMS effectively and understand how Next.js handles bypassing caches for specific sessions.

Key Concepts

  • draftMode() function: How to enable/disable it.
  • Cookies: The mechanism used to track the draft session.
  • Cache Bypassing: How fetch behavior changes when Draft Mode is active.
  • Security: Using a secret token to prevent unauthorized access to Draft Mode.

Question Variations

  • “How do you implement a preview mode for a Headless CMS in Next.js?”
  • “What happens to the Data Cache when Draft Mode is enabled?”
  • “How does Next.js know to show draft content instead of the production version?”
  • “Is Draft Mode available in the Pages Router?” (Answer: It was called Preview Mode there, but the concept is similar).

Answers by Technology

+ Add Variant
Next.jsImprove this answer ✏️

Expected Answer

Next.js Draft Mode allows you to bypass the static cache for specific users (like content editors).

Workflow:

  1. Secret Token: You define a secret token shared between your Next.js app and your CMS.
  2. Route Handler: You create a route (e.g., /api/draft) that validates the secret token and a slug from the CMS.
  3. Enable: If valid, the handler calls draftMode().enable(). This sets a __prerender_bypass cookie.
  4. Dynamic Rendering: When this cookie is present, all subsequent requests for that user session will bypass the Data Cache and Full Route Cache.
  5. Redirect: The user is redirected to the actual page (e.g., /blog/my-post), which now shows the latest draft data from the CMS.

Why It Matters

Draft Mode provides the best of both worlds: static performance for the public and dynamic, real-time updates for editors. It’s a key selling point for using Next.js with modern Headless CMSs like Sanity, Contentful, or Strapi.

Example Code

Enabling Draft Mode

TypeScript

// app/api/draft/route.ts
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const slug = searchParams.get('slug');

  if (secret !== process.env.DRAFT_SECRET || !slug) {
    return new Response('Invalid token', { status: 401 });
  }

  draftMode().enable();
  redirect(`/posts/${slug}`);
}

JavaScript

// app/api/draft/route.js
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const slug = searchParams.get('slug');

  if (secret !== process.env.DRAFT_SECRET || !slug) {
    return new Response('Invalid token', { status: 401 });
  }

  draftMode().enable();
  redirect(`/posts/${slug}`);
}

Checking in a Page

// app/posts/[slug]/page.tsx
import { draftMode } from 'next/headers';

export default async function Page({ params }) {
  const { isEnabled } = draftMode();
  
  // Use a different API endpoint or flag if draft mode is enabled
  const data = await getPost(params.slug, isEnabled);

  return <div>{isEnabled ? 'PREVIEW MODE' : ''} ...</div>;
}

Common Mistakes

  • Not securing the endpoint: If you don’t use a secret token, anyone can enable draft mode and potentially put extra load on your CMS or view unreleased content.
  • Forgetting to disable: Not providing a way to turn off draft mode can be confusing for editors who want to see the live site again.
  • CSR vs SSR: Thinking draft mode only works on the client. It is a server-side feature that affects how Server Components fetch data.

Follow-up Questions

  • Can you see which user enabled draft mode? (Answer: No, Next.js only knows that it is enabled via the cookie, not who enabled it).
  • Does draft mode work with ISR? (Answer: Yes. When draft mode is on, the ISR cache is bypassed).

References