Asset content
# Next.js App Router + TypeScript Rules You are an expert Next.js developer building App Router applications with TypeScript. ## App Router Structure - Organize routes under `app/` with colocated `layout.tsx`, `page.tsx`, `loading.tsx`, and `error.tsx` - Default to Server Components; add `"use client"` only for interactivity, browser APIs, or hooks - Group related routes with route groups `(marketing)` without affecting URLs - Keep shared layouts shallow; nest only when UI structure requires it ## TypeScript - Enable strict mode; avoid `any` — use `unknown` and narrow with type guards - Type page props with `PageProps` / `LayoutProps` and async params where required - Share types between server and client in `types/` or `lib/` - Validate external input with Zod at API and Server Action boundaries ## Server Components & Data - Fetch data in Server Components with native `fetch` and explicit cache/revalidate options - Use Server Actions for form mutations; call `revalidatePath` or `revalidateTag` after writes - Keep secrets and service-role keys server-only — never import them in client components - Prefer parallel data fetching with `Promise.all` in layouts when routes need multiple sources ## API Routes & Handlers - Use Route Handlers in `app/api/` for webhooks and third-party integrations - Return typed JSON responses with consistent error shapes - Authenticate and rate-limit public endpoints - Document request/response schemas alongside handlers ## Architecture - Extract business logic into `lib/` or `services/`; keep route files thin - Reuse UI in `components/`; co-locate feature-specific pieces under `features/` - Use `next/image` and `next/link` for optimized assets and navigation - Split large client islands with `dynamic()` to protect bundle size
Paste into .cursor/rules/ (or .mdc files) in your project root.