draftMode, fetch, and forbidden in Next.js — Managing Preview Mode, Data Caching, and Access Control

1. What Is draftMode?

draftMode() is an async function in Next.js that lets you enable, disable, or check the status of Draft Mode. It’s useful for previewing dynamic content during development or editorial workflows.

Enable Draft Mode:

// app/draft/route.ts
import { draftMode } from 'next/headers'

export async function GET() {
  const draft = await draftMode()
  draft.enable()
  return new Response('Draft mode is enabled')
}

Disable Draft Mode:

// app/draft/route.ts
import { draftMode } from 'next/headers'

export async function GET() {
  const draft = await draftMode()
  draft.disable()
  return new Response('Draft mode is disabled')
}

Check Status:

// app/page.ts
const { isEnabled } = await draftMode()
return <p>Draft Mode is {isEnabled ? 'Enabled' : 'Disabled'}</p>

2. Extended fetch API

Next.js extends the native fetch() API with options to control server-side caching:

cache option:

• 'auto': default behavior
• 'no-store': disables caching
• 'force-cache': uses cached data if available

next.revalidate:

• false: cache indefinitely
• 0: do not cache
• number: cache lifetime in seconds

next.tags:

Assign cache tags for on-demand revalidation:

fetch('https://...', {
  next: { tags: ['collection'] }
})

3. What Is forbidden?

forbidden() throws a 403 error in Next.js, useful for blocking unauthorized access. It can be used in Server Components, Server Actions, and Route Handlers.

Example in a protected page:

// app/admin/page.tsx
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'

export default async function AdminPage() {
  const session = await verifySession()
  if (session.role !== 'admin') {
    forbidden()
  }
  return <main>Welcome, {session.user.name}!</main>
}

Example in a Server Action:

// app/actions/update-role.ts
'use server'
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'

export async function updateRole(formData) {
  const session = await verifySession()
  if (session.role !== 'admin') {
    forbidden()
  }
  // continue mutation...
}

Conclusion

With draftMode, you can manage preview sessions; with extended fetch, you control data freshness; and with forbidden, you enforce secure access. These features help you build dynamic, performant, and secure applications in Next.js.