Vorschau von Inhalten mit dem Draft Mode in Next.js

Draft Mode ermöglicht es Ihnen, Entwurfsinhalte aus Ihrem Headless-CMS in Ihrer Next.js-Anwendung in der Vorschau anzuzeigen. Dies ist besonders nützlich für statische Seiten, die zum Build-Zeitpunkt generiert werden, da Sie so zu dynamischem Rendering wechseln und die Entwurfsänderungen sehen können, ohne die gesamte Website neu bauen zu müssen.

Diese Seite erklärt, wie Sie den Draft Mode aktivieren und nutzen können.

Schritt 1: Erstellen eines Route Handlers

Erstellen Sie einen Route Handler. Er kann beliebig benannt werden, z.B. app/api/draft/route.ts.

export async function GET(request: Request) {
  return new Response('')
}

Importieren Sie dann die Funktion draftMode und rufen Sie 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')
}

Dadurch wird ein Cookie gesetzt, um den Draft Mode zu aktivieren. Nachfolgende Anfragen, die dieses Cookie enthalten, lösen den Draft Mode aus und ändern das Verhalten statisch generierter Seiten.

Sie können dies manuell testen, indem Sie /api/draft aufrufen und die Entwicklertools Ihres Browsers überprüfen. Beachten Sie den Set-Cookie-Antwortheader mit einem Cookie namens __prerender_bypass.

Schritt 2: Zugriff auf den Route Handler von Ihrem Headless-CMS aus

Diese Schritte setzen voraus, dass Ihr Headless-CMS das Setzen benutzerdefinierter Draft-URLs unterstützt. Falls nicht, können Sie diese Methode dennoch verwenden, um Ihre Draft-URLs zu sichern, müssen die Draft-URL jedoch manuell erstellen und aufrufen. Die genauen Schritte variieren je nach verwendetem Headless-CMS.

So greifen Sie sicher auf den Route Handler von Ihrem Headless-CMS aus zu:

1. Erstellen Sie einen geheimen Token-String mit einem Token-Generator Ihrer Wahl. Dieser Token sollte nur Ihrer Next.js-App und Ihrem Headless-CMS bekannt sein.
2. Falls Ihr Headless-CMS benutzerdefinierte Draft-URLs unterstützt, geben Sie eine Draft-URL an (hier wird angenommen, dass sich Ihr Route Handler unter app/api/draft/route.ts befindet). Beispiel:

https://<your-site>/api/draft?secret=<token>&slug=<path>

• <your-site> sollte Ihre Bereitstellungsdomain sein.
• <token> sollte durch den generierten geheimen Token ersetzt werden.
• <path> sollte der Pfad der Seite sein, die Sie anzeigen möchten. Wenn Sie /posts/one anzeigen möchten, sollten Sie &slug=/posts/one verwenden.

Ihr Headless-CMS könnte es ermöglichen, eine Variable in der Draft-URL zu verwenden, sodass <path> dynamisch basierend auf den Daten des CMS gesetzt werden kann, z.B.: &slug=/posts/{entry.fields.slug}

3. Überprüfen Sie in Ihrem Route Handler, ob der Token übereinstimmt und der slug-Parameter vorhanden ist (falls nicht, sollte die Anfrage fehlschlagen), rufen Sie draftMode.enable() auf, um das Cookie zu setzen. Leiten Sie dann den Browser zum durch slug angegebenen Pfad weiter:

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

export async function GET(request: Request) {
  // Query-String-Parameter parsen
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const slug = searchParams.get('slug')

  // Token und Parameter überprüfen
  // Dieser Token sollte nur diesem Route Handler und dem CMS bekannt sein
  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
    return new Response('Invalid token', { status: 401 })
  }

  // Headless-CMS abfragen, um zu prüfen, ob der angegebene `slug` existiert
  // getPostBySlug würde die erforderliche Abfragelogik für das Headless-CMS implementieren
  const post = await getPostBySlug(slug)

  // Falls der slug nicht existiert, wird der Draft Mode nicht aktiviert
  if (!post) {
    return new Response('Invalid slug', { status: 401 })
  }

  // Draft Mode durch Setzen des Cookies aktivieren
  const draft = await draftMode()
  draft.enable()

  // Zum Pfad des abgerufenen Posts weiterleiten
  // Wir leiten nicht zu searchParams.slug weiter, da dies zu Open-Redirect-Schwachstellen führen könnte
  redirect(post.slug)
}

Wenn dies erfolgreich ist, wird der Browser zu dem gewünschten Pfad mit dem Draft-Mode-Cookie weitergeleitet.

Schritt 3: Vorschau der Entwurfsinhalte

Der nächste Schritt besteht darin, Ihre Seite so anzupassen, dass sie den Wert von draftMode().isEnabled überprüft.

Wenn Sie eine Seite aufrufen, für die das Cookie gesetzt ist, werden die Daten zum Anfragezeitpunkt (anstatt zum Build-Zeitpunkt) abgerufen.

Darüber hinaus ist der Wert von isEnabled dann true.

// Seite, die Daten abruft
import { draftMode } from 'next/headers'

async function getData() {
  const { isEnabled } = await draftMode()

  const url = isEnabled
    ? 'https://draft.example.com'
    : 'https://production.example.com'

  const res = await fetch(url)

  return res.json()
}

export default async function Page() {
  const { title, desc } = await getData()

  return (
    <main>
      <h1>{title}</h1>
      <p>{desc}</p>
    </main>
  )
}

Wenn Sie auf den Draft Route Handler (mit secret und slug) von Ihrem Headless-CMS aus oder manuell über die URL zugreifen, sollten Sie nun die Entwurfsinhalte sehen können. Und wenn Sie Ihren Entwurf aktualisieren, ohne ihn zu veröffentlichen, sollten Sie die Änderungen in der Vorschau sehen können.