Routing & Seiten
Verstehen Sie die Struktur des Next.js App Routers, Route Groups und Layouts.
VibeKit nutzt den Next.js App Router mit Route Groups unter apps/web/app. Die Sprache wird über ein Cookie gesteuert, nicht über ein URL-Präfix.
Verzeichnisstruktur
apps/web/app/
├── (marketing)/ # Öffentliche Marketing-Seiten
│ ├── (home)/page.tsx # Startseite
│ ├── changelog/ # Release-Historie
│ └── pricing/ # Preise & Kaufoptionen
├── (saas)/ # Geschützte Anwendungsbereiche
│ ├── app/
│ │ ├── dashboard/ # Benutzer-Dashboard
│ │ ├── admin/ # Administrationsbereich
│ │ └── settings/ # Konto- und Teameinstellungen
│ └── auth/ # Login, Registrierung, OTP und Wiederherstellung
├── (docs)/
│ └── docs/[[...path]] # Fumadocs Dokumentations-Engine
├── api/
│ ├── [trpc]/ # tRPC HTTP-Handler
│ ├── webhooks/stripe/ # Stripe Webhook-Empfänger
│ └── search/ # Dokumentations-Suchendpunkt
├── globals.css # Tailwind CSS und globale Stile
└── layout.tsx # Root-HTML-WrapperErklärung der Route Groups
Route Groups (Verzeichnisse in Klammern wie (marketing) und (saas)) organisieren Seiten und Layouts, ohne die URL im Browser zu beeinflussen.
Marketing ((marketing))
Öffentlich zugängliche Seiten mit Standard-Header und -Footer. Umfasst Startseite, Preistabelle, Changelog und rechtliche Dokumente.
SaaS ((saas))
Authentifizierte Anwendungsseiten mit Dashboard-Navigation, Kontoverwaltung und Admin-Funktionen. Geteilte Layouts prüfen den Sitzungsstatus und leiten unberechtigte Nutzer auf /auth/login weiter.
Docs ((docs))
Betrieben von Fumadocs. Liest MDX-Dateien aus apps/web/content/docs und rendert Navigationsbäume, Inhaltsverzeichnisse und Suchindizes.
Siehe Wie Fumadocs angebunden ist für den Source Loader und Such-APIs.