Next.js SaaS Starter: Build SaaS Apps Faster

Next.js SaaS Starter offers a robust foundation for building Software as a Service (SaaS) applications using Next.js.

It incorporates essential features like authentication, Stripe integration for payments, and a user dashboard.

Key Features

Use Cases

1. Membership Site: Create a platform where users pay for access to exclusive content or resources. The authentication and subscription management features make it easy to control access and handle payments.
2. Team Collaboration Tool: Develop a project management application where teams can collaborate. The RBAC and CRUD operations support facilitate team management and resource allocation.
3. Online Course Platform: Build an e-learning site where instructors can create courses and students can purchase access. The Stripe integration allows for seamless payment processing.
4. Freelance Management System: Design a system for freelancers to track clients, projects, and invoices. The dashboard and activity logging features provide a solid foundation for this use case.
5. Analytics Dashboard: Construct a custom analytics tool where users can track and visualize data from various sources. The user management and authentication features ensure data privacy and access control.

Installation Guide

To get started with the Next.js SaaS Starter, follow these steps:

1. Clone the repository:

   git clone https://github.com/leerob/next-saas-starter

2. Navigate to the project directory:

   cd next-saas-starter

3. Install dependencies:

   pnpm install

4. Set up the database:

   pnpm db:setup
   pnpm db:migrate
   pnpm db:seed

5. Start the development server:

   pnpm dev

6. For Stripe webhook testing, run:

   stripe listen --forward-to localhost:3000/api/stripe/webhook

Usage Guide

The Next.js SaaS Starter template uses modern React hooks and patterns. Here’s a quick overview of some key concepts:

1. User Authentication:
   The starter uses a custom useUser() hook for easy access to user data in client components:

   const { user } = useUser();
   if (user) {
     console.log('Logged in as:', user.email);
   }

2. Server Actions:
   Instead of creating separate API routes, you can use React Server Actions for form submissions:

   export async function createUser(formData: FormData) {
     'use server';
     // Process form data and create user
   }

3. Form Handling:
   The useActionState hook simplifies form state management:

   const [state, formAction] = useActionState(createUser);
   if (state.status === 'error') {
     console.error(state.error);
   }

Related Resources

1. Next.js Documentation: The official guide for the Next.js framework. It covers core concepts and advanced features. https://nextjs.org/docs
2. Stripe Docs: Comprehensive documentation for integrating Stripe payments into your application. https://stripe.com/docs
3. Drizzle ORM: The ORM used in this starter. It offers a type-safe way to interact with your database. https://orm.drizzle.team/docs/overview
4. shadcn/ui: A collection of re-usable components used for building the UI in this starter. https://ui.shadcn.com/

Preview: