Deploy to Vercel & Netlify

Deploying to Vercel and Netlify

Deploying a web application used to require configuring servers, managing infrastructure, and dealing with SSL certificates. Modern platforms like Vercel and Netlify remove all of that — push your code to GitHub and your app is live in under a minute, with global CDN, HTTPS, automatic deployments, and preview URLs for every pull request.

Vercel — The Best Choice for Next.js

Vercel is made by the creators of Next.js. It understands every Next.js feature out of the box and needs zero configuration.

Deploy in 3 Steps

1. Push your project to GitHub

2. Go to vercel.com and click "Add New Project"

3. Import your GitHub repository — Vercel auto-detects Next.js and configures the build

Your app is live at your-app-name.vercel.app. Done.

What Vercel Handles Automatically

• Build: runs npm run build on every push
• Server Components: routes with cache: "no-store" run as serverless functions
• Static routes: pre-rendered pages served from the CDN edge
• API routes: deployed as serverless functions, auto-scaled
• Images: next/image optimization via Vercel's image service
• HTTPS: automatic SSL certificate
• Preview deployments: every pull request gets a unique URL

Environment Variables on Vercel

Never hardcode secrets. Set them in the Vercel dashboard:

1. Go to your project → Settings → Environment Variables
2. Add each variable: DATABASE_URL, JWT_SECRET, STRIPE_SECRET_KEY, etc.
3. Set the scope: Production, Preview, or Development

For local development, create .env.local:

DATABASE_URL=postgresql://localhost:5432/myapp_dev
JWT_SECRET=local-dev-secret-change-this
NEXT_PUBLIC_API_URL=http://localhost:3000

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. All others stay server-side only.

To pull Vercel's environment variables locally:

npm install -g vercel
vercel login
vercel link       # link your local folder to the Vercel project
vercel env pull   # download env vars to .env.local

Custom Domain

1. Go to project → Settings → Domains
2. Add your domain (e.g., myapp.com)
3. Vercel provides DNS records to add at your domain registrar
4. SSL certificate is provisioned automatically

Vercel CLI

npm install -g vercel

# Deploy to preview
vercel

# Deploy to production
vercel --prod

# View logs
vercel logs

# List deployments
vercel ls

Netlify — Great for Static Sites and SPAs

Netlify is excellent for static sites, React SPAs without SSR, and projects built with Vite:

Deploying a Vite/React App

1. Build command: npm run build
2. Publish directory: dist

Either connect your GitHub repo through the Netlify UI, or use the CLI:

npm install -g netlify-cli
netlify login
netlify init
netlify deploy --prod

netlify.toml Configuration

# netlify.toml — in the root of your project

[build]
  command = "npm run build"
  publish = "dist"

# Redirect all routes to index.html for SPAs
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Security headers
[[headers]]
  for = "/*"
    [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

The redirect rule is essential for single-page apps — without it, refreshing /dashboard returns a 404 because there's no dashboard.html file.

Netlify Functions

Serverless functions in a netlify/functions/ folder:

// netlify/functions/send-email.ts
import type { Handler } from "@netlify/functions";

export const handler: Handler = async (event) => {
    if (event.httpMethod !== "POST") {
        return { statusCode: 405, body: "Method not allowed" };
    }
    
    const { email, name } = JSON.parse(event.body ?? "{}");
    
    // Send email logic here...
    
    return {
        statusCode: 200,
        body: JSON.stringify({ success: true }),
    };
};

Callable at /.netlify/functions/send-email.

Deployment Checklist

Before every production deployment:

✅ Environment variables set on the platform
✅ Build passes locally (npm run build)
✅ No console.log with sensitive data
✅ API keys are in env vars, not hardcoded
✅ .env is in .gitignore
✅ Database connection string uses production database
✅ CORS configured for your production domain
✅ Error pages return appropriate HTTP status codes
✅ Images optimized (use next/image or compress manually)
✅ Remove console.log statements used during development

Preview Deployments — A Game Changer

Both Vercel and Netlify create a unique URL for every pull request. The URL format is typically:

https://my-app-git-feature-branch-username.vercel.app

This means:

• You can share a working version of your feature with a client or team member before merging
• QA can test the exact state of the code in the PR
• You can catch deployment-specific bugs (env var issues, build failures) before they hit production

Always test your preview deployment before merging. Many bugs only appear in the deployed environment.

Database for Production

Local databases don't follow you to production. Use managed databases:

PostgreSQL options:

• Neon — serverless PostgreSQL, free tier available
• Supabase — PostgreSQL with realtime, auth, storage
• Railway — simple, per-usage pricing
• PlanetScale — MySQL-compatible, branches for schema changes

After creating a production database, copy the connection string into your environment variables on Vercel/Netlify.

Run migrations on deployment:

// package.json
{
    "scripts": {
        "build": "prisma generate && prisma migrate deploy && next build"
    }
}

prisma migrate deploy applies any pending migrations. Running it as part of the build ensures your schema is always in sync with your code.

Monitoring Your Deployment

Know when things break:

# Vercel — view real-time logs
vercel logs --follow

# Check function execution in Vercel dashboard
# Project → Functions → click any function → view invocations and logs

Consider adding error monitoring with Sentry:

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

Sentry captures unhandled errors and sends you an alert when something goes wrong in production — before your users report it.

Next lesson: Environment variables and secrets — managing configuration safely across environments.