Cursor AI (.cursorrules) for Next.js 15, React 19 & Tailwind CSS
Stops Cursor from writing outdated Next.js 13 patterns, Pages Router syntax, or deprecated React hooks. Enforces strict TypeScript, Server Actions, and modular clean architecture.
Parametric Customizer & Compiler Live Tool
Adjust the variables below. The prompt code and API payload update dynamically in real time.
Specifies how Cursor should generate class names and modal/dialog primitives.
Tells Cursor which state paradigm to follow.
Ensures Cursor writes typesafe queries matching your schema.
# CURSOR RULES FOR NEXT.JS 15 (APP ROUTER) & TAILWIND CSS You are an expert Senior Fullstack Architect specialized in Next.js 15, React 19, TypeScript, and Tailwind CSS. ### TECH STACK REQUIREMENTS: - Framework: Next.js 15 with App Router - React: Version 19 (use Server Components by default; add 'use client' ONLY when state/effects are required) - Styling: Tailwind CSS v3.4 + Radix UI (shadcn/ui primitives) - State Management: URL SearchParams + React 19 useActionState & useOptimistic - Database & ORM: Drizzle ORM with PostgreSQL (Supabase / Neon) - Validation: Zod for schema and form inputs ### CORE CODING PRINCIPLES: 1. **Server vs. Client Separation**: - Default to React Server Components (RSC) for all pages, layouts, and data fetching components. - Isolate client interactivity (onClick, onChange, hooks) into small, focused leaf components. - Never import server-only secrets or ORM models into client components. 2. **Data Fetching & Mutations**: - Use Next.js 15 Server Actions (`'use server'`) for all form submissions and mutations. - Always validate incoming Server Action payloads with Zod schemas. - Use `revalidatePath` and `revalidateTag` for granular cache invalidation. 3. **Component Architecture**: - Follow standard feature-based or domain-driven modular structure. - Avoid monolithic files. Break UI into reusable primitives under `/components/ui`. - Use early returns and guard clauses for error handling. 4. **Accessibility & Clean UI**: - Enforce WCAG 2.1 AA contrast compliance. - Include responsive mobile-first Tailwind utility classes. - Do NOT emit deprecated `next/router` or Pages Router syntax.
The AI-first code editor built for lightning-fast pair programming.
Leonardo Phoenix & Flux: Generate photorealistic studio assets with 150 daily free credits. Zero setup required.
πΈ Real Sample Outputs & Verified Results
Visual evidence and benchmark responses generated using this exact prompt formula.
π¬ Prompt Engineering Anatomy
Why this prompt consistently delivers high-tier results: technical parameter breakdown.
Enforced React 19 Server Components Default Cursor frequently inserts 'use client' at the top of every file out of habit from older training data. Explicitly forbidding 'use client' on data-fetching wrappers forces clean RSC architecture.
Next.js 15 Server Action Validation with Zod Guarantees that your AI coding assistant generates safe, sanitised backend endpoints rather than trusting raw client form data.
π¬ Frequently Asked Questions
Troubleshooting common edge cases, model incompatibilities, and best practices.
Can I use this with Windsurf, Copilot, or Claude Dev (Cline)?
Yes! For Windsurf, place it in `.windsurfrules`. For Cline or Claude Dev, place it inside your workspace `.clinerules` or custom system prompt.
Does this work with Cursor Composer (Cmd+I)?
Yes, Cursor Composer fully respects project root `.cursorrules` across all generated files.
Explore Related AI Coding & Rulesets Prompts View all β
DeepSeek R1 Architecture & Security Vulnerability Code Auditor
Engineered specifically for DeepSeek R1 and reasoning models. Directs the thinking tokens (<think>) to rigorously stress-test edge cases before proposing optimized refactors.
cursorFastAPI, PostgreSQL & Supabase Production (.cursorrules)
Eliminates common Python AI code generation traps: synchronous database calls in async routes, outdated Pydantic v1 syntax, and missing transaction rollbacks.
cursorReact Native & Expo Router Mobile App Production (.cursorrules)
Stops Cursor from generating legacy class components, obsolete React Navigation boilerplate, or memory-leaking animation loops on iOS and Android.