A production-ready Next.js 15 SaaS starter template with authentication, payments, and email functionality built-in.
Click "Use this template" button above to create a new repository from this template.
# Clone your new repository
git clone https://github.com/YOUR_USERNAME/YOUR_PROJECT_NAME.git
cd YOUR_PROJECT_NAME
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your actual values
# Start PostgreSQL database
docker-compose up -d
# Run database migrations
npm run db:migrate
# Start development server
npm run devVisit http://localhost:3000 to see your app!
- ✅ NextAuth.js with JWT sessions
- ✅ Google OAuth - One-click sign in
- ✅ Email/Password - Full auth flow with registration
- ✅ Password Reset - Token-based with email verification
- ✅ Protected Routes - Middleware-based route protection
- ✅ Security - bcrypt password hashing (12 rounds)
- ✅ Stripe Checkout - One-time payment integration
- ✅ Webhook Handling - Automatic purchase verification
- ✅ Purchase Tracking - Database records for all transactions
- ✅ Access Control - Content protection based on purchase status
- ✅ PostgreSQL with Docker setup
- ✅ Drizzle ORM - Type-safe database queries
- ✅ Migrations - Version-controlled schema changes
- ✅ Drizzle Studio - Built-in database GUI
- ✅ Resend Integration - Transactional emails
- ✅ Password Reset Emails - Pre-built templates
- ✅ Email Verification - Ready to implement
- ✅ Tailwind CSS - Utility-first styling
- ✅ shadcn/ui - Beautiful, accessible components
- ✅ Responsive Layout - Header, footer, and page structure
- ✅ Toast Notifications - User feedback with react-hot-toast
- ✅ Modern Design - Clean, professional interface
- ✅ TypeScript - Full type safety throughout
- ✅ Zod Validation - Schema validation for forms and API
- ✅ ESLint - Code quality enforcement
- ✅ Prettier - Consistent code formatting
- ✅ Turbopack - Fast development builds
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS + shadcn/ui
- Database: PostgreSQL + Drizzle ORM
- Authentication: NextAuth.js
- Payments: Stripe
- Email: Resend
- Validation: Zod
- Node.js 20 or higher
- Docker Desktop (for PostgreSQL)
- A Stripe account (for payments)
- A Resend account (for emails)
- A Google Cloud project (for OAuth)
See SETUP.md for comprehensive setup instructions including:
- Google OAuth configuration
- Stripe payment setup
- Resend email configuration
- Database setup and migrations
Copy .env.example to .env.local and fill in your values:
# Database
DATABASE_URL=postgresql://postgres:postgres@localhost:5433/your_db_name
# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-here # Generate with: openssl rand -base64 32
# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# Stripe
STRIPE_SECRET_KEY=your-stripe-secret-key
STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
STRIPE_WEBHOOK_SECRET=your-webhook-secret
STRIPE_PRODUCT_ID=your-product-id
# Resend
RESEND_API_KEY=your-resend-api-key
[email protected]npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run format # Format code with Prettier
npm run db:generate # Generate new migrations from schema changes
npm run db:migrate # Run pending migrations
npm run db:studio # Open Drizzle Studio (database GUI)├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ ├── auth/ # NextAuth.js endpoints
│ │ ├── checkout/ # Stripe checkout
│ │ └── webhooks/ # Stripe webhooks
│ ├── dashboard/ # Protected dashboard page
│ ├── login/ # Login page
│ ├── register/ # Registration page
│ └── page.tsx # Landing page
├── components/ # React components
│ ├── layout/ # Header, footer
│ ├── ui/ # shadcn/ui components
│ └── ... # Feature components
├── lib/ # Utility functions
│ ├── auth.ts # NextAuth configuration
│ ├── stripe.ts # Stripe client
│ ├── email.ts # Email utilities
│ └── utils.ts # General utilities
├── db/ # Database
│ ├── index.ts # Database connection
│ └── schema.ts # Drizzle schema
├── types/ # TypeScript types
├── migrations/ # Database migrations
└── docker-compose.yml # PostgreSQL setup
The template includes three main tables:
users - User accounts with OAuth and credentials support passwordResetTokens - Secure password reset tokens purchases - Payment tracking and access control
See db/schema.ts for full schema definition.
- Update
app/layout.tsxwith your app name - Replace
app/favicon.icowith your logo - Customize colors in
app/globals.css
- Add new pages in
app/directory - Create components in
components/directory - Add database tables in
db/schema.tsand runnpm run db:generate
- Modify Tailwind config in
tailwind.config.js - Add new shadcn/ui components:
npx shadcn@latest add [component]
- Push your code to GitHub
- Import project in Vercel
- Add environment variables in Vercel dashboard
- Deploy!
Use a managed PostgreSQL service:
- Vercel Postgres
- Supabase
- Neon
- Railway
Update DATABASE_URL in your environment variables.
- Next.js Documentation
- NextAuth.js Documentation
- Stripe Documentation
- Drizzle ORM Documentation
- Tailwind CSS Documentation
- shadcn/ui Documentation
This template is maintained to provide a solid starting point for SaaS projects. Feel free to customize it for your needs!
MIT License - feel free to use this template for your projects!
Built with ❤️ for the Next.js community
Need help? Check out SETUP.md for detailed configuration instructions.