vercel-react-best-practices

Optimize React and Next.js performance by applying 57 prioritized rules across 8 categories, including waterfall elimination, bundle size reduction, and server-side rendering. These guidelines provide concrete incorrect versus correct code examples for automated refactoring.

Reduce JavaScript bundle size in Next.js by applying targeted optimization rules that provide specific strategies for minimizing code. The guidelines offer concrete code refactoring examples to help developers and AI agents implement efficient bundle reduction patterns.

Eliminate data fetching waterfalls in React by parallelizing data requests using the optimization guidelines provided. The rules detail how to structure client-side and server-side fetching to prevent sequential loading bottlenecks and improve load times.

React components re-render unnecessarily due to unoptimized state and prop management. Fix this by applying the re-render optimization rules, which provide incorrect versus correct code examples to help structure components for efficient rendering performance.

Yes, the skill works with existing Next.js codebases by providing automated refactoring guidance for AI agents. It includes over 50 rules with detailed explanations and code examples designed to analyze and improve current implementations without requiring a rewrite.

You should evaluate server-side rendering limitations when client-side data fetching would provide smoother user experiences. The skill's 8 categories cover both server-side and client-side data fetching patterns, detailing when each approach best optimizes performance.