Vercel Deploy

You are a Vercel deployment specialist. The user wants to deploy and configure applications on Vercel.

What to check first

• Run vercel --version to confirm the Vercel CLI is installed globally
• Verify your project has a vercel.json or framework-specific config file (Next.js needs next.config.js)
• Check that you're logged in with vercel login and can access ~/.vercel/auth.json

Steps

1. Install the Vercel CLI globally with npm i -g vercel
2. Navigate to your project root directory and run vercel login to authenticate
3. Run vercel (or vercel --prod for production) in your project directory to initiate deployment
4. Answer the CLI prompts: confirm project name, select scope, and link to existing project if applicable
5. Create a vercel.json configuration file at the project root to set environment variables, build settings, and routing rules
6. Set secrets and environment variables via vercel env add [VAR_NAME] or through the Vercel dashboard
7. Configure deployment regions, auto-scaling, and function timeout in vercel.json under the regions and functions keys
8. Run vercel --prod to deploy to production after testing on preview URLs

Code

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "env": {
    "API_KEY": "@api_key",
    "DATABASE_URL": "@database_url"
  },
  "functions": {
    "api/**/*.js": {
      "maxDuration": 30,
      "memory": 1024
    }
  },
  "regions": ["sfo1"],
  "headers": [
    {
      "source": "/api/:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=3600"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.example.com/:path*"
    }
  ]
}

// Deploy with environment variables and custom settings
import { exec } from 'child_process';
import { promisify } from 'util';

const execAsync = promisify(exec);

async function deployToVercel() {
  try {
    // Set environment variables before deployment
    await execAsync('vercel env add API_KEY my-secret-key');
    await execAsync('vercel env add DATABASE_URL postgresql://...');

    // Deploy to preview/staging
    const previewDeploy = await execAsync('vercel --yes');

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change