Dashboard
{/* Add more metric cards */}
)
}
```
---
## Integrating Stripe Payments
Stripe handles the complexity of payments, subscriptions, and billing. Focus on integration, not reinventing payment infrastructure.
### The Stripe Integration Flow
```
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ User │────▶│ Checkout │────▶│ Stripe │────▶│ Webhook │
│ Clicks │ │ Button │ │ Hosted │ │ Updates │
│ Upgrade │ │ │ │ Page │ │ DB │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
```
### Creating Checkout Sessions
```typescript
// app/api/checkout/route.ts
import { createClient } from '@/lib/supabase/server'
import { stripe } from '@/lib/stripe'
import { NextResponse } from 'next/server'
export async function POST(request: Request) {
const supabase = await createClient()
const { data: { user } } = await supabase.auth.getUser()
if (!user) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
}
const { priceId } = await request.json()
// Get or create Stripe customer
const { data: subscription } = await supabase
.from('subscriptions')
.select('stripe_customer_id')
.eq('user_id', user.id)
.single()
let customerId = subscription?.stripe_customer_id
if (!customerId) {
const customer = await stripe.customers.create({
email: user.email,
metadata: { supabase_user_id: user.id },
})
customerId = customer.id
await supabase
.from('subscriptions')
.upsert({ user_id: user.id, stripe_customer_id: customerId })
}
const session = await stripe.checkout.sessions.create({
customer: customerId,
line_items: [{ price: priceId, quantity: 1 }],
mode: 'subscription',
success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?success=true`,
cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/billing`,
})
return NextResponse.json({ url: session.url })
}
```
### Handling Webhooks
```typescript
// app/api/webhooks/stripe/route.ts
import { stripe } from '@/lib/stripe'
import { createClient } from '@supabase/supabase-js'
import { NextResponse } from 'next/server'
const supabaseAdmin = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.SUPABASE_SERVICE_ROLE_KEY!
)
export async function POST(request: Request) {
const body = await request.text()
const signature = request.headers.get('stripe-signature')!
let event
try {
event = stripe.webhooks.constructEvent(
body,
signature,
process.env.STRIPE_WEBHOOK_SECRET!
)
} catch (err) {
return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
}
switch (event.type) {
case 'customer.subscription.created':
case 'customer.subscription.updated':
const subscription = event.data.object
await supabaseAdmin
.from('subscriptions')
.update({
stripe_subscription_id: subscription.id,
status: subscription.status,
plan: subscription.items.data[0].price.lookup_key || 'pro',
current_period_end: new Date(subscription.current_period_end * 1000).toISOString(),
})
.eq('stripe_customer_id', subscription.customer)
break
case 'customer.subscription.deleted':
const canceled = event.data.object
await supabaseAdmin
.from('subscriptions')
.update({ status: 'canceled' })
.eq('stripe_subscription_id', canceled.id)
break
}
return NextResponse.json({ received: true })
}
```
---
## Deployment and Infrastructure
Vercel provides the simplest deployment path for Next.js applications. Connect your repository and deploy with zero configuration.
### Deployment Checklist
Before deploying, verify:
- [ ] All environment variables added to Vercel dashboard
- [ ] Stripe webhook endpoint updated to production URL
- [ ] Supabase URL allowlist includes your domain
- [ ] Row Level Security enabled on all tables
- [ ] Error boundaries implemented for graceful failures
### Vercel Configuration
```json
// vercel.json
{
"functions": {
"app/api/**/*.ts": {
"maxDuration": 30
}
},
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "X-Content-Type-Options", "value": "nosniff" }
]
}
]
}
```
### Deploy Command
```bash
# Install Vercel CLI
npm install -g vercel
# Deploy
vercel --prod
```
---
## Scaling Your SaaS
Build for your current scale, but design patterns that grow. These practices handle thousands of users without architectural changes.
### Performance Patterns
**1. Use Server Components by Default**
Server components reduce client JavaScript and improve initial load times:
```typescript
// Good: Server component fetches data
export default async function Page() {
const data = await fetchData() // Runs on server
return {/* ... */}
}
```
**3. Use Connection Pooling**
Supabase handles connection pooling automatically. For high-traffic applications, enable PgBouncer in your Supabase dashboard under Settings > Database.
### When to Scale Infrastructure
| Metric | Free Tier Limit | Action When Exceeded |
|--------|-----------------|---------------------|
| Database size | 500MB | Upgrade Supabase plan |
| Monthly active users | 50,000 | Upgrade Supabase plan |
| API requests | 500K/month | Add caching layer |
| Bandwidth | 5GB | Optimize images, add CDN |
---
## Common Mistakes to Avoid
After reviewing hundreds of SaaS projects, these mistakes appear repeatedly:
### 1. Over-Engineering the MVP
**The mistake:** Building team features, integrations, and admin dashboards before validating the core product.
**The fix:** Ship with authentication, one core feature, and a billing page. Add complexity after users pay.
### 2. Trusting AI-Generated Code Blindly
**The mistake:** Deploying code from AI assistants without review.
**The fix:** Always read generated code. Check for hardcoded values, missing error handling, and security issues. AI accelerates development but does not replace engineering judgment.
### 3. Client-Side Only Auth Checks
**The mistake:** Checking authentication only in React components.
**The fix:** Use middleware for route protection. Use Row Level Security in your database. Server-side validation is not optional.
### 4. Ignoring Mobile from Day One
**The mistake:** Building desktop-first and "fixing mobile later."
**The fix:** Test on mobile during development. Tailwind's responsive prefixes make this straightforward.
### 5. Premature Optimization
**The mistake:** Adding caching, CDNs, and microservices before you have users.
**The fix:** Focus on features that attract users. Optimize when you have traffic data showing bottlenecks.
---
## The Fast Path: SaaS Starter Kits
If you want to build a SaaS product without spending weeks on authentication, billing, and dashboard boilerplate, starter kits provide a significant advantage.
### What Starter Kits Include
A quality SaaS starter kit provides:
- Authentication with email, social login, and magic links
- Stripe subscription billing with multiple plans
- Dashboard layout with navigation and user menu
- Settings pages for profile and billing management
- Database schema with Row Level Security
- Email templates for transactional messages
- Landing page components
### Recommended Starter Kits
| Kit | Best For | Price | Key Feature |
|-----|----------|-------|-------------|
|