Introduction

What You Get

Tech Stack

• Next.js 14.2.7 — App Router with Server Components, Server Actions, and API Routes
• React 18.2.0 — Latest stable with concurrent features
• TypeScript 5.x — Strict mode enabled for maximum type safety

• Tailwind CSS 3.4.0 — Utility-first CSS with custom theme system
• shadcn/ui — Accessible, customizable component library built on Radix UI
• next-themes — Dark mode with system preference detection

• Supabase — Managed PostgreSQL with Row Level Security and realtime
• Prisma — Type-safe ORM with migration management and visual studio
• Upstash Redis — Serverless Redis for rate limiting and caching

• Clerk v6 — Authentication with social logins, MFA, organizations, and webhooks
• Lemon Squeezy — Payment processing with dual pricing: subscriptions or credits

• Vercel AI SDK v4.3.x — Unified interface for OpenAI, Anthropic, Google, and xAI
• RAG Support — Document upload, vector search, and knowledge-base chat
• Multi-provider fallback — Automatic failover when a provider is unavailable

• Resend — Transactional email with React Email templates
• Vercel Blob — File storage with EU compliance support

• Vitest — Unit testing with React Testing Library
• Playwright — End-to-end testing with 115+ pre-written tests
• MSW v2 — API mocking for tests and development

• pnpm — Fast, disk-efficient package manager
• Vercel — Deployment with preview environments, analytics, and speed insights
• GitHub Actions — CI/CD with automated quality gates

Branding at a Glance

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

How This Documentation Is Organized

1. Getting Started — Install the project, explore the structure, and configure your environment

2. Authentication — Set up Clerk, protect routes, manage users and organizations
3. Database — Understand the schema, run migrations, configure Row Level Security
4. Payments — Configure Lemon Squeezy, set up pricing plans, handle webhooks
5. AI Integration — Connect AI providers, build chat interfaces, set up RAG
6. Integrations — Configure email (Resend), file storage (Vercel Blob), and caching (Upstash)

7. Styling & Theming — Choose a color theme, customize components, adjust the design
8. Security — Review rate limiting, input validation, security headers, and API keys

9. Testing — Write unit tests, run E2E tests, mock APIs with MSW
10. Deployment — Deploy to Vercel, set up CI/CD, run through the production checklist

11. Reference — API routes, environment variables, FAQ, and changelog

Prerequisites

npm install -g pnpm