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 ### Core - Use App Router for routing - Implement metadata management - Apply proper caching strategies - Implement error boundaries ### Components - Use built-in components: `Image`, `Link`, `Script`, `Head` - Implement loading states - Use appropriate data fetching methods ### Server Components - Default to Server Components - Use URL query parameters for server state - Apply `use client` only when necessary: - Event listeners - Browser APIs - State management - Client libraries ## TypeScript Implementation - Enable strict mode - Define clear interfaces for props, state, and Redux structure - Use type guards for undefined/null safety - Apply generics for flexibility - Leverage utility types (`Partial`, `Pick`, `Omit`) - Prefer `interface` over `type` for objects - Use mapped types for dynamic type variations ## UI and Styling ### Libraries - **Shadcn UI**: Consistent, accessible components - **Radix UI**: Customizable primitives - **Composition patterns**: Modularity ### Styling - Tailwind CSS utility-first approach - Mobile-first responsive design - Dark mode via CSS variables or Tailwind's dark mode - Accessible color contrast ratios - Consistent spacing values - CSS variables for theme colors ## State Management ### Local State - `useState` for component-level state - `useReducer` for complex state - `useContext` for shared state ### Global State (Redux Toolkit) - Use `createSlice` for combined state/reducers/actions - Normalize state structure - Use selectors for access encapsulation - Separate concerns by feature (avoid monolithic slices) ## Error Handling and Validation ### Forms - Zod for schema validation - React Hook Form integration - Clear error messaging ### Error Boundaries - Catch and handle React tree errors gracefully - Log errors to external services (e.g., Sentry) - Display user-friendly fallback UIs ## Testing ### Unit Testing - Jest and React Testing Library - Arrange-Act-Assert pattern - Mock external dependencies and API calls ### Integration Testing - Focus on user workflows - Proper test environment setup/teardown - Selective snapshot testing - Use testing utilities (`screen` in RTL) ## Accessibility (a11y) - Semantic HTML - Accurate ARIA attributes - Full keyboard navigation - Proper focus management - Accessible color contrast - Logical heading hierarchy - Accessible interactive elements - Clear error feedback ## Security - Input sanitization to prevent XSS - DOMPurify for HTML sanitization - Proper authentication methods ## Internationalization (i18n) - next-i18next for translations - Locale detection - Number and date formatting - RTL support - Currency formatting ## Documentation - JSDoc for all public functions, classes, methods, interfaces - Complete sentences with proper punctuation - Clear, concise descriptions - Proper markdown, code blocks, links, headings, lists - Examples when appropriate