React & Next.js Rules Pack

The Problem

Cursor is powerful, but out of the box it generates React code with outdated patterns — useEffect for data fetching, missing TypeScript types, no error handling, and zero awareness of the Next.js App Router. You spend more time fixing AI output than writing code yourself.

The Fix

Drop one .cursorrules file into your project root. Cursor immediately starts generating code that follows modern React and Next.js best practices.

What's Inside

⚛️ React Patterns

• TypeScript-first components with proper typing
• Custom hooks that handle loading, error, and data states
• Form handling with React Hook Form + Zod validation
• Error boundaries that don't crash your whole app
• Smart state management guidance (local → context → Zustand)

▲ Next.js App Router

• Server Components by default, 'use client' only when needed
• Server Actions for mutations with input validation
• Caching strategy — revalidatePath, revalidateTag, fetch options
• Metadata & SEO with generateMetadata and OG images
• Middleware patterns for auth, redirects, and i18n

🚫 Anti-Patterns Blocked

• No more any types
• No more useEffect for data fetching
• No more secrets in client bundles
• No more mixing App Router and Pages Router

Setup

• Download the .cursorrules file
• Drop it in your project root
• Done. Cursor picks it up automatically.

What You Get

.cursorrules file (works immediately)

README.md with full documentation

SETUP.md with installation guide and troubleshooting