Getting Started with SaaS Template

Learn how to set up and customize your SaaS application using our production-ready template with Next.js, Auth.js, and Stripe.

SaaS Team
2 min read

Building a SaaS application from scratch can be overwhelming. Between authentication, payments, database setup, and creating a polished UI, there's a lot to handle before you can even start working on your core product features.

That's where SaaS Template comes in. Our production-ready template gives you everything you need to launch your SaaS quickly.

What's Included

Our template comes with a complete tech stack that's been battle-tested in production:

  • Next.js 15 with App Router and Turbopack
  • Auth.js for authentication (magic links + Google OAuth)
  • Stripe for payments and subscriptions
  • Prisma with PostgreSQL
  • Tailwind CSS with shadcn/ui components

Quick Start

Getting started is simple. Clone the repository and install dependencies:

npx create-saas-template my-saas-app
cd my-saas-app
pnpm install

Then configure your environment variables:

cp .env.example .env

Fill in your API keys for:

  • Database connection (PostgreSQL)
  • Auth.js secret
  • Stripe API keys
  • Resend for emails

Setting Up Authentication

Authentication is pre-configured with Auth.js. The template supports:

  1. Magic Links - Passwordless email authentication
  2. Google OAuth - One-click sign in with Google

Users can sign in from /login and will be redirected to the dashboard after authentication.

Configuring Stripe

Stripe is integrated for handling subscriptions. To set it up:

  1. Create a Stripe account
  2. Add your API keys to .env
  3. Create your products in Stripe Dashboard
  4. Update the pricing in src/lib/billing/plans.ts

The webhook handler at /api/stripe/webhook automatically syncs subscription status.

Customizing the Dashboard

The dashboard is fully customizable. Key files to modify:

  • src/app/(dashboard)/dashboard/page.tsx - Main dashboard
  • src/components/dashboard/ - Dashboard components
  • src/app/globals.css - Theme colors

Next Steps

Once you have the basics running:

  1. Customize the landing page
  2. Add your product features
  3. Configure your pricing plans
  4. Set up your production database
  5. Deploy to Vercel

Ready to build? Check out our documentation for more detailed guides.

Newsletter

Stay in the loop

Get the latest articles, tutorials, and product updates delivered straight to your inbox. No spam, unsubscribe anytime.

Join 1,000+ developers already subscribed

Related Articles