vercel-react-best-practices
45 performance optimization rules for React and Next.js, organized by impact and category.
- Covers 8 rule categories from eliminating waterfalls and bundle optimization (critical) through JavaScript performance and advanced patterns (low priority)
- Each rule includes explanation, before/after code examples, and context to guide automated refactoring and code generation
- Prioritized by impact: waterfalls and bundle size are critical; server-side performance and re-render optimization are high/medium priority
- Designed for use when writing components, implementing data fetching, reviewing code, or optimizing performance in React/Next.js applications
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
More from am-will/codex-skills
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
1.3Kfrontend responsive design standards
Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
1.2Kcontext7
|
1.2Kplanner
>
1.2Kread-github
|
1.2Kparallel-task
>
1.2K