The complete production-ready Next.js starter kit for building modern SaaS applications with payments, authentication, and premium features.
🚀 Built with the latest and greatest:
- ⚡ Next.js 15 - React framework with App Router
- 💳 Polar.sh - Modern payments and subscription management
- 🔐 Better Auth - Authentication with OAuth and sessions
- 🗄️ PostgreSQL + Drizzle ORM - Type-safe database operations
- 🎨 20+ Theme Variants - Beautiful theming system with dark mode
- 🏢 Production-Ready - Sidebar navigation, user management, premium features
Perfect for SaaS applications, premium tools, and any web app that needs user accounts with subscription management.
- Email/password authentication with Better Auth
- OAuth providers (GitHub, Google) with account linking
- Secure session management (7-day expiration)
- User preferences and profile management
- Protected route groups for premium features
- Subscription management (monthly/yearly plans)
- One-time payments (lifetime deals)
- Automatic customer creation and linking
- Graceful error handling for payment failures
- Customer portal managed by Polar
- 20+ built-in themes: Default, Cyberpunk Neon, Tropical Paradise, Zen Garden, etc.
- Responsive sidebar navigation with collapsible design
- Theme-aware components using CSS custom properties
- Dark/light mode support for all themes
- Mobile-first responsive design
- Dashboard with subscription status and analytics
- User profile management with avatar support
- Settings page with theme selection
- Landing page with pricing tiers
- Internationalization support (7 languages)
- TypeScript everywhere with strict mode
- Biome for fast linting and formatting
- Hot reload development server
- Docker support for easy deployment
- Comprehensive error handling
# Install pnpm (recommended package manager)
npm install -g pnpm
# Verify Node.js version (18+ required)
node --version# Clone the repository
git clone https://github.com/cgoinglove/nextjs-polar-starter-kit.git
cd nextjs-polar-starter-kit
# Install dependencies
pnpm install
# Run post-install setup
pnpm postinstallCreate your environment file:
# Copy the example environment file
cp .env.example .env
# Or use the built-in script
pnpm initial:envOpen .env and configure the following:
# Generate a random secret key (32+ characters)
BETTER_AUTH_SECRET=your-super-secret-key-here-make-it-long-and-random
# Base URL for authentication callbacks
BETTER_AUTH_URL=http://localhost:3000 # Local development
# BETTER_AUTH_URL=https://yourdomain.com # Production# Get your Polar access token (see setup guide below)
POLAR_ACCESS_TOKEN=polar_at_xxxxxxxxxxxxx
# Product IDs from your Polar dashboard
POLAR_MONTHLY_PRODUCT_ID=prod_xxxxxxxxxxxxx
POLAR_YEARLY_PRODUCT_ID=prod_xxxxxxxxxxxxx
POLAR_LIFETIME_PRODUCT_ID=prod_xxxxxxxxxxxxx# Local development (using Docker)
POSTGRES_URL=postgres://postgres:password@localhost:5432/polar_saas
# NeonDB (Recommended for production)
# POSTGRES_URL=postgresql://username:password@ep-cool-darkness-123456.us-east-2.aws.neon.tech/neondb?sslmode=require
# Or use other cloud providers (Supabase, Railway, etc.)
# POSTGRES_URL=postgresql://username:password@your-db-host:5432/database# GitHub OAuth (optional)
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
# Google OAuth (optional)
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret# Disable user registration (default: false)
DISABLE_SIGN_UP=false
# Allow non-HTTPS cookies for local development
NO_HTTPS=true# Start PostgreSQL container
pnpm docker:pg
# Run database migrations
pnpm db:migrate
# (Optional) Open Drizzle Studio to view/edit data
pnpm db:studioNeonDB is a serverless PostgreSQL database perfect for modern applications:
-
Quick Setup:
# Follow the detailed NeonDB setup guide cat NEON_SETUP.md -
Get your NeonDB connection string and add it to
.env:POSTGRES_URL=postgresql://username:password@ep-cool-darkness-123456.us-east-2.aws.neon.tech/neondb?sslmode=require
-
Run migrations:
pnpm db:migrate
Follow the same process as NeonDB but without the SSL requirement.
- Visit polar.sh and sign up
- Complete your organization setup
- Verify your account
- Go to Settings → API Keys in your Polar dashboard
- Click Create new token
- Name it "SaaS Kit Development"
- Copy the token (starts with
polar_at_) - Add it to your
.envfile:POLAR_ACCESS_TOKEN=polar_at_xxxxxxxxxxxxx
-
Go to Products in your Polar dashboard
-
Create three products:
Monthly Subscription:
- Name: "Pro Monthly"
- Type: Subscription
- Price: $19/month
- Copy the Product ID to
POLAR_MONTHLY_PRODUCT_ID
Yearly Subscription:
- Name: "Pro Yearly"
- Type: Subscription
- Price: $180/year
- Copy the Product ID to
POLAR_YEARLY_PRODUCT_ID
Lifetime Deal:
- Name: "Lifetime Access"
- Type: One-time
- Price: $299
- Copy the Product ID to
POLAR_LIFETIME_PRODUCT_ID
Common commands:
# Start the development server
pnpm dev
# Open your browser
# http://localhost:3000polar-saaskit/
├── 📁 src/
│ ├── 📁 app/ # Next.js App Router
│ │ ├── 📁 (auth)/ # Public authentication pages
│ │ │ ├── sign-in/ # Sign in page
│ │ │ └── sign-up/ # Sign up page
│ │ ├── 📁 (premium)/ # Protected premium features
│ │ │ ├── app/ # Main app interface
│ │ │ │ └── page.tsx # Dashboard with sidebar
│ │ │ └── layout.tsx # Premium layout
│ │ ├── 📁 api/ # API routes
│ │ │ └── auth/ # Better Auth endpoints
│ │ ├── pricing/ # Landing page pricing
│ │ ├── page.tsx # Landing page
│ │ └── layout.tsx # Root layout
│ ├── 📁 components/ # React components
│ │ ├── 📁 ui/ # Reusable UI components
│ │ ├── 📁 layouts/ # Layout components
│ │ ├── 📁 landing/ # Landing page sections
│ │ ├── dashboard.tsx # Dashboard with stats
│ │ ├── profile.tsx # User profile
│ │ └── settings.tsx # Settings with themes
│ ├── 📁 lib/ # Core libraries
│ │ ├── 📁 auth/ # Authentication config
│ │ ├── 📁 db/ # Database & migrations
│ │ ├── utils.ts # Utility functions
│ │ └── const.ts # App constants
│ └── 📁 types/ # TypeScript definitions
├── 📁 messages/ # Internationalization
├── 📁 public/ # Static assets
├── 📁 docker/ # Docker configuration
└── 📁 scripts/ # Build scripts
This starter includes 20+ beautiful themes with full dark mode support:
- Default - Clean and modern
- Zinc - Subtle and professional
- Slate - Cool blue-gray tones
- Stone - Warm neutral palette
- Gray - Classic grayscale
- Blue - Vibrant blue accents
- Orange - Energetic orange highlights
- Pink - Soft pink aesthetics
- Bubblegum Pop - Playful pink and purple
- Cyberpunk Neon - Electric blues and magentas
- Retro Arcade - 80s gaming nostalgia
- Tropical Paradise - Ocean blues and sunset orange
- Steampunk Cogs - Industrial brass and copper
- Neon Synthwave - Retro-futuristic neon
- Pastel Kawaii - Soft pastel cuteness
- Space Odyssey - Deep space blues and stars
- Vintage Vinyl - Classic record warmth
- Misty Harbor - Foggy blues and grays
- Zen Garden - Natural greens and earth tones
Users can switch themes instantly via the Settings page in the sidebar.
-
Deploy to Vercel:
-
Configure Environment Variables:
- Add all required environment variables from your
.envfile - Update
BETTER_AUTH_URLto your Vercel domain - Use a production database (Neon recommended)
- Add all required environment variables from your
-
Database Setup for Production:
# Option 1: Use Neon (Recommended) # 1. Sign up at neon.tech # 2. Create a new project # 3. Copy connection string to POSTGRES_URL # Option 2: Use Vercel Postgres # 1. Go to Vercel Dashboard → Storage → Create Database # 2. Choose PostgreSQL # 3. Environment variables are auto-added
-
Run Production Migrations:
# Connect to your production database pnpm db:migrate
# Build and start with Docker Compose
pnpm docker-compose:up
# Or build manually
docker build -t polar-saas-kit .
docker run -p 3000:3000 polar-saas-kit# Build for production
pnpm build
# Start production server
pnpm startpnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run Biome linter
pnpm format # Format codepnpm db:generate # Generate new migrations
pnpm db:migrate # Run pending migrations
pnpm db:studio # Open Drizzle Studio
pnpm db:push # Push schema changes (dev only)pnpm docker:pg # Start PostgreSQL only
pnpm docker:app # Start app only
pnpm docker-compose:up # Start full stack
pnpm docker-compose:down # Stop all servicespnpm initial:env # Generate .env from .env.example
pnpm postinstall # Post-installation setup
pnpm clean # Clean build artifacts- User signs up/in → Better Auth handles authentication
- Polar customer created → Automatic customer linking
- Session established → 7-day session with refresh
- Route protection → Access to premium features
- User selects plan → Redirected to Polar checkout
- Payment processed → Polar handles payment securely
- Webhook received → Subscription status updated
- Access granted → Premium features unlocked
- User table - User accounts and preferences
- Session table - Authentication sessions
- Account table - OAuth provider accounts
- Verification table - Email verification codes
Contributions are welcome! Please read our contributing guidelines:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style (Biome formatting)
- Add TypeScript types for all new code
- Write JSDoc comments for functions
- Test authentication flows thoroughly
- Use theme-aware CSS custom properties
- Documentation: Check the cursor rules for detailed development guidelines
- Issues: GitHub Issues
- Discussions: GitHub Discussions
If this starter kit helps you build amazing SaaS applications, consider sponsoring the development:
Your support helps maintain and improve this project for the entire community.
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React framework for production
- Better Auth - Modern authentication for web apps
- Polar.sh - Simple, powerful payments for developers
- Drizzle ORM - TypeScript ORM for SQL databases
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Accessible component primitives
Built with ❤️ by prosamik