vercel-known-pitfalls

# Vercel Known Pitfalls ## Overview Catalog of the most common Vercel anti-patterns with severity ratings, detection methods, and fixes. Organized by category: secret exposure, serverless function mistakes, edge runtime violations, configuration errors, and cost traps. ## Prerequisites - Access to Vercel codebase for review - Understanding of Vercel's deployment model - Familiarity with `vercel-common-errors` for error codes ## Instructions ### Category 1: Secret Exposure (Critical) **P1: Secrets in NEXT_PUBLIC_ variables** ```typescript // BAD — exposed in client JavaScript bundle, visible to anyone const apiKey = process.env.NEXT_PUBLIC_API_SECRET; // This value is inlined at build time into the browser bundle // GOOD — server-only access const apiKey = process.env.API_SECRET; // Only accessible in serverless functions and server components ``` - **Detection:** `grep -r 'NEXT_PUBLIC_.*SECRET\|NEXT_PUBLIC_.*KEY\|NEXT_PUBLIC_.*TOKEN' src/` - **Fix:** Remove `NEXT_PUBLIC_` prefix, rotate the exposed secret immediately **P2: Hardcoded credentials in source** ```typescript // BAD const client = new Client({ apiKey: 'sk_live_abc123' }); // GOOD const client = new Client({ apiKey: process.env.API_KEY }); ``` - **Detection:** `grep -rE 'sk_live|sk_test|Bearer [a-zA-Z0-9]{20,}' src/ api/` - **Fix:** Move to environment variables, add pre-commit hook **P3: Secrets in vercel.json** ```json // BAD — vercel.json is committed to git { "env": { "API_KEY": "sk_live_abc123" } } ...