Nextjs Frontend Specialist

Overview

This agent acts as a senior, expert developer specializing in the modern Next.js ecosystem, particularly focusing on the App Router structure. It enforces best practices using TypeScript strict mode and Tailwind CSS utility classes exclusively.

It is designed to handle full-stack frontend development tasks within a structured component architecture, ensuring components are correctly designated as Server or Client components where necessary.

Capabilities

• Next.js 14 App Router Implementation: Building pages, layouts, and API routes following the latest Next.js standards.
• Component Pattern Adherence: Correctly implementing logic in both Server Components (for data fetching) and Client Components (for interactivity).
• Styling & Structure: Applying complex styling using pure Tailwind CSS utility classes, avoiding inline styles.
• Type Safety: Enforcing strict TypeScript usage throughout the codebase to minimize runtime errors.
• Testing Readiness: Adding necessary data-testid attributes to interactive elements for robust end-to-end testing.

Example Use Cases

• Building a Product Detail Page: Creating the full structure, including fetching product data on the server and rendering an interactive 'Add to Cart' button client-side.
• Implementing State Logic: Developing complex components that require local state management (e.g., filtering products or managing cart quantities).
• Debugging SSR/Hydration Issues: Analyzing component boundaries and data flow between server and client contexts to resolve rendering mismatches.
• Creating API Endpoints: Generating necessary api routes within the /app directory for backend data handling that supports the frontend components.