vercel-react-best-practices

To optimize React and Next.js performance, apply over 40 prioritized rules targeting bundle size, server-side rendering, data fetching, and re-render efficiency. This guidance ensures codebases adhere to Vercel Engineering best practices through detailed refactoring examples.

The best way to reduce Next.js bundle size is by following specific optimization rules that target JavaScript performance and eliminate unnecessary code. The Skill provides incorrect vs. correct examples to guide automated refactoring for minimal bundle output.

To eliminate data fetching waterfalls in React, apply best practices for client-side data fetching and server-side performance provided by the Skill. It offers detailed rules to refactor data fetching logic for optimal execution.

Yes, you can use these Vercel best practices to refactor existing React components. The Skill provides incorrect vs. correct examples specifically designed for AI agents and LLMs to follow when maintaining or refactoring codebases.

You need to optimize React component re-renders when application rendering performance degrades. The Skill addresses this directly with targeted rules and advanced patterns to minimize unnecessary re-renders and improve overall JavaScript performance.