Draft Mode & Preview Mode
5 questions found
What is Draft Mode in Next.js and when would you use it?
Beginner
Draft Mode lets content editors preview unpublished changes from a content management system before they go live, by temporarily bypassing the normal static caching so the page always shows the latest draft content instead of the cached published version.
// app/api/draft/route.js
import { draftMode } from 'next/headers';
export async function GET() {
const draft = await draftMode();
draft.enable();
return new Response('Draft mode enabled');
}
Real-world example
A magazine website lets its editors click a preview button in their content management system, which enables Draft Mode and shows them exactly how an unpublished article will look before it goes live to readers.
Common follow-ups: How does Draft Mode work together with a headless CMS?;How do you disable Draft Mode once you are done previewing?
Headless CMS Integration;Rendering (SSR/SSG/ISR)
How do you fetch draft or unpublished content differently from published content when Draft Mode is enabled?
Intermediate
You check whether Draft Mode is currently enabled inside your data fetching function, and if it is, you request the draft version of the content from your content management system's API instead of the published version, usually by passing a different query parameter or using a preview specific API token.
import { draftMode } from 'next/headers';
async function getPost(slug) {
const { isEnabled } = await draftMode();
const url = isEnabled
? `https://cms.example.com/posts/${slug}?preview=true`
: `https://cms.example.com/posts/${slug}`;
const res = await fetch(url);
return res.json();
}
Real-world example
A blog checks if Draft Mode is enabled before deciding whether to request the published or the draft version of an article from its headless CMS, giving editors an accurate live preview.
Common follow-ups: What security measures should protect the endpoint that enables Draft Mode?;Can regular visitors accidentally trigger Draft Mode?
Data Fetching;Security Best Practices in Next.js
How do you secure the route that enables Draft Mode so random visitors cannot use it?
Intermediate
You require a secret token as a query parameter when enabling Draft Mode, checking that the provided token matches a secret value stored in your environment variables before actually enabling it, ensuring only people with the correct secret link, usually shared by your CMS, can preview draft content.
export async function GET(request) {
const secret = request.nextUrl.searchParams.get('secret');
if (secret !== process.env.DRAFT_SECRET) {
return new Response('Invalid token', { status: 401 });
}
const draft = await draftMode();
draft.enable();
return new Response('Draft mode enabled');
}
Real-world example
A news organization protects its Draft Mode endpoint with a secret token stored in environment variables, so only links generated by their content management system can activate preview mode.
Common follow-ups: Where should this secret token be stored securely?;What happens if the secret token is leaked publicly?
Environment Variables & Configuration Management;Authentication & Authorization in Next.js
How does enabling Draft Mode affect caching behavior for a page that is normally statically generated?
Advanced
When Draft Mode is enabled, Next.js automatically switches that page to render dynamically on every request instead of using the static cached version, ensuring editors always see the very latest draft content, while regular visitors without Draft Mode enabled continue to see the fast, cached static version.
// The same page automatically behaves differently
// depending on whether Draft Mode is active for that visitor
export default async function Page({ params }) {
const post = await getPost(params.slug);
return <Article post={post} />;
}
Real-world example
An editor previewing an unpublished article always sees the freshest content thanks to Draft Mode disabling the cache for their session, while regular readers continue to get the fast, cached published version.
Common follow-ups: Does Draft Mode affect performance for regular visitors who are not previewing content?;How is the Draft Mode cookie stored and how long does it last?
Rendering (SSR/SSG/ISR);Caching
How would you build a complete preview workflow connecting a headless CMS to Draft Mode in Next.js?
Advanced
You configure your CMS to generate a preview link containing a secret token and the content slug, pointing to your Draft Mode enabling route, which verifies the secret, enables Draft Mode, and redirects the editor to the actual content page, which then fetches and displays the unpublished draft version.
export async function GET(request) {
const secret = request.nextUrl.searchParams.get('secret');
const slug = request.nextUrl.searchParams.get('slug');
if (secret !== process.env.DRAFT_SECRET) {
return new Response('Invalid token', { status: 401 });
}
const draft = await draftMode();
draft.enable();
redirect(`/posts/${slug}`);
}
Real-world example
A publishing company sets up a full preview button inside their CMS that links directly to their Next.js Draft Mode route, letting editors instantly view any unpublished article exactly as it will appear once published.
Common follow-ups: How do you exit Draft Mode once an editor is finished previewing?;What happens if the slug in the preview link does not match any existing content?
Headless CMS Integration;Route Handlers (API Route.js)