Before you deploy

Make sure these things are done:

  • All features work locally
  • Code is committed to git
  • No hardcoded secrets in code (use env vars)
  • You have a GitHub account

Push to GitHub

If your code is not on GitHub yet, create a repository and push:

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

Deploy to Vercel

  1. Go to vercel.com and sign up with GitHub
  2. Click "Add New Project"
  3. Import your GitHub repository
  4. Vercel auto-detects Next.js settings
  5. Add your environment variables (same as .env.local)
  6. Click "Deploy"

In 1-2 minutes, your app is live at a .vercel.app URL.

Auto-deploy: Every time you push to main, Vercel automatically deploys the new version. No manual steps needed.

Environment variables

In Vercel dashboard, go to Settings > Environment Variables. Add each variable from your .env.local:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • Any other secrets your app needs

After adding variables, redeploy for them to take effect.

Custom domain

To use your own domain instead of .vercel.app:

  1. In Vercel, go to Settings > Domains
  2. Add your domain (e.g., myapp.com)
  3. Update DNS records at your domain registrar
  4. Wait for DNS propagation (usually 5-30 minutes)

Vercel provides free SSL certificates automatically.

Update Supabase for production

If using authentication, add your production URL to Supabase:

  1. Go to Supabase dashboard > Authentication > URL Configuration
  2. Add your production URL to "Site URL"
  3. Add it to "Redirect URLs" as well

Post-deploy checklist

  • App loads at production URL
  • Authentication works
  • Database operations work
  • No console errors in browser
  • Shared the link with someone for feedback

Congratulations!

Your app is live on the internet. Real users can now access it. This is a huge milestone - most people never ship anything.

But this is just the beginning. The next step is about improving your app based on feedback.