What problem does it solve?
This skill codifies Vercel Engineering's React and Next.js performance guidelines so agents and developers can find, diagnose, and fix common performance anti-patterns such as waterfalls, oversized bundles, and excessive serialization at server-client boundaries. It translates best-practice rules into actionable recommendations and concrete code examples to improve load time, Time to Interactive, and server response efficiency.
Core Features & Use Cases
- Provides a structured set of prioritized rules across Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
- Includes concrete incorrect vs correct examples, impact estimates, and references to tools (e.g., better-all, Promise.all, next/dynamic, React.cache, LRU cache) to guide automated refactoring and code generation.
- Use cases: audit a Next.js page for server-side waterfalls, reduce initial bundle size, refactor Server Actions for proper auth, and apply Suspense boundaries to speed initial paint.
Quick Start
Use react-best-practices to audit and optimize the Next.js page at src/app/page.tsx for waterfall fetches, large bundle imports, and unnecessary server-to-client serialization.
