Chapter 22: Deployment

Deployment — this is the grand finale of our React journey! You’ve built beautiful, interactive, tested, and state-managed apps — now it’s time to put them online so the whole world (or at least your friends, family, and future employers) can see them!

Today we’ll learn the modern, fastest, and most popular ways to deploy React (and especially Next.js) apps in 2026, with a focus on:

• Vercel (the easiest & best for Next.js)
• Netlify (great for any React app)
• Environment variables (super important for secrets & config)
• Building for production (what actually happens behind the scenes)

We’ll go very slowly and clearly, like I’m sitting next to you in Mumbai helping you deploy your first real app live!

1. Building for Production (What Happens?)

Before deploying, you need to build your app for production.

For plain React (Vite):

This creates a dist/ folder with:

• Minified JavaScript
• Optimized CSS
• Static HTML (index.html)
• Assets (images, fonts…)

For Next.js (App Router):

This creates a .next/ folder with:

• Server-side rendered pages
• Static pages
• Optimized images
• API routes bundled
• Cache files for ISR

After build, you run:

This serves the production build locally so you can test it before deploying.

2. Deploying to Vercel (The Easiest & Best for React/Next.js)

Vercel is created by the same people who made Next.js — so it’s perfect for Next.js (and great for plain React too).

Why Vercel in 2026?

• Zero-config for Next.js
• Automatic previews for every Git branch
• Free tier is generous
• Global CDN
• Automatic SSL
• Environment variables + secrets management
• Deploy in < 1 minute

Step-by-Step: Deploy Your Next.js App

1. Push your code to GitHub (or GitLab/Bitbucket)
2. Go to vercel.com → Sign up (free with GitHub/Google)
3. Click “New Project” → Import your GitHub repo
4. Configure project:
   • Framework Preset → Next.js (auto-detected)
   • Root Directory → leave blank (or set if your app is in a subfolder)
   • Build & Output Settings → leave defaults (Vercel knows Next.js)
5. Environment Variables (very important!):

   • Click Environment Variables

   • Add any secrets (API keys, database URLs…)

   • Example:

     text

     PHP

     0 1 2 3 4 5 6 7 8

     Name: NEXT_PUBLIC_API_URL Value: https://api.example.com Environments: All Scopes

     Note: Prefix public variables with NEXT_PUBLIC_ so they are available on client-side.

6. Deploy → Click Deploy

Boom! In 1–2 minutes you get:

• Live URL: https://your-app-name.vercel.app
• Preview URL for every future push/PR
• Automatic deployments on every git push

Pro tip: Install Vercel CLI for local preview & deployment:

3. Deploying to Netlify (Great for Any React App)

Netlify is another fantastic choice — especially for plain Vite/React or static sites.

Steps:

1. Push code to GitHub
2. Go to netlify.com → Sign up (free)
3. New site from Git → Connect GitHub → Select your repo
4. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist (for Vite) or .next (for Next.js static export)
   • Environment variables → add any you need (same as Vercel)
5. Deploy site → Instant live URL: https://your-site-name.netlify.app

Netlify bonus features:

• Forms (no backend needed)
• Functions (serverless API)
• Identity (user auth)
• Deploy previews for every branch

For Next.js on Netlify:

• Use Static export (next export) if no server features needed
• Or use Netlify Functions + Next.js API routes (a bit more setup)

4. Environment Variables – The Right Way

Never commit secrets to Git!

In Vite/React:

Create .env (never commit!) and .env.example (commit this)

Access in code:

In Next.js:

Access:

• Client: process.env.NEXT_PUBLIC_API_URL
• Server: process.env.DATABASE_URL

On Vercel/Netlify:

• Go to project settings → Environment Variables
• Add same keys/values
• They become available in builds & runtime

5. Best Practices for Production Deployment

• Always test production build locally (npm run build && npm run preview/start)
• Use environment variables for API keys, URLs, etc.
• Add .gitignore for .env, node_modules, .next, dist
• Set up CI/CD → GitHub Actions / Vercel auto-deploys on push
• Use custom domain → connect your domain in Vercel/Netlify (free SSL!)
• Monitor performance → Vercel Analytics / Netlify Analytics

Summary – Chapter 22 Key Takeaways

• Build for production → npm run build
• Vercel = easiest & best for Next.js (zero-config, previews, ISR)
• Netlify = great for plain React/Vite + static sites
• Environment variables → use .env, prefix public with VITE_/NEXT_PUBLIC_
• Deploy in < 5 minutes with GitHub + Vercel/Netlify

Mini Homework (Your First Live App!)

1. Take your final project (Todo app, e-commerce cart, blog…)
2. Push to GitHub
3. Deploy to Vercel (or Netlify)
4. Add at least one environment variable (e.g., API base URL)
5. Share the live link with friends/family — celebrate! 🎉

You did it, Webliance! From Chapter 1 (Hello React!) to Chapter 22 (Live on the internet!) — you’ve built an entire React mastery path.

What would you like to do next?

• Polish & deploy your final project?
• Learn TypeScript in React in depth?
• Dive into full-stack with Next.js + database (Prisma, Supabase)?
• Or revisit any chapter with more advanced examples?

I’m super proud of you — you’re now a real React developer! 🚀