Project Structure

NextGenKit follows Next.js App Router conventions with route groups for separation of concerns.

app/
├── (auth)/             # Sign-in, sign-up, onboarding (Clerk)
├── (dashboard)/        # Authenticated dashboard + settings
├── (marketing)/        # Landing page, pricing, docs
├── api/webhooks/       # Clerk + Stripe webhook handlers
components/
├── ui/                 # shadcn/ui primitives (button, card, etc.)
├── marketing/          # Landing page sections
├── dashboard/          # Dashboard shell, sidebar
├── billing/            # Billing components
emails/                 # React Email templates
i18n/                   # next-intl configuration
lib/
├── auth.ts             # Auth guards (requireUser, requireRole)
├── billing/            # Plans config, plan gating
├── db.ts               # Prisma client
├── env.ts              # Validated env vars (t3-env)
├── stripe.ts           # Stripe client
├── validations/        # Zod schemas
messages/               # i18n JSON translation files
prisma/                 # Schema, migrations, seed
server/
├── actions/            # Server actions (billing, user, org)
├── queries/            # Database queries
__tests__/              # Vitest unit tests
e2e/                    # Playwright E2E tests

Route Groups

Next.js route groups (folders wrapped in parentheses) apply different layouts without affecting the URL:

• (auth) — Minimal layout for auth pages
• (marketing) — Public layout with nav + footer
• (dashboard) — Authenticated layout with sidebar

Key Files