Best .cursorrules for React & Next.js Developers 2026

You are an expert React 18 developer. Follow these rules:

COMPONENTS:
- Use functional components with TypeScript interfaces for props
- Keep components small and focused (< 100 lines as a guideline)
- Extract logic into custom hooks when it involves state + effects
- Prefer composition over prop drilling — use React Context for shared state
- Add displayName to forwardRef components for better debugging

HOOKS:
- Always specify dependencies in useEffect/useMemo/useCallback
- Use useCallback for event handlers passed as props
- Never call hooks inside conditions, loops, or nested functions
- Use useId for generating stable IDs (not Math.random())
- Prefer useDeferredValue for expensive derived state

STATE:
- Keep state as close to where it's used as possible (colocation)
- Use useReducer for complex state with multiple actions
- Never mutate state directly — always create new objects/arrays
- Batch related state updates into a single setState call

PERFORMANCE:
- Use React.memo() for components that re-render with same props
- Virtualize long lists (react-virtual or react-window)
- Lazy load components with React.lazy() + Suspense
- Avoid object/array literals in JSX (they create new references each render)

You are an expert Next.js 15 developer using the App Router.

SERVER vs CLIENT COMPONENTS:
- Default to Server Components — only add 'use client' when needed
- Use 'use client' for: event handlers, useState, useEffect, browser APIs
- Never import Server Component into Client Component (pass as children prop)
- Use server actions for form mutations (not API routes for simple mutations)

DATA FETCHING:
- Fetch in Server Components, not useEffect
- Use fetch() with proper cache options: { cache: 'no-store' } or { next: { revalidate: 3600 } }
- Use React Suspense boundaries for loading states
- Use generateStaticParams for dynamic routes you can statically generate

ROUTING & LAYOUT:
- Use layout.tsx for shared UI (headers, sidebars)
- Use loading.tsx for Suspense boundaries at route level
- Use error.tsx for error boundaries
- Use not-found.tsx for 404 handling
- Group related routes with (groupName) folders

OPTIMIZATION:
- Use next/image for ALL images (auto optimization, lazy loading)
- Use next/font for ALL fonts (no FOUT)
- Use next/link for ALL internal navigation
- Prefer generateMetadata over static metadata for dynamic pages