vercel-react-best-practices

To optimize React and Next.js performance, apply vetted patterns that eliminate data waterfalls, reduce bundle size, and improve server-side rendering. This skill surfaces performance issues and generates actionable, automated refactor steps with safety validations.

The best way to reduce JavaScript bundle size in Next.js is applying bundle optimization patterns across server and client boundaries. This skill provides automated refactor prompts and safety validations to ensure code correctness while minimizing client-side payload.

Eliminate data fetching waterfalls in Next.js by applying vetted server-side and client-side data-fetching strategies. This skill identifies waterfall patterns and recommends upgrades with practical examples, metrics, and safety validations for deterministic refactoring.

Yes, you can audit existing React codebases for re-render issues. This skill runs an AI-assisted pass to detect rendering performance problems and provides upgrade recommendations and automated refactor prompts to achieve fast, maintainable code.

Yes, this skill works for new Next.js projects and large refactoring efforts. It consolidates Vercel Engineering best practices to guide automated detection, prioritization, and implementation of performance improvements across components and pages.