nextjs-vercellisted

# Stack Profile: Next.js + Vercel This profile is automatically loaded when working in a Next.js project deployed to Vercel. ## Architecture Conventions - **Next.js 14+** with App Router (not Pages Router) - **React Server Components** by default; `"use client"` only when needed - **Prisma** for database access with PostgreSQL - **Tailwind CSS** for styling - **NextAuth** or similar for authentication - **Zod** for validation at system boundaries ## File Structure ``` app/ ├── (auth)/ # Route groups for layout scoping │ ├── login/ │ └── register/ ├── api/ # API routes │ └── resource/ │ └── route.ts # GET, POST, PUT, DELETE handlers ├── layout.tsx # Root layout └── page.tsx # Home page src/ ├── components/ # Shared React components ├── lib/ # Utilities, config, Prisma client └── server/ # Server-only code (services, auth) prisma/ └── schema.prisma ``` ## Key Patterns - Route handlers export named functions: `export async function GET(request: Request)` - Server actions for mutations: `"use server"` in action files - Metadata API for SEO: `export const metadata = { ... }` or `generateMetadata()` - Loading UI: `loading.tsx` for Suspense boundaries - Error UI: `error.tsx` for error boundaries - Middleware: `middleware.ts` at project root for auth/redirects ## TypeScript & Code Style - Strict TypeScript everywhere — no `any` unless truly unavoidable (document why) - Prefer `const` over `let`,