davila7__claude-code-templates/dashboard/public/component-content/commands/nextjs-vercel/vercel-deploy-optimize.json

{"content": "---\nallowed-tools: Read, Write, Edit, Bash\nargument-hint: [environment] [--analyze] [--preview]\ndescription: Optimize and deploy Next.js application to Vercel with performance monitoring\n---\n\n## Vercel Deployment Optimization\n\n**Target Environment**: $ARGUMENTS\n\n## Current Deployment State\n\n- Project directory: !`pwd`\n- Git status: !`git status --porcelain`\n- Current branch: !`git branch --show-current`\n- Vercel project status: !`vercel --version 2>/dev/null || echo \"Vercel CLI not installed\"`\n- Build output: !`ls -la .next/ 2>/dev/null || echo \"No build found\"`\n\n## Configuration Analysis\n\n### Project Configuration\n- Next.js config: @next.config.js\n- Vercel config: @vercel.json (if exists)\n- Package.json: @package.json\n- Environment variables: @.env.local (if exists)\n- Environment example: @.env.example (if exists)\n\n### Vercel Configuration\nAnalyze and optimize `vercel.json` configuration:\n```json\n{\n  \"framework\": \"nextjs\",\n  \"buildCommand\": \"npm run build\",\n  \"devCommand\": \"npm run dev\",\n  \"installCommand\": \"npm install\",\n  \"regions\": [\"iad1\", \"sfo1\", \"lhr1\"],\n  \"functions\": {\n    \"app/api/**/*.ts\": {\n      \"runtime\": \"nodejs18.x\",\n      \"maxDuration\": 30,\n      \"memory\": 1024\n    }\n  },\n  \"crons\": [],\n  \"headers\": [\n    {\n      \"source\": \"/api/(.*)\",\n      \"headers\": [\n        {\n          \"key\": \"Cache-Control\",\n          \"value\": \"s-maxage=300, stale-while-revalidate=86400\"\n        }\n      ]\n    },\n    {\n      \"source\": \"/(.*)\",\n      \"headers\": [\n        {\n          \"key\": \"X-Frame-Options\",\n          \"value\": \"DENY\"\n        },\n        {\n          \"key\": \"X-Content-Type-Options\",\n          \"value\": \"nosniff\"\n        },\n        {\n          \"key\": \"Referrer-Policy\",\n          \"value\": \"strict-origin-when-cross-origin\"\n        }\n      ]\n    }\n  ],\n  \"redirects\": [],\n  \"rewrites\": []\n}\n```\n\n## Pre-Deployment Optimization\n\n### 1. Build Optimization\nRun comprehensive build analysis:\n- **Bundle Analysis**: Generate bundle analyzer report\n- **Performance Check**: Analyze build output for optimization opportunities\n- **Type Checking**: Ensure TypeScript compilation is error-free\n- **Lint Check**: Run ESLint for code quality\n\n```bash\n# Build optimization commands\nnpm run build\nnpm run lint\nnpm run type-check  # If TypeScript project\n```\n\n### 2. Performance Optimization\n\n#### Image Optimization Check\n```javascript\n// Verify Next.js image configuration\nconst nextConfig = {\n  images: {\n    formats: ['image/webp', 'image/avif'],\n    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],\n    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],\n    minimumCacheTTL: 31536000,\n    dangerouslyAllowSVG: false,\n    contentSecurityPolicy: \"default-src 'self'; script-src 'none'; sandbox;\",\n  },\n};\n```\n\n#### Bundle Analysis\nGenerate and analyze webpack bundle:\n```bash\nANALYZE=true npm run build\n# or\nnpm run build -- --analyze\n```\n\n### 3. Environment Configuration\n\n#### Environment Variables Setup\nEnsure proper environment variable configuration:\n- **Production**: Verify all required environment variables are set in Vercel dashboard\n- **Preview**: Configure preview environment variables\n- **Development**: Local development environment setup\n\n### 4. Security Headers Optimization\n```javascript\n// Enhanced security headers in next.config.js\nconst securityHeaders = [\n  {\n    key: 'X-DNS-Prefetch-Control',\n    value: 'on'\n  },\n  {\n    key: 'Strict-Transport-Security',\n    value: 'max-age=63072000; includeSubDomains; preload'\n  },\n  {\n    key: 'X-XSS-Protection',\n    value: '1; mode=block'\n  },\n  {\n    key: 'X-Frame-Options',\n    value: 'SAMEORIGIN'\n  },\n  {\n    key: 'Permissions-Policy',\n    value: 'camera=(), microphone=(), geolocation=()'\n  },\n  {\n    key: 'X-Content-Type-Options',\n    value: 'nosniff'\n  },\n  {\n    key: 'Referrer-Policy',\n    value: 'origin-when-cross-origin'\n  }\n];\n```\n\n## Deployment Process\n\n### 1. Pre-deployment Checklist\n- [ ] Build passes without errors\n- [ ] All tests pass (if available)\n- [ ] Environment variables configured\n- [ ] Security headers implemented\n- [ ] Performance metrics baseline established\n- [ ] Database migrations complete (if applicable)\n\n### 2. Deployment Commands\n\n#### Production Deployment\n```bash\n# Deploy to production\nvercel --prod\n\n# Deploy with environment variables\nvercel --prod --env-file .env.production\n\n# Deploy specific directory\nvercel --prod --cwd ./path/to/project\n```\n\n#### Preview Deployment\n```bash\n# Deploy preview from current branch\nvercel\n\n# Deploy with custom alias\nvercel --alias preview-branch-name.vercel.app\n```\n\n#### Deployment with Analytics\n```bash\n# Deploy with build analytics\nANALYZE=true vercel --prod\n\n# Deploy with performance monitoring\nvercel --prod --meta performance=true\n```\n\n## Post-Deployment Optimization\n\n### 1. Performance Monitoring Setup\n\n#### Core Web Vitals Tracking\n```typescript\n// Add to _app.tsx or layout.tsx\nimport { Analytics } from '@vercel/analytics/react';\nimport { SpeedInsights } from '@vercel/speed-insights/next';\n\nexport default function App({ Component, pageProps }) {\n  return (\n    <>\n      <Component {...pageProps} />\n      <Analytics />\n      <SpeedInsights />\n    </>\n  );\n}\n```\n\n#### Custom Performance Tracking\n```typescript\n// lib/analytics.ts\nexport function reportWebVitals({ id, name, label, value }) {\n  fetch('/api/analytics', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      metric: name,\n      value: value,\n      label: label,\n      timestamp: Date.now()\n    })\n  });\n}\n```\n\n### 2. Deployment Validation\n\n#### Health Checks\n- **Application Health**: Verify application loads correctly\n- **API Endpoints**: Test critical API routes\n- **Database Connectivity**: Verify database connections (if applicable)\n- **External Services**: Test third-party integrations\n\n#### Performance Validation\n- **Core Web Vitals**: Check LCP, FID, CLS scores\n- **Lighthouse Score**: Run Lighthouse audit\n- **Load Testing**: Verify application performance under load\n- **Error Monitoring**: Confirm error tracking is working\n\n### 3. Rollback Strategy\n```bash\n# List recent deployments\nvercel list\n\n# Rollback to specific deployment\nvercel rollback <deployment-url>\n\n# Alias management for instant rollback\nvercel alias set <previous-deployment-url> <production-domain>\n```\n\n## Environment-Specific Optimizations\n\n### Production Environment\n- **Caching Strategy**: Implement aggressive caching with ISR\n- **CDN Configuration**: Optimize asset delivery\n- **Database Optimization**: Connection pooling and query optimization\n- **Monitoring**: Comprehensive error tracking and performance monitoring\n\n### Preview Environment\n- **Feature Testing**: Safe environment for feature validation\n- **Stakeholder Review**: Shareable preview URLs\n- **Integration Testing**: End-to-end testing environment\n- **Performance Benchmarking**: Compare against production metrics\n\n### Development Environment\n- **Hot Reloading**: Fast development feedback loop\n- **Debug Tools**: Enhanced debugging capabilities\n- **Test Data**: Isolated test database and services\n- **Development Analytics**: Local performance profiling\n\n## Monitoring and Maintenance\n\n### 1. Deployment Metrics\nTrack key deployment metrics:\n- **Build Time**: Monitor build performance\n- **Deploy Time**: Track deployment duration\n- **Success Rate**: Monitor deployment success/failure rates\n- **Rollback Frequency**: Track rollback events\n\n### 2. Performance Monitoring\n- **Real User Monitoring**: Track actual user performance\n- **Synthetic Monitoring**: Automated performance testing\n- **Error Tracking**: Monitor and alert on errors\n- **Uptime Monitoring**: Track application availability\n\n### 3. Cost Optimization\n- **Function Duration**: Optimize serverless function execution time\n- **Bandwidth Usage**: Monitor and optimize data transfer\n- **Build Minutes**: Optimize build processes\n- **Edge Requests**: Monitor edge function usage\n\n## Troubleshooting Common Issues\n\n### Build Failures\n- Check build logs in Vercel dashboard\n- Verify all dependencies are in package.json\n- Ensure environment variables are properly set\n- Check for TypeScript errors (if applicable)\n\n### Performance Issues\n- Analyze bundle size and optimize imports\n- Implement proper code splitting\n- Optimize images and static assets\n- Use Next.js performance optimization features\n\n### Deployment Issues\n- Verify Git repository connection\n- Check branch protection rules\n- Ensure proper access permissions\n- Validate deployment configuration\n\n## Success Criteria\n\nDeployment is successful when:\n- [ ] Application builds without errors\n- [ ] All tests pass (if available)\n- [ ] Core Web Vitals scores are optimal (LCP < 2.5s, FID < 100ms, CLS < 0.1)\n- [ ] Security headers are properly configured\n- [ ] Performance monitoring is active\n- [ ] Error tracking is operational\n- [ ] Rollback procedures are tested and documented\n\nProvide post-deployment recommendations and next steps for ongoing optimization and monitoring."}