vercel-react-best-practices

Optimize React and Next.js performance by applying 70+ curated best practices across rendering, data fetching, and bundling to drive automated refactoring. This improves Time to Interactive and First Contentful Paint in production-grade applications.

Eliminate Next.js data fetching waterfalls by applying prioritized rules for server-side performance and client data fetching. These patterns restructure asynchronous calls to prevent sequential blocking and improve overall load efficiency.

Refactor React components to reduce bundle size by following cataloged rules targeting bundling performance. This involves restructuring imports and components to minimize JavaScript payload and improve initial render metrics.

Yes, the rules explicitly target both server and client contexts within React components and Next.js pages. This ensures performance optimizations apply correctly regardless of the rendering environment.

Stop unnecessary re-renders in your React application by applying cataloged re-render optimization patterns. These rules codify state management and component structure adjustments to prevent redundant rendering cycles.

No, this Next.js optimization tool requires no external dependencies. It uses a YAML frontmatter in SKILL.md for discovery and supports optional scripts, references, and assets directories to run deterministic tasks.