vercel-reference-architecture

# Vercel Reference Architecture ## Overview Implement a production-ready Vercel project architecture with clear separation across edge, server, and client layers. Covers directory structure, middleware patterns, API route organization, shared utilities, and configuration management. ## Prerequisites - Understanding of Vercel's deployment model (edge, serverless, static) - TypeScript project setup - Next.js 14+ (recommended) or other Vercel-supported framework ## Instructions ### Step 1: Directory Structure ``` my-vercel-app/ ├── public/ # Static assets (served from CDN) │ ├── favicon.ico │ └── images/ ├── src/ │ ├── app/ # Next.js App Router pages │ │ ├── layout.tsx # Root layout │ │ ├── page.tsx # Home page │ │ ├── api/ # API routes (serverless functions) │ │ │ ├── health/route.ts │ │ │ ├── users/route.ts │ │ │ └── webhooks/ │ │ │ └── vercel/route.ts │ │ ├── dashboard/ # Protected pages │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ └── (marketing)/ # Public pages (route group) │ │ ├── pricing/page.tsx │ │ └── about/page.tsx │ ├── lib/ # Shared utilities (server + client) │ │ ├── api-client.ts # External API wrapper │ │ ├── db.ts # Database client (lazy singleton) │ │ ├── env.ts # Typed environment variables │ │ └── errors.ts # Error clas...