/vercel-deploy-optimize

allowed-tools: Read, Write, Edit, Bash
argument-hint: [environment] [--analyze] [--preview]
description: Optimize and deploy Next.js application to Vercel with performance monitoring

Vercel Deployment Optimization

**Target Environment**: $ARGUMENTS

Current Deployment State

• Project directory: !`pwd`
• Git status: !`git status --porcelain`
• Current branch: !`git branch --show-current`
• Vercel project status: !`vercel --version 2>/dev/null || echo "Vercel CLI not installed"`
• Build output: !`ls -la .next/ 2>/dev/null || echo "No build found"`

Configuration Analysis

Project Configuration

• Next.js config: @next.config.js
• Vercel config: @vercel.json (if exists)
• Package.json: @package.json
• Environment variables: @.env.local (if exists)
• Environment example: @.env.example (if exists)

Vercel Configuration

Analyze and optimize `vercel.json` configuration:

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "regions": ["iad1", "sfo1", "lhr1"],
  "functions": {
    "app/api/**/*.ts": {
      "runtime": "nodejs18.x",
      "maxDuration": 30,
      "memory": 1024
    }
  },
  "crons": [],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "s-maxage=300, stale-while-revalidate=86400"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    }
  ],
  "redirects": [],
  "rewrites": []
}

Pre-Deployment Optimization

1. Build Optimization

Run comprehensive build analysis:

• **Bundle Analysis**: Generate bundle analyzer report
• **Performance Check**: Analyze build output for optimization opportunities
• **Type Checking**: Ensure TypeScript compilation is error-free
• **Lint Check**: Run ESLint for code quality

# Build optimization commands
npm run build
npm run lint
npm run type-check  # If TypeScript project

2. Performance Optimization

Image Optimization Check

// Verify Next.js image configuration
const nextConfig = {
  images: {
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 31536000,
    dangerouslyAllowSVG: false,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
};

Bundle Analysis

Generate and analyze webpack bundle:

ANALYZE=true npm run build
# or
npm run build -- --analyze

3. Environment Configuration

Environment Variables Setup

Ensure proper environment variable configuration:

• **Production**: Verify all required environment variables are set in Vercel dashboard
• **Preview**: Configure preview environment variables
• **Development**: Local development environment setup

4. Security Headers Optimization

// Enhanced security headers in next.config.js
const securityHeaders = [
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN'
  },
  {
    key: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=()'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'Referrer-Policy',
    value: 'origin-when-cross-origin'
  }
];

Deployment Process

1. Pre-deployment Checklist

• [ ] Build passes without errors
• [ ] All tests pass (if available)
• [ ] Environment variables configured
• [ ] Security headers implemented
• [ ] Performance metrics baseline established
• [ ] Database migrations complete (if applicable)

2. Deployment Commands

Production Deployment

# Deploy to production
vercel --prod

# Deploy with environment variables
vercel --prod --env-file .env.production

# Deploy specific directory
vercel --prod --cwd ./path/to/project

Preview Deployment

# Deploy preview from current branch
vercel

# Deploy with custom alias
vercel --alias preview-branch-name.vercel.app

Deployment with Analytics

# Deploy with build analytics
ANALYZE=true vercel --prod

# Deploy with performance monitoring
vercel --prod --meta performance=true

Post-Deployment Optimization

1. Performance Monitoring Setup

Core Web Vitals Tracking

// Add to _app.tsx or layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
      <SpeedInsights />
    </>
  );
}

Custom Performance Tracking

// lib/analytics.ts
export function reportWebVitals({ id, name, label, value }) {
  fetch('/api/analytics', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      metric: name,
      value: value,
      label: label,
      timestamp: Date.now()
    })
  });
}

2. Deployment Validation

Health Checks

• **Application Health**: Verify application loads correctly
• **API Endpoints**: Test critical API routes
• **Database Connectivity**: Verify database connections (if applicable)
• **External Services**: Test third-party integrations

Performance Validation

• **Core Web Vitals**: Check LCP, FID, CLS scores
• **Lighthouse Score**: Run Lighthouse audit
• **Load Testing**: Verify application performance under load
• **Error Moni