nextjs-react-redux-typescript-cursor-rules

Next.js React Redux TypeScript Cursor Rules

Complete development guidelines for building maintainable, scalable applications with Next.js, React, Redux Toolkit, and TypeScript.

Development Philosophy

• Produce maintainable, scalable code following SOLID principles
• Favor functional and declarative approaches over imperative styles
• Prioritize type safety and static analysis
• Embrace component-driven architecture

Code Style Standards

• Indentation: Use tabs
• Strings: Use single quotes (unless escaping needed)
• Semicolons: Omit unless disambiguation required
• Operators: Space around infix operators
• Functions: Space before declaration parentheses
• Equality: Always use === over ==
• Line length: Maximum 80 characters
• Conditionals: Use braces for multi-line if statements
• Collections: Trailing commas in multiline arrays/objects

Naming Conventions

Convention	Usage
PascalCase	Components, type definitions, interfaces
kebab-case	Directory and file names (e.g., user-profile.tsx)
camelCase	Variables, functions, methods, hooks, properties, props
UPPERCASE	Environment variables, constants, global configurations

Prefixes

• Event handlers: handle (e.g., handleClick)
• Booleans: verbs (e.g., isLoading, hasError, canSubmit)
• Custom hooks: use (e.g., useAuth, useForm)

React Best Practices

Components

• Use functional components with TypeScript interfaces
• Define components using function keyword
• Extract reusable logic into custom hooks
• Apply composition patterns properly
• Leverage React.memo() strategically
• Implement cleanup in useEffect hooks

Performance

• Use useCallback for memoizing functions
• Apply useMemo for expensive computations
• Avoid inline function definitions in JSX
• Implement code splitting via dynamic imports
• Use proper key props in lists (never use index)

Next.js Best Practices