How to Deploy Your First Project

Step 1: What Does "Deploy" Mean?

When you run npm run dev, your app runs on localhost — only you can see it. Deploying means putting your app on a server so anyone with the URL can access it.

The modern deployment pipeline:

Your Code → Git Push → Build Server → CDN → Users

Key terms:

• Build — Converting your source code into optimized files for production
• CDN — Content Delivery Network, serves your files from locations close to users
• CI/CD — Continuous Integration/Deployment, automatically builds and deploys on every push
• Environment variables — Config values (API keys, database URLs) that differ between dev and production

Step 2: Prepare Your Project

Before deploying, make sure your project builds successfully:

Common build failures:

• TypeScript errors — Fix all type errors before deploying
• Missing environment variables — Create .env.local for dev, configure them in your hosting platform for production
• Import errors — Check that all packages are in dependencies (not just devDependencies) if they're needed at runtime

Step 3: Deploy to Vercel (Recommended for Next.js)

Vercel is built by the Next.js team and offers the smoothest deployment experience:

First-time setup:

1. Go to vercel.com and sign up with your GitHub account
2. Click "Add New Project"
3. Import your GitHub repository
4. Vercel auto-detects Next.js and configures the build
5. Click "Deploy"

That's it. Your app is live.

What happens automatically:

• Every push to main triggers a new production deployment
• Every pull request gets a preview deployment with its own URL
• HTTPS is configured automatically
• The CDN distributes your app globally

Adding environment variables:

1. Go to your project settings on Vercel
2. Navigate to "Environment Variables"
3. Add each variable (e.g., NEXT_PUBLIC_SUPABASE_URL)
4. Redeploy for changes to take effect

Step 4: Custom Domain

Your free Vercel URL looks like my-project-abc123.vercel.app. To use your own domain:

1. Buy a domain from a registrar (Namecheap, Cloudflare, Google Domains)
2. In Vercel: Settings → Domains → Add your domain
3. Update your DNS records as instructed (usually adding an A record or CNAME)
4. Wait for DNS propagation (usually 5-30 minutes)

Vercel automatically provisions an SSL certificate — your site will have HTTPS.

Step 5: Environment Variables and Secrets

Never commit secrets to git. Use environment variables instead:

Rules:

• Variables prefixed with NEXT_PUBLIC_ are exposed to the browser — only use for public values
• Server-only variables (no prefix) are only available in API routes and server components
• Never put NEXT_PUBLIC_ on secrets like database passwords or service role keys

In Vercel: Add the same variables in your project settings. You can have different values for Production, Preview, and Development environments.

Step 6: Monitoring Your Deployment

After deploying, monitor your app:

Vercel Dashboard:

• Deployments — See build logs, deployment status
• Analytics — Traffic, Web Vitals (LCP, FID, CLS)
• Logs — Server-side console output (from API routes)

Build logs are your first stop when a deployment fails. They show the exact error that broke the build.

Common deployment issues:

| Problem | Cause | Fix | | ------------- | ---------------------- | ----------------------------------------- | | Build fails | TypeScript/lint errors | Fix errors locally, push again | | 500 errors | Missing env variables | Add them in Vercel settings | | Blank page | Client-side crash | Check browser console on the deployed URL | | Stale content | Caching | Redeploy or clear the CDN cache |

Step 7: The Deployment Checklist

Before every production deployment:

• [ ] npm run build passes locally
• [ ] npm run lint passes with no warnings
• [ ] npm run typecheck passes with no errors
• [ ] All environment variables are set in the hosting platform
• [ ] No secrets are committed to the repository
• [ ] The production URL loads correctly after deployment
• [ ] Core functionality works on the deployed version (not just localhost)

What's next? Learn How to Build and Consume APIs to connect your frontend to real data sources.