vercel-react-best-practices

Reduce waterfalls in React and Next.js apps by executing parallel async operations, fetching data concurrently rather than sequentially to improve runtime responsiveness and eliminate loading bottlenecks.

Minimize Next.js bundle size by avoiding barrel imports, which prevents pulling unused code into the final build and directly reduces first-load latency for better user-perceived performance.

Audit a React project by applying Vercel performance guidelines to review data-fetching strategies, component design, and import practices, identifying sequential loading and bloated bundles for refactoring.

Yes, it works non-invasively by referencing external rule files from a rules directory, applying optimization guidelines for parallelization and direct imports without altering your core codebase structure.

Your Next.js bundle includes unused code due to barrel imports, which aggregate exports; avoiding barrel imports and using direct imports ensures only necessary components are bundled.