Deployment

Deploy your SaaS to production with Vercel and configure all services for live usage.

Vercel Deployment

One-Click Deploy

1. Push code to GitHub repository
2. Connect repository to Vercel
3. Deploy automatically on push

Environment Variables

Add all variables from .env.local to Vercel:

# Production URLs
NEXT_PUBLIC_SITE_URL=https://yourdomain.com

# Database (keep same Supabase project or create production instance)
NEXT_PUBLIC_SUPABASE_URL=your_production_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_production_key
SUPABASE_SERVICE_ROLE_KEY=your_production_service_key

# Payments (switch to live keys)
STRIPE_SECRET_KEY=sk_live_your_live_secret_key
STRIPE_PUBLISHABLE_KEY=pk_live_your_live_publishable_key
STRIPE_WEBHOOK_SECRET=whsec_your_production_webhook_secret

# Email & Analytics (same keys work for production)
RESEND_API_KEY=your_resend_key
NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

# CMS (same project or create production dataset)
NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
NEXT_PUBLIC_SANITY_DATASET=production

Production Configuration

Supabase Production

• Option 1: Use same project with RLS (recommended for MVP)
• Option 2: Create separate production project
• Update auth redirect URLs to your domain
• Configure email templates with production URLs

Stripe Live Mode

1. Switch to live API keys in Vercel
2. Update webhook endpoint: https://yourdomain.com/api/webhooks/stripe
3. Test with real payment method
4. Monitor transactions in Stripe dashboard

Domain Setup

1. Add custom domain in Vercel
2. Configure DNS records
3. SSL certificate auto-generated
4. Update all service URLs to use custom domain

Analytics Setup

PostHog automatically tracks production traffic with existing configuration.

Performance Optimization

Caching Strategy

• Static pages cached at edge
• API routes cached appropriately
• Images optimized via Next.js Image component

Database Optimization

• Connection pooling enabled by default
• RLS policies optimize query performance
• Indexes added for common queries

Security Checklist

• ✅ Environment variables in Vercel (not in code)
• ✅ API routes protected with authentication
• ✅ Database RLS policies enabled
• ✅ HTTPS enforced for all traffic
• ✅ Webhook signature verification
• ✅ CORS configured properly

Monitoring

Built-in Monitoring

• Vercel Analytics - Page views and performance
• PostHog - User behavior and funnels
• Stripe Dashboard - Payment monitoring
• Supabase Dashboard - Database metrics

Error Tracking

Add Sentry for production error tracking:

npm install @sentry/nextjs
npx @sentry/wizard -i nextjs

Post-Deployment

Testing Checklist

• Homepage loads correctly
• User registration works
• Email verification sent
• Login/logout functions
• Payment flow completes
• Webhooks process correctly
• Protected routes redirect properly
• Blog posts load from Sanity

Go-Live Tasks

1. DNS propagation - Wait for domain to resolve globally
2. Search console - Add site to Google Search Console
3. Sitemap - Verify sitemap.xml generates correctly
4. Social sharing - Test og:image and meta tags
5. Email deliverability - Test all transactional emails

Scaling Considerations

Database Scaling

• Supabase auto-scales with usage
• Consider read replicas for high traffic
• Monitor connection limits

Edge Functions

• Move heavy API operations to Supabase Edge Functions
• Reduce cold start times for critical paths

CDN Optimization

• Images served via Vercel's Edge Network
• Static assets cached globally
• API responses cached at edge when appropriate

Troubleshooting

Build failures: Check environment variables and dependencies 404 errors: Verify routing and middleware configuration Auth issues: Check redirect URLs in Supabase settings Payment failures: Confirm webhook endpoint and live keys Email not sending: Verify domain authentication in Resend

Your SaaS is now live and ready for users!