Next Story
locale: de

So funktioniert es

In vier Schritten vom Entwurf zur Live-Seite

Was zwischen einer Änderung in Storyblok und der Seite passiert, die Sie gerade lesen.

Mehr erfahren

  1. 01 Bearbeiten
    Storyblok draft
  2. 02 Vorschau
    /api/preview draft
  3. 03 Veröffentlichen
  4. 04 Rendern published
Eine Änderung wird zur Vorschau und dann zur veröffentlichten Seite.

Der Weg zur Veröffentlichung

  1. Modellieren

    Blöcke sind in einer JSON-Datei definiert und werden in den Storyblok-Space übertragen. Die TypeScript-Typen entstehen aus derselben Datei.

    storyblok/components.json

  2. Vorschau

    Der Visual Editor öffnet die Preview-Route. Sie prüft Secret und Entwurf, bevor sie den Draft Mode von Next.js aktiviert.

    src/app/api/preview/route.ts

  3. Veröffentlichen

    Storyblok ruft die Revalidate-Route mit dem Story-Slug auf. Die Route prüft die Daten und lässt den Cache-Tag dieser Story ablaufen.

    src/app/api/revalidate/route.ts

  4. Ausliefern

    Die nächste Anfrage lädt die veröffentlichte Story aus dem Storyblok-CDN und rendert sie als React Server Component.

    src/lib/fetch-story.ts

Warum die Cache-Tags wichtig sind

Veröffentlichte Stories werden pro Story gecacht. Ein Publish lässt eine Story in jeder Sprache ablaufen, der Rest der Site bleibt im Cache. Entwürfe werden nie gecacht, deshalb sieht die Redaktion immer die letzte Änderung.

Den vollständigen Request-Pfad beschreibt docs/architecture.md.

Die Schema-Namen werden React-Komponenten zugeordnet

Der Server registriert die Komponenten-Zuordnung, bevor er eine Story rendert. Jeder Blockname im CMS verweist auf seine Implementierung.

TypeScriptsrc/lib/storyblok.ts
export function registerStoryblokComponents(): void {
  setComponents(storyblokComponents);
}
Die Registrierungsfunktion, die der Server-Renderer verwendet.

Sehen, wie jeder Block aussieht

Die Block-Bibliothek zeigt jede Komponente einmal, beschriftet mit ihrem Storyblok-Namen.

Block-Bibliothek öffnen

Notizen zur Umsetzung