Next.js SaaS Starter with LemonSqueezy

A production-ready, full-stack SaaS boilerplate built with Next.js 14, featuring user authentication, subscription management, and modern UI components. This starter template provides everything you need to launch a subscription-based SaaS application quickly.

🚀 Features

Core Functionality

• User Authentication - Secure authentication system powered by NextAuth.js with email/password and OAuth support
• Subscription Management - Integrated LemonSqueezy payment processing for subscription billing
• User Profiles - Complete user profile management with account settings
• Database Integration - Prisma ORM with PostgreSQL for robust data management
• Email System - Transactional emails via Resend for notifications and password resets

Technical Features

• Next.js 14 - App Router with Server Components and Server Actions
• TypeScript - Full type safety across the application
• Modern UI - Beautiful, accessible components built with Radix UI and shadcn/ui
• Responsive Design - Mobile-first, fully responsive layouts
• Route Protection - Middleware-based authentication and authorization
• SEO Optimized - Built-in sitemap generation and metadata management
• Form Validation - Zod schema validation with React Hook Form
• Toast Notifications - User-friendly notification system

Architecture

• App Directory - Next.js 14 App Router architecture
• Route Groups - Organized route structure with layout groups
• Intercepting Routes - Advanced routing patterns for modals and overlays
• Parallel Routes - Concurrent route rendering capabilities
• CSR/SSR - Optimized client and server-side rendering strategies

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18.x or higher
• PostgreSQL database (local or cloud-hosted)
• npm or yarn package manager

🛠️ Tech Stack

• Framework: Next.js 14.1.0
• Language: TypeScript 5.2.2
• Styling: Tailwind CSS 3.3.3
• UI Components: Radix UI, shadcn/ui
• Authentication: NextAuth.js 4.22.1
• Database: PostgreSQL with Prisma ORM 4.16.2
• Payments: LemonSqueezy
• Email: Resend 3.2.0
• Icons: Lucide React
• Form Handling: React Hook Form with Zod validation

📦 Installation

1. Clone the repository

   git clone <your-repo-url>
   cd <project-directory>

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory with the following variables:

   # Database
   POSTGRES_PRISMA_URL=your_postgres_connection_string
   POSTGRES_URL_NON_POOLING=your_direct_postgres_connection_string
   
   # NextAuth
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your_nextauth_secret
   
   # Generate NextAuth secret using:
   # openssl rand -base64 32
   
   # LemonSqueezy
   LEMONSQUEEZY_API_KEY=your_lemonsqueezy_api_key
   LEMONSQUEEZY_STORE_ID=your_store_id
   LEMONSQUEEZY_WEBHOOK_SECRET=your_webhook_secret
   
   # Email (Resend)
   RESEND_API_KEY=your_resend_api_key
   EMAIL_FROM=[email protected]
   
   # OAuth (Optional)
   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret

4. Set up the database

   npx prisma migrate dev --name init

5. Start the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:3000 to see your application.

🗄️ Database Schema

The application uses Prisma with the following main models:

• User - User accounts with authentication and subscription data
• Account - OAuth provider accounts
• Session - User session management

📁 Project Structure

├── app/                    # Next.js App Router pages and layouts
│   ├── (auth)/            # Authentication route group
│   ├── (mainPage)/        # Main page route group
│   └── layout.tsx         # Root layout
├── actions/               # Server actions
│   ├── email.ts          # Email-related actions
│   └── user.ts           # User-related actions
├── components/            # React components
├── config/               # Configuration files
│   ├── dashboard.ts      # Dashboard configuration
│   ├── email.ts         # Email configuration
│   └── site.ts          # Site configuration
├── lib/                  # Utility libraries
│   ├── axios.ts         # HTTP client configuration
│   ├── lemon.ts         # LemonSqueezy integration
│   ├── prisma.ts        # Prisma client
│   ├── subscription.ts  # Subscription utilities
│   └── utils.ts         # General utilities
├── prisma/               # Prisma schema and migrations
│   └── schema.prisma    # Database schema
├── types/                # TypeScript type definitions
└── validations/          # Zod validation schemas

🔧 Available Scripts

• npm run dev - Start development server with Prisma generation
• npm run build - Build for production with database push
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run format - Check code formatting
• npm run format:write - Format code with Prettier
• npm run db:migrate - Run database migrations

🔐 Authentication

The application supports multiple authentication methods:

• Email/Password - Traditional email and password authentication
• OAuth Providers - Google OAuth integration (extensible to other providers)

Authentication is handled by NextAuth.js with session management and protected routes via middleware.

💳 Subscription Management

LemonSqueezy integration provides:

• Subscription plan management
• Webhook handling for subscription events
• Customer and subscription tracking
• Period-based billing cycles

📧 Email System

Transactional emails are sent via Resend for:

• Welcome emails
• Password reset requests
• Subscription confirmations
• Account notifications

🎨 Customization

Site Configuration

Update config/site.ts to customize:

• Site name and description
• Social media links
• Branding information

Styling

The project uses Tailwind CSS with custom configuration. Modify tailwind.config.js to adjust the design system.

Components

UI components are built with shadcn/ui and can be customized in the components/ directory.

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

Other Platforms

The application can be deployed to any platform that supports Next.js:

• Railway
• Render
• AWS
• DigitalOcean

Ensure your PostgreSQL database is accessible and all environment variables are configured.

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

⚠️ Important Notes

• This is a starter template - customize it to fit your specific needs
• Always use environment variables for sensitive data
• Regularly update dependencies for security patches
• Test thoroughly before deploying to production
• Configure proper CORS and security headers for production

📚 Additional Resources

• Next.js Documentation
• Prisma Documentation
• NextAuth.js Documentation
• LemonSqueezy Documentation
• Tailwind CSS Documentation
• shadcn/ui Documentation

---

Built with ❤️ using Next.js and modern web technologies.