Seminar CrafterCMS – Headless Frontend mit React, Next.js und Experience Builder

Dieses praxisorientierte Seminar verbindet fachliche Einordnung, nachvollziehbare Konfigurationsschritte und kontrollierte Übungen an einer durchgängigen CrafterCMS-Laborumgebung. Ein redaktionell bearbeitbares, performantes und sicher ausgeliefertes Headless-Frontend wird als durchgängiges Projekt umgesetzt.

Inhaltsverzeichnis

1. Zielsetzung
2. 1. Frontend-Architektur und Content-Vertrag
3. 2. Datenzugriff mit APIs und JavaScript SDK
4. 3. React- und Next.js-Komponenten
5. 4. Experience Builder und In-Context-Bearbeitung
6. 5. Preview, Sicherheit und Caching
7. 6. Tests, Observability und Deployment
8. Praxisprojekt und Qualitätssicherung
9. Zielgruppe und Voraussetzungen
10. Didaktik und Arbeitsweise

Zielsetzung

Ein redaktionell bearbeitbares, performantes und sicher ausgeliefertes Headless-Frontend wird als durchgängiges Projekt umgesetzt. Die einzelnen Arbeitsschritte werden jeweils mit einem definierten Ausgangszustand, einem erwarteten Prüfergebnis und einer dokumentierten Korrekturmöglichkeit durchgeführt.

Seminarinhalte

1. Frontend-Architektur und Content-Vertrag

Rendering-Verantwortung, Routing, Komponentenmapping und Datenvertrag werden vor der Implementierung festgelegt. Zu jedem Arbeitsschritt wird geprüft, ob Konfiguration, Inhalt und Betriebszustand dem erwarteten Ergebnis entsprechen.

Schritt-für-Schritt

1. Schritt 1: Seitentypen und Komponenten in Frontend-Bausteine abbilden. Prüfpunkt: Jeder Inhaltstyp besitzt eine Rendering-Verantwortung.
2. Schritt 2: Benötigte Felder, Beziehungen und Medienvarianten als Vertrag definieren. Prüfpunkt: Frontend lädt weder zu viel noch zu wenig.
3. Schritt 3: Routing, Fehlerseiten und Vorschaupfade festlegen. Prüfpunkt: Navigationsverhalten ist eindeutig.
4. Schritt 4: Server-, statisches und clientseitiges Rendering projektspezifisch zuordnen. Prüfpunkt: Rendering-Modell passt zu Aktualität und Performance.
5. Schritt 5: Vertrag mit Beispielantworten testen. Prüfpunkt: Frontend und CMS besitzen dieselbe Erwartung.

2. Datenzugriff mit APIs und JavaScript SDK

REST, GraphQL und SDK werden nach Abfrageform, Typisierung, Cache und Fehlerverhalten eingesetzt. Zu jedem Arbeitsschritt wird geprüft, ob Konfiguration, Inhalt und Betriebszustand dem erwarteten Ergebnis entsprechen.

Schritt-für-Schritt

1. Schritt 1: API-Zugriff und Umgebungsendpunkte konfigurieren. Prüfpunkt: Anwendung spricht die korrekte Delivery-Instanz an.
2. Schritt 2: Seiten- und Komponentendaten strukturiert laden. Prüfpunkt: Inhalte stehen typisiert im Frontend bereit.
3. Schritt 3: GraphQL für gezielte Beziehungen und Listen einsetzen. Prüfpunkt: Abfrage liefert nur benötigte Felder.
4. Schritt 4: Fehler, leere Inhalte und Zeitüberschreitung behandeln. Prüfpunkt: Oberfläche bleibt robust.
5. Schritt 5: Zugriffsschicht mit Tests absichern. Prüfpunkt: API-Änderungen werden früh erkannt.

3. React- und Next.js-Komponenten

CMS-Inhalte werden in wiederverwendbare, testbare und barrierearme UI-Komponenten überführt. Zu jedem Arbeitsschritt wird geprüft, ob Konfiguration, Inhalt und Betriebszustand dem erwarteten Ergebnis entsprechen.

Schritt-für-Schritt

1. Schritt 1: Komponentenregistry für Content-Typen anlegen. Prüfpunkt: Dynamisches Mapping ist zentral gepflegt.
2. Schritt 2: Text-, Medien-, Listen- und Containerkomponenten implementieren. Prüfpunkt: Repräsentative Inhalte werden vollständig gerendert.
3. Schritt 3: Responsive Medien und Bildvarianten einbinden. Prüfpunkt: Darstellung ist performant und konsistent.
4. Schritt 4: Fehlende oder unbekannte Komponenten kontrolliert anzeigen. Prüfpunkt: Redaktionelle Fehler führen nicht zum Seitenabbruch.
5. Schritt 5: Komponenten mit automatisierten Tests prüfen. Prüfpunkt: Rendering bleibt bei Änderungen stabil.

