Next.js - draftMode() Function

---

---

The draftMode() Function

The Next.js draftMode() function is used to check if the current request is in draft mode. It is helpful to conditionally render content based on whether the request is in draft mode or not.

Syntax

Following is the syntax of draftMode() function:

import { draftMode } from 'next/headers'

export default async function Page() {
    const isDraft = await draftMode()
    if (isDraft) {
        return 'This page is in draft mode'
    } else {
        return 'This page is not in draft mode'
    }
}

Parameters

The draftMode() function does not take any parameters.

Return Value

The draftMode() function returns a Promise object that resolves to a boolean value. The boolean value is true if the current request is in draft mode, and false otherwise. The object can also be used to enable/disable draft mode.

Enabling Draft Mode

To enable Draft Mode, create a new Route Handler and call the enable() method:

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('Draft mode is enabled')
}

Example 1

The following example demonstrates how to use the draftMode() function to conditionally render content based on whether the request is in draft mode or not.

import { draftMode } from 'next/headers'

export default async function Page() {
    const isDraft = await draftMode()
    if (isDraft) {
        return 'This page is in draft mode'
    } else {
        return 'This page is not in draft mode'
    }
}

Example 2

The following example demonstrates how to use the draftMode() function to enable/disable draft mode based on a query parameter.

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
    const draft = await draftMode()
    draft.enable()
    return new Response('Draft mode is enabled')
}