nextjs-code-review

Next.js Code Review

Overview

Evaluates Next.js App Router code against best practices for Server Components, Client Components, Server Actions, caching strategies, and production-readiness criteria. Produces actionable findings categorized by severity with concrete code examples. Delegates to typescript-software-architect-review agent for architectural analysis.

When to Use

• Reviewing Next.js pages, layouts, and route segments before merging
• Validating Server Component vs Client Component boundaries
• Checking Server Actions for security and correctness
• Reviewing data fetching patterns (fetch, cache, revalidation)
• Evaluating caching strategies (static generation, ISR, dynamic rendering)
• Assessing middleware implementations (authentication, redirects, rewrites)
• Reviewing API route handlers for proper request/response handling
• Validating metadata configuration for SEO
• Checking loading, error, and not-found page implementations
• After implementing new Next.js features or migrating from Pages Router

Instructions

1. Identify Scope: Determine which Next.js route segments and components are under review. Use glob to discover page.tsx, layout.tsx, loading.tsx, error.tsx, route.ts, and middleware.ts files.

2. Analyze Component Boundaries: Verify proper Server Component / Client Component separation. Check that 'use client' is placed only where necessary and as deep in the component tree as possible. Ensure Server Components don't import client-only modules.

3. Review Data Fetching: Validate fetch patterns — check for proper cache and revalidate options, parallel data fetching with Promise.all, and avoidance of request waterfalls. Verify that server-side data fetching doesn't expose sensitive data to the client.

4. Evaluate Caching Strategy: Review static vs dynamic rendering decisions. Check generateStaticParams usage for static generation, revalidatePath/revalidateTag for on-demand revalidation, and proper cache headers for API routes.