vercel-react-best-practices

To optimize React and Next.js performance, you can apply over 57 prioritized rules covering bundle size reduction, parallel data fetching, server-side efficiency, and re-render optimization. These guidelines provide specific code examples for automated refactoring.

Reducing bundle size in Next.js involves applying specific optimization rules from this Skill, which guide AI agents to refactor imports and split code efficiently. This ensures minimized bundle sizes and faster load times for your application.

Eliminating data fetching waterfalls in React requires parallelizing data requests. This Skill provides detailed rules and code examples to help AI agents automatically refactor sequential fetches into parallel operations for better performance.

Inefficient React re-renders often stem from improper state management or prop changes. This Skill offers targeted rules to optimize rendering patterns, guiding AI agents to refactor components and maximize re-render efficiency.

Yes, these React optimization rules are designed for AI agents to consistently apply best practices during automated code generation and refactoring. This ensures new features are built with parallelized data fetching and optimized rendering.

Yes, this Skill provides server-side performance optimization for Next.js by offering specific rules for server-side efficiency. It guides AI agents to refactor server logic and improve overall application responsiveness.