Using Vercel and Netlify for Seamless Deployments

Vercel and Netlify provide powerful platforms for deploying React applications with minimal configuration. Here’s how to leverage both platforms for optimal deployment workflows:

Vercel Deployment Guide

1. Basic Vercel Configuration

// vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build",
        "cleanUrls": true
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/$1",
      "headers": {
        "Cache-Control": "s-maxage=3600, stale-while-revalidate=86400"
      }
    }
  ],
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

2. Serverless Functions in Vercel

// api/hello.js (Vercel serverless function)
export default function handler(req, res) {
  const { name = 'World' } = req.query;
  res.status(200).json({
    message: `Hello ${name}!`,
    timestamp: new Date().toISOString()
  });
}

3. Environment Variables

# .env.local (development)
NEXT_PUBLIC_API_URL=https://api.dev.example.com

# vercel.json environment configuration
{
  "env": {
    "PRODUCTION_API_URL": "https://api.example.com",
    "ANALYTICS_ID": "@analytics-id"
  }
}

Netlify Deployment Guide

4. Netlify Configuration File

# netlify.toml

[build]

command = “npm run build” publish = “build” functions = “src/functions”

[build.environment]

NODE_VERSION = “18.x” [[headers]] for = “/*”

[headers.values]

X-Frame-Options = “DENY” X-XSS-Protection = “1; mode=block” Content-Security-Policy = “default-src ‘self'”

[context.production.environment]

REACT_APP_API_URL = “https://api.example.com”

5. Netlify Functions

// src/functions/hello.js
exports.handler = async function(event, context) {
  return {
    statusCode: 200,
    body: JSON.stringify({ 
      message: "Hello from Netlify Function!",
      query: event.queryStringParameters 
    })
  };
};

6. Netlify Forms Integration

// ContactForm.js
function ContactForm() {
  return (
    <form name="contact" method="POST" data-netlify="true">
      <input type="hidden" name="form-name" value="contact" />
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required></textarea>
      <button type="submit">Send</button>
    </form>
  );
}

Advanced Features

7. Vercel Edge Middleware

// middleware.js (Vercel Edge Function)
export function middleware(request) {
  const url = new URL(request.url);
  const country = request.geo.country;

  if (country === 'GB' && !url.pathname.startsWith('/uk')) {
    url.pathname = `/uk${url.pathname}`;
    return Response.redirect(url);
  }

  return NextResponse.next();
}

8. Netlify Edge Functions

// src/edge-functions/geo-redirect.js
export default async (request, context) => {
  const country = context.geo.country;
  const url = new URL(request.url);

  if (country === 'JP' && !url.pathname.startsWith('/ja')) {
    return Response.redirect('/ja' + url.pathname);
  }

  return context.next();
};

CI/CD Integration

9. GitHub Actions for Vercel

# .github/workflows/vercel.yml
name: Vercel Deployment

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          scope: ${{ secrets.VERCEL_SCOPE }}

10. Netlify Build Plugins

# netlify.toml with plugins
[[plugins]]
  package = "@netlify/plugin-lighthouse"

[[plugins]]
  package = "netlify-plugin-cypress"

[plugins.inputs]

enable = true configFile = “cypress.json”

Performance Optimization

11. Vercel Image Optimization

// Next.js Image component
import Image from 'next/image';

function OptimizedImage() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile"
      width={500}
      height={500}
      priority
      quality={80}
    />
  );
}

12. Netlify Large Media

# Enable Netlify Large Media
netlify plugins:install netlify-lm-plugin
netlify lm:setup

// Using transformed images
function ProductImage({ src }) {
  return (
    <img
      src={`${src}?w=500&h=500&fit=cover`}
      alt="Product"
      loading="lazy"
    />
  );
}

Deployment Strategies

13. Vercel Preview Deployments

// package.json
{
  "scripts": {
    "deploy:preview": "vercel --preview",
    "deploy:production": "vercel --prod"
  }
}

14. Netlify Branch Deploys

# netlify.toml

[context.deploy-preview]

command = “npm run build:preview” environment = { REACT_APP_ENV = “staging” }

[context.branch-deploy]

command = “npm run build:branch” environment = { REACT_APP_ENV = “development” }

Best Practices Checklist

1. Vercel Optimization

• [ ] Enable Automatic Static Optimization
• [ ] Configure ISR for dynamic pages
• [ ] Use Edge Middleware for personalization
• [ ] Implement Image Optimization API

1. Netlify Optimization

• [ ] Set up Atomic Deploys
• [ ] Enable Split Testing
• [ ] Use Build Plugins
• [ ] Configure Large Media

1. Security

• [ ] Set security headers
• [ ] Enable HTTPS
• [ ] Use environment variables
• [ ] Implement form spam protection

1. Monitoring

• [ ] Set up Vercel Analytics
• [ ] Configure Netlify Analytics
• [ ] Enable Performance Monitoring
• [ ] Implement Error Tracking

1. CI/CD

• [ ] Connect Git repository
• [ ] Set up branch deploys
• [ ] Configure preview URLs
• [ ] Implement deployment hooks

1. Performance

• [ ] Enable caching headers
• [ ] Optimize images
• [ ] Preload critical assets
• [ ] Implement code splitting