Seminar Prismic – Intensivseminar Entwicklung mit Next.js, Nuxt oder SvelteKit

Das Entwickler-Intensivseminar führt von Content Modeling mit Type Builder und Prismic CLI bis zur produktionsreifen Integration. Für die praktischen Übungen wird vor Seminarbeginn ein Hauptpfad mit Next.js, Nuxt oder SvelteKit festgelegt; gemeinsame Konzepte werden frameworkübergreifend behandelt.

Inhaltsübersicht

• Lernziele
• Seminarinhalte
• Praxisübungen
• Methodik

Lernziele

Ein vollständiges, typisiertes Prismic-Frontend kann modelliert, entwickelt, getestet und ausgeliefert werden. API-Abfragen, Slices, Routing, Preview, Revalidierung, Qualität und Deployment werden als zusammenhängende Architektur umgesetzt.

Seminarinhalte

1. Schritt 1: Projekt und Framework-Pfad vorbereiten

   Repository, Laufzeit, Paketmanager, TypeScript, Umgebungsvariablen und lokale Entwicklungsstruktur werden reproduzierbar eingerichtet.

2. Schritt 2: Content-Modell technisch spezifizieren

   Seitentypen, Felder, Beziehungen und API-IDs werden mit den Anforderungen des Frontends abgestimmt.

3. Schritt 3: Type Builder und Prismic CLI einrichten

   Visuelle Repository-Modellierung und codeorientierter CLI-Pfad werden eingerichtet. Slices, Varianten, generierte Typen und Komponenten werden in einen nachvollziehbaren Entwicklungsablauf eingebunden.

4. Schritt 4: Wiederverwendbare Slice-Komponenten bauen

   Semantisches Markup, Props, optionale Felder, Varianten und Designsystem-Regeln werden in belastbaren Komponenten umgesetzt.

5. Schritt 5: Typisierten Content Client erstellen

   Generierte Typen, zentrale Client-Konfiguration und sichere Umgebungswerte bilden die Grundlage aller Abfragen.

6. Schritt 6: Seiten und Listen effizient abfragen

   UID, Typ, Filter, Sortierung, Pagination, Beziehungen und Locale werden mit begrenztem Datenumfang implementiert.

7. Schritt 7: Routing und Navigation aufbauen

   Route Resolver, dynamische Seiten, verschachtelte Pfade, Navigation und 404-Verhalten werden konsistent verbunden.

8. Schritt 8: Preview und Entwürfe integrieren

   Draft-Kontext, Preview-Endpunkt, Session beziehungsweise Draft Mode und Beenden der Vorschau werden vollständig umgesetzt.

9. Schritt 9: SEO, Medien und strukturierte Daten rendern

   Metadaten, Social Cards, kanonische URLs, responsive Bilder und strukturierte Daten werden aus dem Content-Modell erzeugt.

10. Schritt 10: Webhooks und Revalidierung anbinden

    Content-Ereignisse aktualisieren gezielt Cache, Suchindex oder Deployment. Validierung und Idempotenz verhindern Fehltrigger.

11. Schritt 11: Qualität und Performance absichern

    Typprüfung, Unit- und Integrationstests, Slice-Mocks, Accessibility, Fehlergrenzen, Logging und Performance-Budgets werden eingerichtet.

12. Schritt 12: Preview und Produktion deployen

    CI-Pipeline, Secrets, Umgebungen, Build, Monitoring, Rollback und Betriebsdokumentation werden abgeschlossen.

Praxisübungen

• Ein Repository mit Type Builder oder Prismic CLI und TypeScript anbinden
• Mehrere Slice-Varianten als getestete Komponenten entwickeln
• Dynamische Routen, Navigation und Preview vollständig integrieren
• Webhook-basierte Revalidierung und Fehlerbehandlung umsetzen
• Das Referenzprojekt über CI in Preview und Produktion ausliefern

Methodik

Ein durchgängiges Referenzprojekt wird täglich erweitert. Der Framework-Pfad wird vorab festgelegt, damit die Übungen nicht bei oberflächlichen Vergleichen stehen bleiben.