Skip to Content

Architektur der Webapp

Die Webapp verwendet Next.js mit App Router, React und TypeScript.

Zentrale Bereiche

PfadVerantwortung
src/app/[locale]lokalisierte App- und Story-Routen
src/app/api/cms/[resource]serverseitiger Proxy für CMS-Inhalte
src/app/api/previewEinstieg und Ende einer Preview-Sitzung
src/componentsHeader, Breadcrumb, Carousel und UI-Bausteine
src/hooksNavigation, Einstellungen und Reduced Motion
src/i18nLocales, Routing und Spracherkennung
src/lib/content.tsAbruf und Mapping der CMS-Daten
src/lib/tts.tsAudiowiedergabe, Fallback und Wortmarkierung
messagesdeutsche und englische UI-Texte
tests/e2eSmoke-, Journey- und Accessibility-Tests

Routen

Alle sichtbaren Routen tragen ein Locale-Präfix:

/de /en /de/story/{documentId--slug} /en/story/{documentId--slug}

Kategorien werden auf der Startseitenroute über den Query-Parameter category geöffnet. Story-URLs enthalten Dokument-ID und einen lesbaren Slug; die ID bleibt die verbindliche Referenz.

Datenzugriff

Client-Code ruft Kategorien und Stories ausschließlich über /api/cms ab. Der Proxy erlaubt nur diese beiden Ressourcen, erzwingt abhängig vom Draft Mode published oder draft und reicht das Preview-Token niemals an den Browser weiter.

Generierte Lizenz-Story

Die App erzeugt beim Build aus den Paketabhängigkeiten eine virtuelle Lizenz-Story. Dateien unter src/data/*.generated.json und der Drittanbieter-Lizenzbericht werden über pnpm licenses:sync aktualisiert und nicht manuell bearbeitet.