Seminar Storyblok Frontend-Entwicklung mit Next.js und Nuxt

Beschreibung: Dieses Seminar führt durch die Entwicklung Storyblok-basierter Frontends mit modernen JavaScript-Frameworks. Der Schwerpunkt liegt auf Projektstruktur, SDK-Anbindung, dynamischem Rendering, Vorschau, mehrsprachigen Inhalten und stabilen Komponenten.

Seminarziel: Nach dem Seminar können Frontends Inhalte aus Storyblok laden, Komponenten dynamisch rendern, Vorschau-Funktionen einbinden und Projektstrukturen für wartbare Weiterentwicklung aufsetzen.

Kapitel 1: Projektsetup und SDK-Anbindung

Inhaltsverzeichnis: Projektstruktur · Umgebungsvariablen · SDK · Token

Das Frontend wird so vorbereitet, dass Storyblok-Zugriffe zentral konfiguriert werden.

1. Schritt 1: Projektstruktur und Ordnerkonzept für Komponenten, Datenzugriff und Seiten festlegen.
2. Schritt 2: Umgebungsvariablen für Token und Region einrichten.
3. Schritt 3: SDK zentral initialisieren und wiederverwendbare Abfragefunktionen erstellen.
4. Schritt 4: Verbindung mit einem Beispielinhalt prüfen.

Kapitel 2: Dynamisches Komponentenrendering

Inhaltsverzeichnis: Content-Typen · Nestable Blocks · Mapping · Fallbacks

Storyblok-Blöcke werden mit Frontend-Komponenten verbunden.

1. Schritt 1: Komponenten aus dem Content-Modell den Frontend-Komponenten zuordnen.
2. Schritt 2: Verschachtelte Blöcke iterieren und eindeutig rendern.
3. Schritt 3: Fallback-Komponenten für unbekannte oder unvollständige Blöcke einbauen.
4. Schritt 4: Props und Datenformen dokumentieren.

Kapitel 3: Routing, Sprachen und Datenvarianten

Inhaltsverzeichnis: Slugs · Dynamische Routen · Sprache · Entwurf und Live

Die Anwendung verarbeitet flexible Seitenstrukturen und Sprachvarianten.

1. Schritt 1: Slug-Strukturen aus Storyblok in Routen übersetzen.
2. Schritt 2: Dynamische Seiten für unterschiedliche Content-Typen erstellen.
3. Schritt 3: Sprachparameter und lokalisierte Inhalte einplanen.
4. Schritt 4: Entwurfsdaten und veröffentlichte Daten getrennt abrufen.

Kapitel 4: Visual Preview und redaktionelle Prüfung

Inhaltsverzeichnis: Bridge · Preview-URL · Live-Aktualisierung · Fehleranalyse

Die Vorschau wird so integriert, dass Redaktion und Entwicklung gemeinsam prüfen können.

1. Schritt 1: Vorschaupfad und lokale Entwicklungsumgebung abstimmen.
2. Schritt 2: Bridge-Funktionalität für Aktualisierung im Editor einbinden.
3. Schritt 3: Bearbeitbare Komponenten mit den nötigen Attributen versehen.
4. Schritt 4: Typische Vorschaufehler strukturiert analysieren.

Kapitel 5: Produktionsreife und Qualität

Inhaltsverzeichnis: Rendering-Strategie · Caching · Build · Monitoring

Die technische Umsetzung wird für den produktiven Betrieb vorbereitet.

1. Schritt 1: Rendering-Strategien nach Inhaltstyp und Aktualisierungshäufigkeit auswählen.
2. Schritt 2: Cache- und Revalidierungsregeln definieren.
3. Schritt 3: Build- und Deployment-Auslöser mit Content-Änderungen abstimmen.
4. Schritt 4: Fehlerprotokollierung und technische Prüfpunkte ergänzen.

Teilnehmerkreis

Inhaltsverzeichnis: Rollen · Ausgangslage · benötigtes Vorwissen

Frontend-Entwicklung, Fullstack-Entwicklung und technische Teams, die Storyblok-Inhalte in performante Websites oder Anwendungen integrieren.

Praxisformat

Inhaltsverzeichnis: Übungen · Checklisten · Arbeitsdateien · Wiederholung

Die Teilnehmenden bauen beispielhafte Seiten, registrieren Komponenten, prüfen Vorschauverhalten, konfigurieren Routen und bereiten Build- und Laufzeitvarianten vor.