vercel-react-best-practices

Reference the rules when writing, reviewing, or refactoring React components and Next.js pages. Start with CRITICAL categories like eliminating waterfalls with Promise.all() and avoiding barrel file imports, then apply lower-priority rules for re-renders and rendering.

The guide covers 8 categories: eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns. Each rule includes incorrect and correct code examples.

Yes, several rules target Next.js specifically, including authenticating Server Actions like API routes, avoiding duplicate serialization in RSC props, per-request deduplication with React.cache(), and using next/dynamic for heavy components.

Avoid Suspense boundaries for critical data needed for layout decisions, SEO-critical above-the-fold content, small fast queries where overhead is not worth it, or when you want to prevent layout shift between loading and loaded states.

Barrel files re-export thousands of modules, so importing from libraries like lucide-react or @mui/material can load over 1,500 modules and cost 200-800ms per cold start. Next.js 13.5+ optimizePackageImports or direct path imports eliminate this cost.