nextjs-react-expert_skill

Overview

This skill provides React and Next.js performance optimization guidance distilled from Vercel Engineering. It prioritizes fixes by impact and offers 57 concrete rules across eight categories to eliminate waterfalls, reduce bundle size, and improve server- and client-side performance. Use it as a checklist and decision tree during development, reviews, and debugging.

How this skill works

The skill inspects common performance bottlenecks and recommends prioritized actions: eliminate sequential data fetching, optimize bundles, and then refine server/client rendering and JavaScript hot paths. It surfaces a quick decision tree, a validation checklist, and targeted rules for critical areas like waterfalls and bundle trimming, plus practical anti-patterns to avoid. Follow the impact-priority guide to apply fixes in the order that yields the largest gains.

When to use it

• Building new pages or features and wanting to prevent regressions
• Conducting a performance review before shipping to production
• Debugging slow page loads, long TTI, or LCP issues
• Reducing large bundle sizes or eliminating unnecessary code shipping
• Addressing server-side slowness or SSR waterfalls

Best practices

• Measure first with DevTools and React Profiler before changing code
• Fix CRITICAL items first: eliminate waterfalls and reduce main bundle size
• Fetch independent resources in parallel (Promise.all) and use Suspense boundaries
• Prefer server components when appropriate to reduce client JS
• Use dynamic imports for large components and avoid barrel exports in app code

Example use cases

• Performance review: run checklist to find waterfall API calls and large imports
• Feature implementation: keep main bundle under 200KB and use dynamic imports for heavy libs
• SSR optimization: parallelize server fetches and add streaming or Suspense boundaries
• UI lag fix: apply memoization, useMemo/useCallback, and virtualize long lists
• Client data fetching: enable SWR deduplication and cache frequently used responses