draftMode

draftMode — это асинхронная функция, которая позволяет включать и отключать режим черновика (Draft Mode), а также проверять, активен ли он в серверном компоненте (Server Component).

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
}

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
}

Справочник

Доступны следующие методы и свойства:

Метод	Описание
`isEnabled`	Логическое значение, указывающее, включён ли режим черновика.
`enable()`	Включает режим черновика в обработчике маршрута, устанавливая cookie (`__prerender_bypass`).
`disable()`	Отключает режим черновика в обработчике маршрута, удаляя cookie.

Полезно знать

draftMode — это асинхронная функция, возвращающая промис. Необходимо использовать async/await или функцию use из React.
- В версии 14 и ранее draftMode была синхронной функцией. Для обеспечения обратной совместимости в Next.js 15 её всё ещё можно использовать синхронно, но это поведение будет устаревшим в будущем.
Новое значение bypass cookie генерируется при каждом запуске next build. Это гарантирует, что cookie не может быть угадан.
Для тестирования режима черновика локально через HTTP ваш браузер должен разрешать использование сторонних cookie и доступ к локальному хранилищу.

Примеры

Включение режима черновика

Чтобы включить режим черновика, создайте новый обработчик маршрута (Route Handler) и вызовите метод enable():

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('Режим черновика включён')
}

import { draftMode } from 'next/headers'

export async function GET(request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('Режим черновика включён')
}

Отключение режима черновика

По умолчанию сессия режима черновика завершается при закрытии браузера.

Чтобы отключить режим черновика вручную, вызовите метод disable() в вашем обработчике маршрута (Route Handler):

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('Режим черновика отключён')
}

import { draftMode } from 'next/headers'

export async function GET(request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('Режим черновика отключён')
}

Затем отправьте запрос для вызова обработчика маршрута. Если вы вызываете маршрут с помощью компонента <Link>, необходимо передать prefetch={false}, чтобы случайно не удалить cookie при предварительной загрузке.

Проверка активности режима черновика

Вы можете проверить, включён ли режим черновика в серверном компоненте, используя свойство isEnabled:

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>Моя запись в блоге</h1>
      <p>Режим черновика сейчас {isEnabled ? 'включён' : 'отключён'}</p>
    </main>
  )
}

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>Моя запись в блоге</h1>
      <p>Режим черновика сейчас {isEnabled ? 'включён' : 'отключён'}</p>
    </main>
  )
}

История версий

Версия	Изменения
`v15.0.0-RC`	`draftMode` теперь асинхронная функция. Доступен кодмод (codemod).
`v13.4.0`	Добавлена функция `draftMode`.

Draft Mode

Next.js предоставляет режим черновика (Draft Mode) для переключения между статическими и динамическими страницами. Здесь вы узнаете, как это работает с App Router.