A comprehensive starter template for building modern SaaS applications with Next.js, Supabase, and Tailwind CSS.
- Authentication System: Complete user management with email/password authentication
- Modern UI Components: Pre-configured UI with Tailwind CSS and shadcn/ui
- Database Integration: Supabase for backend services and PostgreSQL database
- Responsive Design: Mobile-first approach with adaptive layouts
- Dark/Light Mode: Theme switching with system preference detection
- AI Integration: OpenAI API integration via LangChain
- TypeScript: Type-safe development experience
- App Router: Next.js App Router for improved routing and layouts
- Next.js 14: React framework with App Router
- React 18: UI library
- Tailwind CSS: Utility-first CSS framework
- shadcn/ui: Accessible and customizable component library
- Lucide Icons: Beautiful, consistent icon set
- Framer Motion: Animation library
- next-themes: Theme management
- Supabase: Backend-as-a-service with PostgreSQL
- Prisma: Type-safe ORM for database access
- Stripe: Payment processing and subscription management
- LangChain: Framework for LLM applications
- OpenAI: AI model provider
- TypeScript: Static type checking
- ESLint: Code linting
- Prettier: Code formatting
- Node.js 18+ and npm/yarn/pnpm
- Supabase account (optional for production)
- (Optional) Stripe account for payment processing
- (Optional) OpenAI API key for AI features
- Clone the repository
git clone https://github.com/yourusername/nextjs-saas-boilerplate.git
cd nextjs-saas-boilerplate- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Set up environment variables
Copy the .env.example file to .env.local and fill in your credentials:
cp .env.example .env.local- Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
This boilerplate includes a server-side storage implementation for development purposes. This allows you to test the SaaS functionality without setting up Supabase immediately.
- Create a new Supabase project
- Run the SQL migrations in
supabase/migrations/ - Update your
.env.localwith the Supabase URL and anon key
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (auth)/ # Authentication routes
│ │ ├── api/ # API routes
│ │ ├── dashboard/ # Dashboard pages
│ │ └── page.tsx # Landing page
│ ├── components/ # React components
│ │ ├── ui/ # UI components (shadcn)
│ │ └── ... # Other components
│ ├── lib/ # Utility functions
│ └── types/ # TypeScript types
├── supabase/ # Supabase configuration
│ └── migrations/ # Database migrations
├── prisma/ # Prisma schema
└── public/ # Static assets
This boilerplate uses Supabase Authentication with the following features:
- Email/password sign up and sign in
- Password reset flow
- Protected routes
- User profile management
For development purposes, you can use the built-in server-side storage implementation without connecting to Supabase.
The easiest way to deploy your Next.js app is to use the Vercel Platform.
You can also deploy to other platforms like Netlify, AWS, or your own server.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.