Routing & Pages

VibeKit uses the Next.js App Router with route groups under apps/web/app. Locale is a cookie, not a URL prefix.

Directory layout

apps/web/app/
├── (marketing)/             # Public marketing pages
│   ├── (home)/page.tsx      # Landing homepage
│   ├── changelog/           # Release history
│   └── pricing/             # Pricing & purchase tiers
├── (saas)/                  # Protected application surfaces
│   ├── app/
│   │   ├── dashboard/       # User dashboard
│   │   ├── admin/           # Super admin user management
│   │   └── settings/        # Account and team settings
│   └── auth/                # Login, signup, OTP, and recovery
├── (docs)/
│   └── docs/[[...path]]     # Fumadocs documentation engine
├── api/
│   ├── [trpc]/              # tRPC HTTP handler
│   ├── webhooks/stripe/     # Stripe webhook receiver
│   └── search/              # Documentation search endpoint
├── globals.css              # Tailwind CSS and root styles
└── layout.tsx               # Root HTML wrapper

Route groups explained

Route groups (directories in parentheses like (marketing) and (saas)) organize pages and layouts without affecting the browser URL.

Marketing ((marketing))

Publicly accessible pages with standard navigation headers and footers. Includes the homepage, pricing table, changelog, and legal agreements.

SaaS ((saas))

Authenticated application pages with dashboard navigation, account management, and admin surfaces. Shared layouts check session states and redirect unauthorized users to /auth/login.

Docs ((docs))

Powered by Fumadocs. Reads MDX files from apps/web/content/docs and renders navigation trees, tables of contents, and search indexes. This group is not nested under (marketing), so the docs layout is not stacked with the marketing navbar and footer.

See How Fumadocs is wired for the source loader, search API, and LLM endpoints.

Learn more about user management in Authentication Overview.