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:

• Refactoring existing React/Next.js code
• Writing new React components or Next.js pages
• Fixing visual instability or layout shift (CLS) issues
• Preventing flickering when reading from localStorage or cookies
• Handling hydration mismatches with client-only data
• Optimizing font loading (FOIT/FOUT prevention)
• Adding proper dimensions to images and dynamic content

Rule Categories by Priority