Q24: What is Next.js Draft Mode and how does it benefit Headless CMS integrations?
Draft Mode bypasses static page caching (SSG/ISR) to show preview content live from a Headless CMS (like Contentful or Sanity). Enabled via an API route calling draftMode().enable(), which sets a temporary cookie that forces routes to switch to dynamic SSR.
Enabling Draft Mode
// app/api/draft/route.js
import { draftMode } from 'next/headers';
export async function GET(request) {
const draft = await draftMode();
draft.enable(); // Sets cookie forcing dynamic SSR preview
return new Response('Draft mode enabled');
}💡 draft.enable() sets a preview cookie that instructs Next.js to render unpublished content dynamically.
Key Takeaways
- Bypasses static page cache to render unpublished CMS drafts.
- Uses secure browser cookies to enable live preview rendering.
Knowledge Check
How does Next.js signal to route pages that Draft Mode preview rendering is active?