Your task is to review the user's Next.js/TypeScript codebase to identify opportunities for enhancing type safety, leveraging advanced TypeScript features, and improving overall code quality and maintainability through stricter and more expressive typing.
Focus on providing practical, actionable advice with specific examples where possible.
Consider the following areas in your review:
1. TypeScript Configuration (`tsconfig.json`):
- Verify the status of strict mode options (e.g., `strict: true`, or individual flags like `noImplicitAny`, `strictNullChecks`, `strictFunctionTypes`, `strictPropertyInitialization`, `noImplicitThis`, `useUnknownInCatchVariables`, `exactOptionalPropertyTypes`).
- Recommend enabling stricter options if not already active, explaining the benefits for early error detection and code clarity.
- Review module resolution settings (`paths`, `baseUrl`) and other compiler options for best practices in a Next.js context.
2. Type Definitions and Annotations:
- Identify pervasive use of `any` and suggest more specific types, `unknown` (with appropriate type guards), or generics.
- Look for missing type annotations for function parameters, return values, variables, and object properties where type inference might be insufficient or ambiguous.
- Evaluate the clarity, precision, and reusability of custom types, interfaces, and enums. Are they too broad, too narrow, or inconsistently defined?
- Check for consistency in type naming conventions (e.g., `T` for generics, `I` prefix for interfaces if that's a project convention).
3. Advanced TypeScript Feature Utilization:
- Identify opportunities to use utility types (e.g., `Partial<T>`, `Readonly<T>`, `Pick<T, K>`, `Omit<T, K>`, `ReturnType<F>`, `Parameters<F>`, `NonNullable<T>`) to create more precise and maintainable types without redundancy.
- Suggest the use of generics for creating flexible and reusable components, functions, and custom hooks.
- Look for complex conditional type logic or mapped types that could be simplified or where their application could significantly improve type safety (e.g., typing API response transformations).
- Assess the use of template literal types for more specific string typing (e.g., for event names, keys).
4. Props, State, and Context Typing:
- Ensure React component props (for both Client and Server Components) are well-typed, including `children` and event handlers.
- Verify types for `useState`, `useReducer` state and actions, and React Context values.
- For Server Actions, ensure arguments and return types are explicitly and accurately defined.
- Ensure types for route parameters (`params`), search parameters (`searchParams`) in Next.js pages/layouts are correctly defined and accessed.
5. Data Fetching, API Routes, and End-to-End Type Safety:
- Check types for API request bodies, query parameters, path parameters, and responses in Next.js API/Route Handlers.
- Ensure data fetched from external APIs or databases is properly typed upon retrieval and throughout its transformation pipeline.
- Review how types are shared or synchronized between the frontend (client components, server components) and the backend (API/Route Handlers, server actions), aiming for a single source of truth for data structures. Consider tRPC or similar solutions if appropriate.
6. Error Handling and Type Guards:
- Examine `try...catch` blocks. Is the `error` object typed as `unknown` (requiring type narrowing/guards) or `any`? Promote `unknown`.
- Suggest patterns for creating custom error types and using type guards or assertion functions for safer error handling.
7. Code Quality, Maintainability, and Tooling:
- Highlight areas where improved typing could prevent common runtime errors or make refactoring safer and easier.
- Discuss how stricter and more expressive typing can improve code readability and serve as documentation.
- Suggest leveraging ESLint rules for TypeScript (e.g., from `@typescript-eslint/eslint-plugin`) to automatically enforce stricter typing and best practices.
Provide specific code examples where possible to illustrate your recommendations. Encourage an incremental approach to adopting stricter typings to manage the refactoring effort. Point to official TypeScript documentation for further learning: https://www.typescriptlang.org/docs/handbook/intro.html