draftMode

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

app/page.ts

import { draftMode } from 'next/headers'
 
export default async function Page() {
  const { isEnabled } = await draftMode()
}

app/page.js

import { draftMode } from 'next/headers'
 
export default async function Page() {
  const { isEnabled } = await draftMode()
}

Referenz

Die folgenden Methoden und Eigenschaften sind verfügbar:

Methode	Beschreibung
`isEnabled`	Ein boolescher Wert, der angibt, ob der Entwurfsmodus aktiviert ist.
`enable()`	Aktiviert den Entwurfsmodus in einem Route-Handler durch Setzen eines Cookies (`__prerender_bypass`).
`disable()`	Deaktiviert den Entwurfsmodus in einem Route-Handler durch Löschen eines Cookies.

Hinweis

draftMode ist eine asynchrone Funktion, die ein Promise zurückgibt. Sie müssen async/await oder React's use Funktion verwenden.
- In Version 14 und früher war draftMode eine synchrone Funktion. Zur Abwärtskompatibilität können Sie in Next.js 15 noch synchron darauf zugreifen, aber dieses Verhalten wird in Zukunft als veraltet markiert werden.
Bei jedem Ausführen von next build wird ein neuer Bypass-Cookie-Wert generiert. Dies stellt sicher, dass der Bypass-Cookie nicht erraten werden kann.
Um den Entwurfsmodus lokal über HTTP zu testen, muss Ihr Browser Drittanbieter-Cookies und Zugriff auf den lokalen Speicher erlauben.

Beispiele

Aktivieren des Entwurfsmodus

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

app/draft/route.ts

TypeScript

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
  const draft = await draftMode()
  draft().enable()
  return new Response('Entwurfsmodus ist aktiviert')
}

app/draft/route.js

import { draftMode } from 'next/headers'
 
export async function GET(request) {
  const draft = await draftMode()
  draft().enable()
  return new Response('Entwurfsmodus ist aktiviert')
}

Deaktivieren des Entwurfsmodus

Standardmäßig endet die Entwurfsmodus-Sitzung beim Schließen des Browsers.

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

app/draft/route.ts

TypeScript

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
  const draft = await draftMode()
  draft().disable()
  return new Response('Entwurfsmodus ist deaktiviert')
}

app/draft/route.js

import { draftMode } from 'next/headers'
 
export async function GET(request) {
  const draft = await draftMode()
  draft().disable()
  return new Response('Entwurfsmodus ist deaktiviert')
}

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

Prüfen, ob der Entwurfsmodus aktiviert ist

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