draftMode

draftMode ist eine asynchrone Funktion, die es Ihnen ermöglicht, den Draft Mode zu aktivieren und zu deaktivieren sowie zu überprüfen, ob der Draft Mode in einer Server-Komponente aktiviert ist.

import { draftMode } from 'next/headers'

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

Referenz

Die folgenden Methoden und Eigenschaften sind verfügbar:

Wissenswertes

• draftMode ist eine asynchrone Funktion, die ein Promise zurückgibt. Sie müssen async/await oder Reacts use-Funktion verwenden.
  • In Version 14 und früher war draftMode eine synchrone Funktion. Zur Unterstützung der Abwärtskompatibilität kann sie in Next.js 15 weiterhin synchron aufgerufen werden, aber dieses Verhalten wird in Zukunft veraltet sein.
• Bei jedem Aufruf von next build wird ein neuer Bypass-Cookie-Wert generiert. Dies stellt sicher, dass der Bypass-Cookie nicht erraten werden kann.
• Um den Draft Mode lokal über HTTP zu testen, muss Ihr Browser Cookies von Drittanbietern und Zugriff auf den lokalen Speicher erlauben.

Beispiele

Aktivieren des Draft Mode

Um den Draft Mode zu aktivieren, erstellen Sie einen neuen Route Handler und rufen die Methode enable() auf:

import { draftMode } from 'next/headers'

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

Deaktivieren des Draft Mode

Standardmäßig endet die Draft Mode-Sitzung, wenn der Browser geschlossen wird.

Um den Draft Mode manuell zu deaktivieren, rufen Sie die Methode disable() in Ihrem Route Handler auf:

import { draftMode } from 'next/headers'

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

Anschließend senden Sie eine Anfrage, um den Route Handler aufzurufen. Wenn Sie die Route mit der <Link>-Komponente aufrufen, müssen Sie prefetch={false} übergeben, um ein versehentliches Löschen des Cookies beim Prefetch zu verhindern.

Überprüfen, ob der Draft Mode aktiviert ist

Sie können in einer Server-Komponente mit der Eigenschaft isEnabled überprüfen, ob der Draft Mode aktiviert ist:

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>Mein Blog-Beitrag</h1>
      <p>Draft Mode ist aktuell {isEnabled ? 'aktiviert' : 'deaktiviert'}</p>
    </main>
  )
}

Versionsverlauf