Vercel and Next.js deployment best practices including server components, edge functions, AI SDK integration, and performance optimization.

Vercel Development Best Practices Overview This skill provides comprehensive guidelines for developing and deploying applications on Vercel, with a focus on Next.js, React Server Components, Edge Functions, and the Vercel AI SDK. Core Principles Write concise, technical TypeScript code with accurate examples Use functional and declarative programming patterns; avoid classes Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC) Implement responsive design with Tailwind CSS using mobile first approach Optimize for Core Web Vitals and performance Project Structure Next.js App Router Guidelines File Naming Conventions Use lowercase with dashes for directories (e.g., components/auth wizard ) Prefer named exports for components and functions Use page.tsx for route pages, layout.tsx for layouts Use loading.tsx for loading states, error.tsx for error boundaries Server Components (Default) Client Components (When Needed) TypeScript Standards Type Definitions Component Props API Routes Route Handlers Edge Runtime Vercel AI SDK Integration Streaming Chat UI AI API Route Error Handling for AI Data Fetching Server Side Data Fetching URL State Management Performance Optimization Image Optimization Dynamic Imports Suspense Boundaries Error Handling Error Boundaries Global Error Handler Vercel Configuration vercel.json Environment Variables Deployment Preview Deployments Every pull request gets a preview deployment Use preview URLs for testing and review Share preview links with stakeholders Production Deployment Edge Config UI and Styling Tailwind CSS Setup Shadcn UI Components Accessibility Best Practices Common Pitfalls to Avoid 1. Using 'use client' unnecessarily 2. Not implementing proper error boundaries 3. Ignoring Core Web Vitals optimization 4. Not using TypeScript strictly 5. Hardcoding environment variables 6. Missing Suspense boundaries for async components 7. Not optimizing images 8. Ignoring accessibility requirements

vercel-development