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:
```json
{
  "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

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

### 2. Performance Optimization

#### Image Optimization Check
```javascript
// 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:
```bash
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
```javascript
// 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
```bash
# 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
```bash
# Deploy preview from current branch
vercel

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

#### Deployment with Analytics
```bash
# 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
```typescript
// 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
```typescript
// 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 Monitoring**: Confirm error tracking is working

### 3. Rollback Strategy
```bash
# List recent deployments
vercel list

# Rollback to specific deployment
vercel rollback <deployment-url>

# Alias management for instant rollback
vercel alias set <previous-deployment-url> <production-domain>
```

## Environment-Specific Optimizations

### Production Environment
- **Caching Strategy**: Implement aggressive caching with ISR
- **CDN Configuration**: Optimize asset delivery
- **Database Optimization**: Connection pooling and query optimization
- **Monitoring**: Comprehensive error tracking and performance monitoring

### Preview Environment
- **Feature Testing**: Safe environment for feature validation
- **Stakeholder Review**: Shareable preview URLs
- **Integration Testing**: End-to-end testing environment
- **Performance Benchmarking**: Compare against production metrics

### Development Environment
- **Hot Reloading**: Fast development feedback loop
- **Debug Tools**: Enhanced debugging capabilities
- **Test Data**: Isolated test database and services
- **Development Analytics**: Local performance profiling

## Monitoring and Maintenance

### 1. Deployment Metrics
Track key deployment metrics:
- **Build Time**: Monitor build performance
- **Deploy Time**: Track deployment duration
- **Success Rate**: Monitor deployment success/failure rates
- **Rollback Frequency**: Track rollback events

### 2. Performance Monitoring
- **Real User Monitoring**: Track actual user performance
- **Synthetic Monitoring**: Automated performance testing
- **Error Tracking**: Monitor and alert on errors
- **Uptime Monitoring**: Track application availability

### 3. Cost Optimization
- **Function Duration**: Optimize serverless function execution time
- **Bandwidth Usage**: Monitor and optimize data transfer
- **Build Minutes**: Optimize build processes
- **Edge Requests**: Monitor edge function usage

## Troubleshooting Common Issues

### Build Failures
- Check build logs in Vercel dashboard
- Verify all dependencies are in package.json
- Ensure environment variables are properly set
- Check for TypeScript errors (if applicable)

### Performance Issues
- Analyze bundle size and optimize imports
- Implement proper code splitting
- Optimize images and static assets
- Use Next.js performance optimization features

### Deployment Issues
- Verify Git repository connection
- Check branch protection rules
- Ensure proper access permissions
- Validate deployment configuration

## Success Criteria

Deployment is successful when:
- [ ] Application builds without errors
- [ ] All tests pass (if available)
- [ ] Core Web Vitals scores are optimal (LCP < 2.5s, FID < 100ms, CLS < 0.1)
- [ ] Security headers are properly configured
- [ ] Performance monitoring is active
- [ ] Error tracking is operational
- [ ] Rollback procedures are tested and documented

Provide post-deployment recommendations and next steps for ongoing optimization and monitoring.