vercel-react-best-practices

Apply Vercel's official best practices to optimize React and Next.js projects.

Updated Dec 26, 2025
One-click install
npx skills add https://github.com/Hetav21/portfolio --skill vercel-react-best-practices-hetav21
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Hetav21/portfolio/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/Hetav21/portfolio --skill vercel-react-best-practices-hetav21

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates official performance guidelines from Vercel to help React and Next.js teams deliver faster, more reliable applications.

Core Features & Use Cases

  • 45 rules across 8 categories prioritized by impact to guide refactoring and coding decisions.
  • Covers server-side rendering, bundle optimization, data fetching, and client-side rendering patterns.
  • Use cases include writing new components, reviewing performance bottlenecks, and refactoring pages for faster load times.

Quick Start

Audit a React/Next.js page against the listed rules and implement the top three high-impact optimizations found.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React and Next.js performance using Vercel best practices?▼

React performance optimization involves applying 45 prioritized rules across 8 categories, covering server-side rendering, bundle-size reduction, data fetching, and caching patterns to improve Next.js load times.

What is the best way to reduce bundle size in a Next.js application?▼

Reduce Next.js bundle size by applying concrete patterns for dynamic imports and bundle optimizations outlined in the guide, prioritizing high-impact rules during component refactoring and review.

How does server-side rendering affect performance in React projects?▼

Server-side rendering improves React performance by optimizing initial load times through concrete SSR patterns, which are prioritized by impact alongside data fetching and client-side rendering strategies.

Can I use these React optimization rules when refactoring existing components?▼

Yes, you can audit existing React components and Next.js pages against the 45 rules, implementing the top three high-impact optimizations found during refactoring to achieve faster load times.

When do I need dynamic imports for data fetching in Next.js?▼

Dynamic imports are needed when optimizing data fetching patterns in Next.js to reduce bundle size and improve rendering, guided by official Vercel best practices prioritized by impact.