How to Optimize React/Next.js Performance with vercel-react-best-practices
When working on React/Next.js performance improvements, it can be difficult to know where to start. Optimization opportunities are numerous, and prioritizing them effectively requires structured guidance.
This article explains how to use the vercel-react-best-practices skill, which organizes 45 performance rules from Vercel Engineering into 8 prioritized categories.
What This Skill Does
vercel-react-best-practices applies performance best practices when writing, reviewing, or refactoring React/Next.js code:
- 45 rules across 8 categories for performance optimization
- Impact-based prioritization (CRITICAL → HIGH → MEDIUM → LOW)
- Automatic best practice application during code generation
- Guided refactoring for existing code
This skill is suited for developers improving React/Next.js app performance and tech leads seeking consistent code quality.
Installation
Prerequisites
- Claude Code installed
- A React/Next.js project
Install Command
claude mcp add github.com/langgenius/dify/tree/main/.claude/skills/vercel-react-best-practices
Usage
The skill triggers automatically when writing or reviewing React/Next.js code:
Improve the performance of this React component
Rule Categories by Priority
| Priority | Category | Impact |
|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL |
| 2 | Bundle Size Optimization | CRITICAL |
| 3 | Server-Side Performance | HIGH |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH |
| 5 | Re-render Optimization | MEDIUM |
Key Rules
Eliminating Waterfalls: async-parallel parallelizes independent async operations with Promise.all().
Bundle Size: bundle-barrel-imports avoids barrel files, and bundle-dynamic-imports uses next/dynamic for code splitting.
Important Considerations
Follow the Priority Order
You don't need to apply all 45 rules at once. Start with CRITICAL rules (waterfalls and bundle size) for the highest-impact improvements.
Adapt to Your Project
Not all rules apply to every project. For example, rendering-activity depends on React's experimental Activity API. Apply rules that match your project's tech stack.
Rule Details Are in Separate Files
Detailed explanations and code examples for each rule live in individual files under the rules/ directory. The skill references them as needed.
Summary
vercel-react-best-practices enables automatic application of Vercel Engineering's performance optimization knowledge during development. The prioritized 45-rule framework helps you tackle the highest-impact improvements first.
For the full rule list and details, visit the skill detail page.