4. Experience Builder und In-Context-Bearbeitung

Frontend-Komponenten werden so instrumentiert, dass Redaktionen Inhalte im Kontext auswählen, bearbeiten und anordnen können. Zu jedem Arbeitsschritt wird geprüft, ob Konfiguration, Inhalt und Betriebszustand dem erwarteten Ergebnis entsprechen.

Schritt-für-Schritt

1. Schritt 1: Experience-Builder-Bibliothek und Projektkonfiguration integrieren. Prüfpunkt: Anwendung erkennt den Bearbeitungskontext.
2. Schritt 2: Komponenten und Felder mit Bearbeitungsmetadaten verbinden. Prüfpunkt: Auswahl führt zum richtigen Inhalt.
3. Schritt 3: Container und erlaubte Komponentenbeziehungen definieren. Prüfpunkt: Drag-and-drop folgt dem Content-Modell.
4. Schritt 4: Vorschau mit Entwurfsinhalten und unterschiedlichen Geräten testen. Prüfpunkt: Redaktion sieht den erwarteten Stand.
5. Schritt 5: Fehlerhafte Instrumentierung diagnostizieren und korrigieren. Prüfpunkt: Bearbeitungsfunktionen sind vollständig.

5. Preview, Sicherheit und Caching

Vorschauzugriff, öffentliche Auslieferung und Cache-Strategie werden getrennt und dennoch konsistent betrieben. Zu jedem Arbeitsschritt wird geprüft, ob Konfiguration, Inhalt und Betriebszustand dem erwarteten Ergebnis entsprechen.

Schritt-für-Schritt

1. Schritt 1: Preview- und Live-Endpunkte sowie Zugangsschutz trennen. Prüfpunkt: Entwurfsinhalte sind nicht öffentlich erreichbar.
2. Schritt 2: Token, Cookies oder serverseitige Sitzungen sicher behandeln. Prüfpunkt: Zugangsdaten gelangen nicht in öffentliche Bundles.
3. Schritt 3: Cache-Ebenen für Seiten, Daten und Medien definieren. Prüfpunkt: Aktualität und Performance sind ausbalanciert.
4. Schritt 4: Invalidierung nach Publishing-Ereignis prüfen. Prüfpunkt: Neue Inhalte erscheinen fristgerecht.
5. Schritt 5: CORS, Sicherheitsheader und Fehlerantworten testen. Prüfpunkt: Browserzugriff ist kontrolliert.

6. Tests, Observability und Deployment

Das Frontend wird als eigenständig betreibbarer Teil der Gesamtplattform ausgeliefert und überwacht. Zu jedem Arbeitsschritt wird geprüft, ob Konfiguration, Inhalt und Betriebszustand dem erwarteten Ergebnis entsprechen.

Schritt-für-Schritt

1. Schritt 1: Unit-, Komponenten- und End-to-End-Tests in die Pipeline integrieren. Prüfpunkt: Kernabläufe werden automatisch geprüft.
2. Schritt 2: Build für Zielumgebung mit geprüfter Konfiguration erzeugen. Prüfpunkt: Artefakt ist reproduzierbar.
3. Schritt 3: Ladezeiten, Fehler und API-Latenz messbar machen. Prüfpunkt: Betrieb erkennt Frontend- und Backend-Ursachen.
4. Schritt 4: Deployment mit Preview- und Live-Konfiguration durchführen. Prüfpunkt: Beide Modi funktionieren getrennt.
5. Schritt 5: Rollback und Cache-Bereinigung testen. Prüfpunkt: Fehlerhafte Auslieferung kann sicher zurückgenommen werden.

Praxisprojekt und Qualitätssicherung

Eine React- beziehungsweise Next.js-Anwendung lädt strukturierte Inhalte, rendert Komponenten, unterstützt Vorschau und In-Context-Bearbeitung und wird mit Caching, Tests und Deployment-Pipeline produktionsnah bereitgestellt. Die Übung wird mit einer Abnahmeliste abgeschlossen, die Funktionsprüfung, Fehlerfall, Dokumentation und reproduzierbaren Wiederanlauf umfasst.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend-Entwicklung, Full-Stack-Entwicklung, Lösungsarchitektur und technische Projektleitung.

Voraussetzungen: Sichere Kenntnisse in JavaScript oder TypeScript, React, Web-APIs und Git; grundlegende CrafterCMS- und Content-Modellierungskenntnisse.

Didaktik und Arbeitsweise

Kurze Fachimpulse wechseln mit Demonstrationen, geführten Konfigurationsschritten, eigenständigen Übungen, negativen Testfällen und strukturierten Auswertungen. Ergebnisse werden in Checklisten, Mappingtabellen, Testfällen oder Runbooks festgehalten, damit die erarbeiteten Verfahren im Projekt- und Betriebsalltag wiederholbar bleiben.