Codebase Analysis & Refactoring Opportunities
This prompt walks through a full review of your Next.js / React codebase to spot practical refactoring opportunities, not theoretical ones. It checks structure, routing, state management, and patterns so you can see where things are getting too big, too complex, or duplicated. It looks for DRY violations, messy components, and missed Next.js and React best practices, then suggests concrete ways to split things up, clean them, or move logic into better places. You also get a prioritized action plan, so you know what to fix first for the biggest impact without breaking existing functionality.
# Codebase Analysis & Refactoring Opportunities ## Objective Perform a comprehensive analysis of this codebase to identify opportunities for improvement, focusing on code quality, maintainability, and adherence to Next.js and React best practices. ## Analysis Tasks ### 1. Codebase Structure Overview First, explore the project structure and provide: - A high-level overview of the directory structure - Identification of the main architectural patterns used - Key dependencies and their purposes - Routing structure (App Router vs Pages Router) - State management approach ### 2. DRY Violations (Don't Repeat Yourself) Scan the entire codebase for: - **Duplicated logic**: Identify any functions, hooks, or utilities that are repeated across multiple files - **Copy-pasted components**: Find similar components that could be consolidated into a single reusable component - **Repeated API calls**: Look for API call patterns that could be abstracted into custom hooks or utility functions - **Duplicated styling**: Find repeated Tailwind classes or CSS that could be extracted into reusable components - **Similar data transformations**: Identify data manipulation logic that appears in multiple places For each violation found, provide: - Location (file paths and line numbers) - Specific code examples - Concrete refactoring suggestion with proposed file structure ### 3. Component Size & Complexity Identify files that should be broken down: - **Large components** (>200 lines): Components that are doing too much - **Complex components**: Those with high cyclomatic complexity or deeply nested JSX - **Mixed concerns**: Components handling both UI and business logic - **Server/Client component boundaries**: Improper mixing in Next.js App Router For each large/complex file: - Explain why it should be split - Suggest a logical breakdown structure - Propose new component/file names and their responsibilities ### 4. Next.js Best Practices Check for: - Proper use of Server Components vs Client Components - Correct data fetching patterns (server-side where possible) - Appropriate use of Next.js features: - Image optimization with next/image - Link component usage - Metadata API - Route handlers vs API routes - Loading and error states - Proper file/folder naming conventions ### 5. React Best Practices Evaluate: - **Hooks usage**: Proper dependency arrays, custom hooks opportunities - **Component patterns**: Composition vs inheritance - **Props drilling**: Excessive prop passing that could use Context or composition - **State management**: Unnecessary useState that could be derived, or missing useMemo/useCallback - **Key props**: Proper usage in lists - **Side effects**: Proper useEffect usage and cleanup ### 6. Code Organization Look for: - Missing separation of concerns (utilities, constants, types) - Inconsistent file naming conventions - Missing or poorly organized types/interfaces - Lack of proper code colocation - Configuration files that could be better organized ## Output Format For each category, provide findings in this structure: ### [Category Name] **Priority**: High/Medium/Low **File**: `path/to/file.tsx` **Issue**: Brief description **Current Code**: ```typescript // Relevant code snippet ``` **Proposed Solution**: ```typescript // Suggested refactored code ``` **Impact**: Description of benefits **Files to Create/Modify**: List of files --- ## Prioritization After completing the analysis, provide a prioritized action plan: 1. **Quick Wins**: Easy refactors with high impact 2. **Medium Effort**: Moderate changes with good ROI 3. **Large Refactors**: Significant changes requiring careful planning ## Constraints - Maintain existing functionality - Don't break current API contracts - Preserve type safety - Ensure changes are backward compatible where necessary - Consider test coverage implications ## Additional Notes - Flag any potential performance issues - Suggest opportunities for code splitting or lazy loading - Identify unused dependencies or code - Note any security concerns Begin the analysis now and be thorough but practical in your recommendations.