vercel-react-best-practices

To optimize React and Next.js performance, apply a comprehensive set of 57 best-practice rules across 8 categories covering bundle sizes, render times, and data-fetching patterns. These guidelines enforce deterministic improvements from code structure to server and client rendering.

Best practices for reducing bundle size in Next.js involve applying structured optimization rules during code review and refactoring. This skill provides automated refactor prompts and guardrails to safely minimize bundle sizes without causing regressions.

Choosing between server and client rendering in Next.js requires evaluating data-fetching logic and component structure. This skill provides rule-based guidelines to identify the correct rendering patterns, ensuring scalable performance improvements across modern web apps.

Yes, you can use these React performance rules to safely refactor existing components. The skill enforces guardrails specifically designed to guide safe automated refactoring and scalable performance improvements while avoiding regressions.

You need structured guidelines for React data-fetching optimization when writing, reviewing, or refactoring Next.js pages to reduce data-fetching overhead. Applying a deterministic rule set ensures scalable performance improvements and prevents bottlenecks.