cursorrules

Cursor Rules for React + Next.js Development

Core Principles

• Write clean, maintainable, and performant code
• Follow React and Next.js best practices
• Prioritize type safety with TypeScript
• Focus on component reusability and composition
• Optimize for both developer experience and user experience

Code Style & Formatting

• Use functional components with hooks
• Prefer named exports over default exports
• Use 2 spaces for indentation
• Use single quotes for strings
• Add trailing commas in objects and arrays
• Use const for variables that don't change
• Destructure props and state when possible

TypeScript Guidelines

• Always use TypeScript for new files
• Define interfaces for all component props
• Use type inference where obvious
• Avoid 'any' type - use 'unknown' if type is truly unknown
• Export types that might be used by other components
• Use enums for fixed sets of values

Component Structure

• Order: imports, types, component, exports
• Keep components small and focused (< 200 lines)
• Extract complex logic into custom hooks
• Use composition over prop drilling
• Implement proper error boundaries

Naming Conventions

• Components: PascalCase (UserProfile.tsx)
• Hooks: camelCase with 'use' prefix (useUserData.ts)
• Utilities: camelCase (formatDate.ts)
• Constants: UPPER_SNAKE_CASE (API_BASE_URL)
• Types/Interfaces: PascalCase (UserProfile, ApiResponse)

File Organization

src/
├── app/                 # Next.js app directory
├── components/
│   ├── ui/             # Reusable UI components
│   └── features/       # Feature-specific components
├── hooks/              # Custom React hooks
├── lib/                # Utilities and helpers
├── types/              # Shared TypeScript types
└── styles/             # Global styles

React Best Practices

• Use React Server Components by default (Next.js 13+)
• Add 'use client' only when necessary
• Implement proper loading and error states
• Use Suspense for async operations
• Memoize expensive calculations with useMemo
• Optimize re-renders with useCallback when passing functions as props
• Use React.lazy for code splitting large components