Einführung

Was du erhältst

Tech Stack

• Next.js 14.2.7 — App Router mit Server Components, Server Actions und API Routes
• React 18.2.0 — Aktuell stabil mit Concurrent Features
• TypeScript 5.x — Strict Mode aktiviert für maximale Typsicherheit

• Tailwind CSS 3.4.0 — Utility-first CSS mit eigenem Theme-System
• shadcn/ui — Barrierefreie, anpassbare Komponentenbibliothek auf Basis von Radix UI
• next-themes — Dark Mode mit Erkennung der Systemeinstellung

• Supabase — Verwaltetes PostgreSQL mit Row Level Security und Echtzeit-Funktionen
• Prisma — Typsicheres ORM mit Migrationsverwaltung und Visual Studio
• Upstash Redis — Serverless Redis für Rate Limiting und Caching

• Clerk v6 — Authentifizierung mit Social Logins, MFA, Organisationen und Webhooks
• Lemon Squeezy — Zahlungsabwicklung mit dualem Preismodell: Abonnements oder Credits

• Vercel AI SDK v4.3.x — Einheitliche Schnittstelle für OpenAI, Anthropic, Google und xAI
• RAG-Unterstützung — Dokument-Upload, Vektorsuche und Knowledge-Base-Chat
• Multi-Provider-Fallback — Automatischer Failover bei Ausfall eines Providers

• Resend — Transaktions-E-Mail mit React Email Templates
• Vercel Blob — Dateispeicherung mit EU-Compliance-Unterstützung

• Vitest — Unit-Testing mit React Testing Library
• Playwright — End-to-End-Testing mit 115+ vorgefertigten Tests
• MSW v2 — API-Mocking für Tests und Entwicklung

• pnpm — Schneller, speichereffizienter Paketmanager
• Vercel — Deployment mit Preview-Umgebungen, Analytics und Speed Insights
• GitHub Actions — CI/CD mit automatisierten Quality Gates

Branding auf einen Blick

export const siteConfig = {
  /** Your brand/product name */
  name: 'nextsaas.ai Kit',

  /** Short description for the homepage title tag */
  tagline: 'AI-Native Next.js SaaS Boilerplate',

  /** Name used for blog article title tags */
  blogName: 'nextsaas.ai Blog',

  /** Separator between page name and brand (En-dash is professional standard) */
  separator: '–',

  /** Base URL for metadata */
  url: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',

  /** Default description for pages without custom description */
  description:
    'Production-ready Next.js boilerplate with authentication, database, and modern UI components.',

  /** Author information */
  author: {
    name: 'Jon Doe',
    twitter: '@jondoe',
  },
} as const

export type SiteConfig = typeof siteConfig

Aufbau dieser Dokumentation

1. Getting Started — Das Projekt installieren, die Struktur erkunden und die Umgebung konfigurieren

2. Authentifizierung — Clerk einrichten, Routen schützen, Benutzer und Organisationen verwalten
3. Datenbank — Das Schema verstehen, Migrationen ausführen, Row Level Security konfigurieren
4. Zahlungen — Lemon Squeezy konfigurieren, Preispläne einrichten, Webhooks verarbeiten
5. KI-Integration — KI-Provider verbinden, Chat-Oberflächen aufbauen, RAG einrichten
6. Integrationen — E-Mail (Resend), Dateispeicherung (Vercel Blob) und Caching (Upstash) konfigurieren

7. Styling & Theming — Ein Farbthema wählen, Komponenten anpassen, das Design justieren
8. Sicherheit — Rate Limiting, Eingabevalidierung, Security Headers und API-Schlüssel prüfen

9. Testing — Unit-Tests schreiben, E2E-Tests ausführen, APIs mit MSW mocken
10. Deployment — Auf Vercel deployen, CI/CD einrichten, die Produktions-Checkliste durchgehen

11. Referenz — API-Routen, Umgebungsvariablen, FAQ und Changelog

Voraussetzungen

npm install -g pnpm