Entwurfsmodus
Der Entwurfsmodus ermöglicht Ihnen die Vorschau von Entwurfsinhalten aus Ihrem headless CMS in Ihrer Next.js-Anwendung. Dies ist nützlich für statische Seiten, die zur Bauzeit generiert werden, da er es Ihnen erlaubt, zur dynamischen Rendering zu wechseln und die Entwurfsänderungen zu sehen, ohne Ihre gesamte Website neu erstellen zu müssen.
Diese Seite zeigt, wie Sie den Entwurfsmodus aktivieren und verwenden können.
Schritt 1: Route-Handler erstellen
Erstellen Sie einen Route-Handler. Er kann einen beliebigen Namen haben, zum Beispiel app/api/draft/route.ts.
export async function GET(request: Request) {
return new Response('')
}export async function GET() {
return new Response('')
}Importieren Sie dann die draftMode-Funktion und rufen Sie die enable()-Methode auf.
import { draftMode } from 'next/headers'
export async function GET(request: Request) {
const draft = await draftMode()
draft.enable()
return new Response('Entwurfsmodus ist aktiviert')
}import { draftMode } from 'next/headers'
export async function GET(request) {
const draft = await draftMode()
draft.enable()
return new Response('Entwurfsmodus ist aktiviert')
}Dies setzt einen Cookie, um den Entwurfsmodus zu aktivieren. Nachfolgende Anfragen mit diesem Cookie lösen den Entwurfsmodus 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. Achten Sie auf den Set-Cookie-Antwortheader mit einem Cookie namens __prerender_bypass.
Schritt 2: Auf den Route-Handler über Ihr Headless CMS zugreifen
Diese Schritte setzen voraus, dass Ihr Headless CMS die Festlegung von benutzerdefinierten Entwurfs-URLs unterstützt. Falls nicht, können Sie diese Methode trotzdem verwenden, um Ihre Entwurfs-URLs zu sichern, müssen die Entwurfs-URL aber manuell erstellen und aufrufen. Die spezifischen Schritte variieren je nach verwendetem Headless CMS.
Um sicher auf den Route-Handler von Ihrem Headless CMS zuzugreifen:
- Erstellen Sie einen geheimen Token-String mit einem Token-Generator Ihrer Wahl. Diesen Geheimcode kennen nur Ihre Next.js-App und Ihr Headless CMS.
- Wenn Ihr Headless CMS die Festlegung benutzerdefinierter Entwurfs-URLs unterstützt, geben Sie eine Entwurfs-URL an (dies setzt voraus, dass Ihr Route-Handler sich unter
app/api/draft/route.tsbefindet). Zum Beispiel:
https://<ihre-seite>/api/draft?secret=<token>&slug=<pfad>
<ihre-seite>sollte Ihre Deployment-Domain sein.<token>sollte durch den generierten Geheimcode ersetzt werden.<pfad>sollte der Pfad für die Seite sein, die Sie anzeigen möchten. Wenn Sie/posts/oneanzeigen möchten, verwenden Sie&slug=/posts/one.Ihr Headless CMS erlaubt möglicherweise eine Variable in der Entwurfs-URL, sodass
<pfad>dynamisch basierend auf den Daten des CMS festgelegt werden kann, z.B.:&slug=/posts/{entry.fields.slug}
- Überprüfen Sie im Route-Handler, dass der Geheimcode übereinstimmt und der
slug-Parameter existiert (andernfalls sollte die Anfrage fehlschlagen), rufen SiedraftMode.enable()auf, um den Cookie zu setzen. Leiten Sie dann den Browser zum angegebenen Pfad um:
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
export async function GET(request: Request) {
// Abfrageparameter analysieren
const { searchParams } = new URL(request.url)
const secret = searchParams.get('secret')
const slug = searchParams.get('slug')
// Geheimcode und nächste Parameter prüfen
// Diesen Geheimcode sollten nur dieser Route-Handler und das CMS kennen
if (secret !== 'MEIN_GEHEIMER_TOKEN' || !slug) {
return new Response('Ungültiger Token', { status: 401 })
}
// Headless CMS abfragen, um zu prüfen, ob der angegebene `slug` existiert
// getPostBySlug würde die erforderliche Abruflogik für das Headless CMS implementieren
const post = await getPostBySlug(slug)
// Wenn der Slug nicht existiert, Entwurfsmodus verhindern
if (!post) {
return new Response('Ungültiger Slug', { status: 401 })
}
// Entwurfsmodus aktivieren durch Setzen des Cookies
const draft = await draftMode()
draft.enable()
// Zum Pfad des abgerufenen Beitrags umleiten
// Wir leiten nicht zu searchParams.slug um, da dies zu offenen Weiterleitungs-Sicherheitslücken führen könnte
redirect(post.slug)
}import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
export async function GET(request) {
// Abfrageparameter analysieren
const { searchParams } = new URL(request.url)
const secret = searchParams.get('secret')
const slug = searchParams.get('slug')
// Geheimcode und nächste Parameter prüfen
// Diesen Geheimcode sollten nur dieser Route-Handler und das CMS kennen
if (secret !== 'MEIN_GEHEIMER_TOKEN' || !slug) {
return new Response('Ungültiger Token', { status: 401 })
}
// Headless CMS abfragen, um zu prüfen, ob der angegebene `slug` existiert
// getPostBySlug würde die erforderliche Abruflogik für das Headless CMS implementieren
const post = await getPostBySlug(slug)
// Wenn der Slug nicht existiert, Entwurfsmodus verhindern
if (!post) {
return new Response('Ungültiger Slug', { status: 401 })
}
// Entwurfsmodus aktivieren durch Setzen des Cookies
const draft = await draftMode()
draft.enable()
// Zum Pfad des abgerufenen Beitrags umleiten
// Wir leiten nicht zu searchParams.slug um, da dies zu offenen Weiterleitungs-Sicherheitslücken führen könnte
redirect(post.slug)
}Bei Erfolg wird der Browser zum gewünschten Anzeigeweg mit dem Entwurfsmodus-Cookie weitergeleitet.
Schritt 3: Entwurfsinhalte in der Vorschau
Der nächste Schritt ist, Ihre Seite zu aktualisieren, um den Wert von draftMode().isEnabled zu prüfen.
Wenn Sie eine Seite anfordern, die den Cookie gesetzt hat, werden Daten zum Anfragezeitpunkt abgerufen (anstatt zur Bauzeit).
Darüber hinaus ist der Wert von isEnabled 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 über Ihr Headless CMS oder manuell mit der URL auf den Entwurfs-Route-Handler zugreifen (mit secret und slug), sollten Sie jetzt die Entwurfsinhalte sehen können. Und wenn Sie Ihren Entwurf aktualisieren, ohne ihn zu veröffentlichen, sollten Sie den Entwurf anzeigen können.