Next.js SaaS Template

A minimal, production-ready Next.js template for building multi-tenant SaaS applications.

Usage:

npx create-next-app@latest --example https://github.com/ingram-technologies/ingram-next-template

Features

• 🚀 Next.js 15 with App Router and Turbopack
• 🔐 Authentication with Supabase Auth
• 🏢 Multi-tenancy with organizations and role-based access
• 💾 PostgreSQL database with Supabase
• 🎨 Tailwind CSS v4 with shadcn/ui components
• 📝 TypeScript with strict configuration
• 🧪 Testing with Vitest
• 📊 Monitoring with Sentry (optional)
• 🌙 Dark mode support

Tech Stack

• Framework: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS v4, shadcn/ui
• Database: Supabase (PostgreSQL with RLS)
• Authentication: Supabase Auth
• Testing: Vitest
• Package Manager: Bun

Quick Start

Prerequisites

• Node.js 18+
• Bun package manager (curl -fsSL https://bun.sh/install | bash)
• Supabase CLI (optional for local development)

Setup

1. Clone the repository:

git clone <your-repo-url>
cd nextjs-saas-template

2. Install dependencies:

bun install

3. Set up environment variables:

cp .env.example .env.local

4. Configure your environment variables:

# Required
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

# Optional
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
SENTRY_ORG=your-sentry-org
SENTRY_PROJECT=your-sentry-project

5. For local development with Supabase:

bunx supabase start
bun run migrate

6. Start the development server:

bun run dev

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

Project Structure

src/
├── app/                 # Next.js App Router
│   ├── (marketing)/    # Public pages
│   ├── api/           # API routes
│   ├── auth/          # Authentication pages
│   └── dashboard/     # Protected dashboard
├── components/         # React components
│   └── ui/           # shadcn/ui components
├── lib/               # Utilities and services
├── types/             # TypeScript definitions
└── hooks/             # Custom React hooks

supabase/
├── migrations/        # Database migrations
└── functions/        # Edge functions (if needed)

Available Scripts

bun run dev        # Start development server
bun run build      # Build for production
bun run start      # Start production server
bun run lint       # Run ESLint
bun run test       # Run tests
bun run ci         # Run all checks (lint, type-check, test)
bun run migrate    # Apply database migrations

Database Schema

The template includes a multi-tenant schema with:

• Organizations - Top-level tenant container
• Users - Authentication via Supabase Auth
• Memberships - User-organization relationships with roles (owner, admin, member)
• User Profiles - Extended user information

Authentication

Authentication is handled by Supabase Auth with:

• Email/password authentication
• Google OAuth (optional)
• Protected routes with middleware
• Cookie-based sessions
• Row Level Security (RLS) policies

Customization

Adding New Pages

Create new pages in the app directory following Next.js App Router conventions:

// app/dashboard/new-feature/page.tsx
export default function NewFeaturePage() {
	return <div>Your new feature</div>;
}

Adding Components

Use shadcn/ui to add new components:

bunx shadcn add button
bunx shadcn add card

Database Changes

1. Create a new migration file in supabase/migrations/
2. Run bun run migrate to apply changes
3. Types are auto-generated from the database schema

Deployment

Vercel

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

Supabase

1. Create a new Supabase project
2. Run migrations against your production database
3. Update environment variables with production values
4. Configure authentication providers in Supabase dashboard

Development Guidelines

• Use Bun (not npm/yarn/pnpm) for all package operations
• Follow the existing code style (tabs for indentation)
• Never use any type - the build will fail
• Write tests for critical functionality
• Keep components small and focused
• Use server components by default, client components when needed