Vercel React Best Practices

What it does

This skill provides a comprehensive performance optimization guide specifically tailored for React and Next.js applications, maintained by Vercel. It contains 57 rules organized into eight categories, prioritized to guide automated refactoring and code generation efforts. The skill helps developers identify and address critical performance bottlenecks in their frontend user interfaces and experiences.

When to use it

• When writing new React components or Next.js pages.
• During the implementation of data fetching, whether client-side or server-side.
• When reviewing existing code for potential performance issues.
• To refactor existing React/Next.js codebases.
• For optimizing bundle size and load times.

Key capabilities

• Provides 57 prioritized rules across eight categories (Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, Advanced Patterns).
• Offers specific guidance on techniques like using Promise.all() for parallel operations (async-parallel), dynamic imports with next/dynamic (bundle-dynamic-imports), and Suspense boundaries (async-suspense-boundaries).
• Categorizes rules by priority (CRITICAL, HIGH, MEDIUM-HIGH, MEDIUM, LOW-MEDIUM, LOW) to focus on the most impactful optimizations.

Example prompts

• "Suggest ways to optimize bundle size in my Next.js application."
• "What are some best practices for data fetching in React?"
• "How can I eliminate waterfalls in a Vercel deployment?"
• "Give me an example of using Suspense boundaries."

Tips & gotchas

• This skill is specifically designed for Vercel, React and Next.js projects. Results may vary with other frameworks.
• The rules are prioritized; focus on the CRITICAL categories first for maximum impact.
• Some rules involve code refactoring or automated generation, which might require adjustments to existing workflows.