Draft ModeStatic rendering is useful when your pages fetch data from a headless CMS. However, it’s not ideal when you’re writing a draft on your headless CMS and want to view the draft immediately on your page. You’d want Next.js to render these pages at request time instead of build time and fetch the draft content instead of the published content. You’d want Next.js to switch to dynamic rendering only for this specific case.
Next.js has a feature called Draft Mode which solves this problem. Here are instructions on how to use it.
Step 1: Create and access the Route Handler
First, create a Route Handler. It can have any name - e.g. app/api/draft/route.ts
Then, import draftMode from next/headers and call the enable() method.
app/api/draft/route.ts // route handler enabling draft mode
import { draftMode } from 'next/headers'