Seminar Enonic XP 8 – Next.XP und Next.js Frontend-Integration

Das Seminar verbindet die redaktionellen und strukturierten Inhalte von Enonic XP 8 mit einem modernen Next.js-Frontend. Vorschau, Routing, Komponenten, Lokalisierung und Publikationsereignisse werden so umgesetzt, dass Redaktion und Frontendbetrieb zuverlässig zusammenarbeiten.

Ein vollständiges Beispielprojekt entsteht aus Enonic-App, Guillotine-Schnittstelle, Next.XP und Next.js-Anwendung. Entwicklung, Preview, Seitenkomponenten, statische Ausgabe und produktive Bereitstellung werden über denselben End-to-End-Pfad geprüft.

Inhaltsübersicht

1. Zielarchitektur und Entwicklungsumgebung
2. Backend- und GraphQL-Setup
3. Next.js Projekt und Adapter
4. Content Queries und Komponenten-Mapping
5. Preview und Draft-Zugriff
6. Seiten, Parts und Layouts
7. Rich Text, Medien und interne Links
8. Lokalisierung und Routing
9. SSG, Caching und Revalidierung
10. Deployment, Sicherheit und Betrieb

Lernziele

• Next.XP-Architektur und Adapterrollen sicher einordnen
• Next.js App Router und Enonic-Content sauber verbinden
• Preview, Seiten, Parts, Layouts und Rich Text integrieren
• Lokalisierung, Routing und Revalidierung kontrollieren
• Sicherheit, Tests, Deployment und Monitoring absichern

Praxisorientierte Lernschritte

1. Zielarchitektur und Entwicklungsumgebung

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Enonic-Backend, Guillotine, Next.XP, Adapter und Next.js als Komponentenmodell darstellen
2. Schritt 2: lokale Dienste, Ports, Secrets und Umgebungsvariablen festlegen
3. Schritt 3: einen End-to-End-Health-Check für Backend, API und Frontend definieren

2. Backend- und GraphQL-Setup

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Content-Modell, Beispielinhalte und Site-Kontext vorbereiten
2. Schritt 2: Guillotine-Abfragen für zentrale Content-Typen testen
3. Schritt 3: API-Zugriff und erforderliche Rechte für veröffentlichte Inhalte begrenzen

3. Next.js Projekt und Adapter

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Projekt mit App-Router-Struktur und Enonic-Adapter initialisieren
2. Schritt 2: Anwendungsname, API-Endpunkt und Mappings konfigurieren
3. Schritt 3: erste Catch-all-Route starten und empfangene Contentdaten prüfen

4. Content Queries und Komponenten-Mapping

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Abfragen pro Content-Typ in kleine, typisierte Module zerlegen
2. Schritt 2: Antwortdaten auf React-Komponenten mit klaren Props abbilden
3. Schritt 3: unbekannte Typen, Nullwerte und Fehlerzustände kontrolliert rendern

5. Preview und Draft-Zugriff

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Next.XP im Site-Kontext aktivieren und Preview-Konfiguration setzen
2. Schritt 2: Benutzerkontext und Draft-Zugriff sicher an das Frontend weiterreichen
3. Schritt 3: Links, Assets und nicht veröffentlichte Inhalte in der Vorschau prüfen

6. Seiten, Parts und Layouts

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Seitenkomponenten und Regionen im Backend definieren
2. Schritt 2: zugehörige React-Renderer registrieren und Konfiguration verarbeiten
3. Schritt 3: Fallback-Verhalten und fehlende Renderer in Entwicklung und Produktion testen

7. Rich Text, Medien und interne Links

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: HTML-Area-Inhalte mit Referenzen und Makros sicher ausgeben
2. Schritt 2: Bilddaten, Fokus und responsive Varianten in das Frontend übernehmen
3. Schritt 3: interne Links zwischen Preview-, Draft- und Live-Kontext korrekt auflösen

8. Lokalisierung und Routing

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Locale, Projekt, Site-Pfad und Frontendroute konsistent mappen
2. Schritt 2: statische Texte und Content-Sprache im App Router zusammenführen
3. Schritt 3: fehlende Übersetzung, Fallback und Sprachwechsel mit Testfällen prüfen

9. SSG, Caching und Revalidierung

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: statische und dynamische Renderstrategien nach Seitentyp auswählen
2. Schritt 2: Publikationsereignisse zur gezielten Revalidierung nutzen
3. Schritt 3: Cachegrenzen, veraltete Inhalte und Fehler bei Rebuilds sichtbar machen

10. Deployment, Sicherheit und Betrieb

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Backend- und Frontendkonfiguration für Zielumgebungen trennen
2. Schritt 2: Secrets, API-Rechte, Preview-Zugang und Origin-Regeln absichern
3. Schritt 3: Build, Deployment, Smoke Tests, Monitoring und Rollback automatisieren

Zielgruppe und Vorkenntnisse

Zielgruppe: React- und Next.js-Entwickler, Frontend-Architekten, Full-Stack-Teams, Enonic-Entwickler und technische Leads für Headless-Webprojekte.

Vorkenntnisse: Sichere Kenntnisse in TypeScript, React, Next.js, HTTP und GraphQL; Grundkenntnisse in Enonic Content-Modellen und Content Studio sind erforderlich.

Didaktik und Arbeitsweise

Kurze Fachimpulse werden unmittelbar durch Demonstrationen, strukturierte Konfigurations- oder Implementierungsschritte und kontrollierte Fehlerfälle vertieft. Jede Übung besitzt definierte Ausgangswerte, Prüfpunkte und Dokumentationsanforderungen. Dadurch bleiben die erarbeiteten Abläufe für Projekt- und Betriebsstandards nachvollziehbar.