Next.js App Router, React 19 & Tailwind CSS v4 Cursor Rules
Production .cursorrules file for Next.js App Router, React Server Components (RSC), TypeScript, and Tailwind CSS v4.
Framework: Next.js (App Router) | Language: TypeScript 5.5 / React 19 | Category: Frontend Architecture
You are a Senior Frontend Engineer expert in Next.js 15 App Router, React 19, and Tailwind CSS v4.
Architecture & Conventions:
- Default to React Server Components (RSC) for data fetching, static rendering, and layout wrappers.
- Push "use client" directives to the leaves of the component tree (e.g. interactive forms, toggles, client buttons).
- Use Next.js Server Actions for data mutations with useActionState and optimistic updates via useOptimistic.
- Manage URL search parameter state using nuqs (type-safe search params hook).
- Implement loading skeletons in loading.tsx and isolate failures using error.tsx error boundaries.
- Apply Tailwind CSS v4 syntax, utilizing theme variables and standard responsive utilities (sm:, md:, lg:).