Skip to main content
We’ll use Vercel - it’s free, fast, and built for Next.js. One-click deploy.
1

Push to GitHub

Create a new repo on github.com, then:
Terminal
git remote add origin https://github.com/yourusername/your-app.git
git branch -M main
git push -u origin main
2

Connect to Vercel

Time to deploy:
  1. Go to vercel.com
  2. Sign up with GitHub
  3. Click Add New → Project
  4. Import your repository
  5. Vercel auto-detects Next.js settings:
    • Framework: Next.js ✓
    • Build Command: npm run build ✓
    • Output Directory: .next ✓
Everything is pre-configured. Just click through.
3

Add Environment Variables

Before deploying, add your secrets:Click Environment Variables and your your envs from .env.local.
Use production keys:
  • Stripe: Live mode (pk_live_, sk_live_)
  • Auth0: Production domain
  • All other services: production credentials
  • Auth0: Dashboard → Applications → Your App
  • Supabase: Dashboard → Settings → API
  • Stripe: Dashboard → Developers → API keys (toggle to Live mode)
  • Resend: Dashboard → API Keys
4

Deploy

Hit the Deploy button.
Takes ~1 minutes. Grab a coffee ☕
Done? Your app is live at https://your-app.vercel.app 🎉
5

Update Auth0 URLs

Tell Auth0 about your production URL:
  1. Go to Auth0 Dashboard → Applications → Your App
  2. Add to Allowed Callback URLs:
https://your-app.vercel.app/api/auth/callback
  1. Add to Allowed Logout URLs:
https://your-app.vercel.app
  1. Click Save
Using a custom domain? Add that URL too.
6

Set Up Production Webhook

Stripe needs to know where to send events:
  1. In Stripe (Live mode), go to Developers → Webhooks
  2. Click Add endpoint
  3. Endpoint URL: https://your-app.vercel.app/api/stripe/webhook
  4. Events to send:
    • checkout.session.completed
    • checkout.session.expired
    • customer.subscription.updated
    • customer.subscription.deleted
    • invoice.paid
    • invoice.payment_failed
  5. Click Add endpoint
  6. Copy the Signing secret (starts with whsec_)
  7. Update STRIPE_WEBHOOK_SECRET in Vercel
  8. Redeploy: Vercel → Deployments → ⋯ → Redeploy

​
Test Everything

Your app is live. Now test:
  • Sign up with new account
  • Log in
  • Log out
  • Check dashboard access
Everything working? Congrats, you’re live! 🚀

​
Auto-Deployments

Every push to main auto-deploys. No manual work.
Terminal
git add .
git commit -m "Update homepage"
git push
Vercel builds and deploys automatically. Takes 1-2 minutes.
Preview branches: Push to any other branch for a preview URL.

​
Monitoring

Keep an eye on your app: Enable Analytics:
  1. Vercel Dashboard → Your Project
  2. Click Analytics tab
  3. Click Enable Analytics
View Logs:
  1. Go to Deployments
  2. Click any deployment
  3. Check Logs tab for errors
Set Up Alerts:
  1. Vercel → Project Settings → Notifications
  2. Enable error notifications
  3. Add Slack/Discord webhook (optional)

​
Troubleshooting

Check these:
  • All environment variables set in Vercel?
  • Using production keys (not test)?
  • Auth0 URLs updated with production domain?
  • Browser console showing errors?
Debug: Vercel → Deployments → Logs
Common issues:
  • Using test keys instead of live keys
  • Webhook URL incorrect
  • Webhook secret doesn’t match
  • Stripe in test mode instead of live mode
Check: Stripe → Developers → Webhooks → Recent deliveries
Verify:
  • RESEND_API_KEY in Vercel env vars
  • Domain verified in Resend
  • Check Resend dashboard for errors
  • Not hitting rate limits
Check:
  • Supabase keys correct in Vercel
  • Row Level Security policies allow access
  • Tables exist in production database
  • Connection not timing out
Common causes:
  • TypeScript errors
  • Missing dependencies
  • Environment variables needed at build time
Fix: Check build logs in Vercel → Deployments

​
Performance Tips

Images

Use Next.js <Image> component. Vercel optimizes automatically.

Caching

Vercel caches static assets globally. No config needed.

Edge Functions

Your API routes run on the edge. Fast everywhere.

Analytics

Monitor performance in Vercel Analytics tab.

​
Going Live Checklist

Before announcing your launch:
  • All features tested in production
  • Custom domain set up (optional)
  • SSL certificate active (auto-generated)
  • Analytics enabled
  • Error monitoring set up
  • Stripe in live mode
  • Auth0 production URLs configured
  • Webhooks working
  • Email sending tested
  • Database queries working
  • Mobile responsive tested
  • SEO metadata set (/lib/config.ts)
  • Privacy policy live
  • Terms of service live