nextjs

Next.js Code Review Rules

Security (Critical)

• •Server Actions must validate and sanitize all input
• •No secrets exposed in client components
• •Check headers() and cookies() usage is server-side only
• •Sanitize all dynamic values (file names, HTTP headers) to prevent injection attacks
• •Never use HTML comments (<!-- -->) in production code
• •Validate and escape all user-provided content before rendering

App Router Structure

• •Verify app/ directory structure follows conventions (page.tsx, layout.tsx, loading.tsx, error.tsx)
• •Check use client directive is only used when necessary (event handlers, hooks, browser APIs)
• •Server Components should not import client-only libraries (useState, useEffect, etc.)
• •Implement error boundaries with error.tsx for error handling
• •Use error boundaries to catch and handle errors in Server Components
• •Provide fallback UIs for errors with proper error messages

Data Fetching

• •Prefer Server Components for data fetching over client-side fetching
• •Check for proper use of cache() for request deduplication
• •Validate revalidate options for ISR (Incremental Static Regeneration)
• •Ensure generateStaticParams() is used for static generation of dynamic routes

Performance (Essential)

• •Images must use next/image with explicit width/height or fill
• •Fonts should use next/font for automatic optimization
• •Check for proper Suspense boundaries around async components
• •Verify no blocking data fetches in layouts (affects all child routes)

API Routes

• •Validate HTTP methods (check req.method or use route handlers)
• •Implement authentication and authorization
• •Return appropriate HTTP status codes
• •Handle errors gracefully with try-catch
• •Sanitize and validate all inputs
• •Use proper CORS headers when needed

Accessibility

• •Use semantic HTML elements
• •Include alt text on all images
• •Ensure keyboard navigation works
• •Test with screen readers
• •Maintain proper heading hierarchy
• •Add ARIA labels where needed

Testing

• •Write unit tests for critical components
• •Test Server Components and Server Actions
• •Use integration tests for data fetching flows
• •Test error boundaries and error states
• •Include e2e tests for critical user flows
• •Validate test coverage for mission-critical features

Dependencies

• •Keep Next.js and React versions compatible
• •Check for breaking changes when updating
• •Audit third-party packages for security and compatibility
• •Use official Next.js plugins when available
• •Avoid excessive dependencies for simple functionality

Edge Runtime (Advanced)

• •Review usage of Edge runtime for API routes
• •Ensure Edge-compatible code (no Node.js-specific APIs)
• •Use Edge runtime for latency-sensitive operations
• •Be aware of Edge runtime limitations (memory, execution time)
• •Test Edge functions thoroughly

Common Anti-patterns

• •Avoid use client at layout level (makes all children client components)
• •Avoid fetching same data in multiple components (use cache or pass as props)
• •Avoid dynamic = 'force-dynamic' without justification