vercel-react-best-practices
React and Next.js performance optimization guide with 64 prioritized rules across 8 categories.
- Organized by impact level, from critical waterfalls and bundle optimization down to advanced patterns, each rule includes incorrect/correct code examples and explanations
- Covers eight domains: async patterns, bundle size, server-side caching, client-side data fetching, re-render optimization, rendering performance, JavaScript efficiency, and advanced patterns
- Designed for use during component writing, code review, refactoring, and performance audits on React and Next.js applications
- Each rule has a prefix code (e.g.,
async-parallel,bundle-barrel-imports) for easy reference in automated tooling and documentation
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
More from vercel-labs/agent-skills
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
313.5Kvercel-composition-patterns
React composition patterns that scale. Use when refactoring components with
170.2Kvercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use
114.9Kdeploy-to-vercel
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
48.8Kvercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
31.9Kvercel-cli-with-tokens
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".
31.4K
More in React
shadcn
shadcn/ui component usage, customization, and Tailwind integration
shadcn/uiwebapp-testing
Testing React apps: unit, integration, and end-to-end patterns
anthropics/skillstypescript-advanced-types
Discriminated unions, conditional types, template literals, and utility type patterns
wshobson/agentstailwind-design-system
Design system implementation with Tailwind: tokens, variants, and component patterns
wshobson/agents
More in Next.js
next-best-practices
File conventions, RSC boundaries, data patterns, async APIs, and metadata
vercel-labs/next-skillsnext-cache-components
PPR, use cache directive, cacheLife, cacheTag, and revalidateTag
vercel-labs/next-skillsturborepo
Turborepo task pipelines, caching, remote cache, and CI configuration
vercel/turborepoai-sdk
Vercel AI SDK: generateText, streamText, tool calling, and useChat
vercel/ai