draftMode

draftMode es una función asíncrona que te permite habilitar y deshabilitar el Modo Borrador, así como verificar si el Modo Borrador está habilitado en un Componente de Servidor.

import { draftMode } from 'next/headers'

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

Referencia

Los siguientes métodos y propiedades están disponibles:

Bueno saber

• draftMode es una función asíncrona que devuelve una promesa. Debes usar async/await o la función use de React.
  • En la versión 14 y anteriores, draftMode era una función síncrona. Para mantener la compatibilidad hacia atrás, aún puedes acceder a ella de forma síncrona en Next.js 15, pero este comportamiento quedará obsoleto en el futuro.
• Se generará un nuevo valor de cookie de bypass cada vez que ejecutes next build. Esto asegura que la cookie de bypass no pueda ser adivinada.
• Para probar el Modo Borrador localmente sobre HTTP, tu navegador deberá permitir cookies de terceros y acceso al almacenamiento local.

Ejemplos

Habilitando el Modo Borrador

Para habilitar el Modo Borrador, crea un nuevo Manejador de Ruta y llama al método enable():

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('El modo borrador está habilitado')
}

Deshabilitando el Modo Borrador

Por defecto, la sesión del Modo Borrador termina cuando se cierra el navegador.

Para deshabilitar el Modo Borrador manualmente, llama al método disable() en tu Manejador de Ruta:

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('El modo borrador está deshabilitado')
}

Luego, envía una solicitud para invocar el Manejador de Ruta. Si llamas a la ruta usando el componente <Link>, debes pasar prefetch={false} para evitar eliminar accidentalmente la cookie durante el prefetch.

Verificando si el Modo Borrador está habilitado

Puedes verificar si el Modo Borrador está habilitado en un Componente de Servidor con la propiedad isEnabled:

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>Mi publicación de blog</h1>
      <p>El Modo Borrador está actualmente {isEnabled ? 'Habilitado' : 'Deshabilitado'}</p>
    </main>
  )
}

Historial de versiones