skills.rest
Dayopt
DayoptOFFICIAL
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to code reviews and refactors.

Updated Jun 23, 2025
Search Tags:#performance#refactoring#react#nextjs#bundling#ssr
One-click install
npx skills add https://github.com/Dayopt/app --skill vercel-react-best-practices-dayopt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Dayopt/app/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/Dayopt/app --skill vercel-react-best-practices-dayopt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js apps often suffer from waterfalls, large bundles, and inefficient data fetching patterns that degrade user experience and performance.

Core Features & Use Cases

  • Provides prioritized guidelines across 8 categories (async, bundle, server, client, rerender, rendering, js, advanced) to optimize performance.
  • Includes concrete code examples, best-practice patterns, and migration tips for real-world projects.
  • Helps optimize API routes, server components, Suspense behavior, and dynamic imports to reduce load times and improve responsiveness.

Quick Start

Review a React/Next.js project and apply the highest-impact patterns to reduce waterfalls, optimize SSR boundaries, and streamline code bundles.

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 fix React and Next.js data fetching waterfalls to improve performance?▼

Fix React and Next.js data fetching waterfalls by applying parallel data fetching patterns and optimizing server/client boundaries. This reduces sequential requests and streamlines code bundles to improve overall load times.

What is the best way to optimize Next.js server components and Suspense behavior?▼

The best way to optimize Next.js server components and Suspense behavior is to apply established performance guidelines for SSR boundaries and async rendering. This ensures efficient server-side rendering and improves application responsiveness.

How do I reduce large bundle sizes in my React and Next.js projects?▼

Reduce large bundle sizes in React and Next.js by applying bundling best practices like dynamic imports. This streamlines code bundles and removes unnecessary client-side JavaScript to reduce load times.

Does this guide cover both React and Next.js code refactoring for performance?▼

Yes, this guide covers React and Next.js code refactoring for performance. It provides prioritized guidelines across eight categories including server, client, rendering, and bundling to guide automated code generation and refactoring.

When should I not use dynamic imports for bundle optimization in Next.js?▼

While metadata does not specify explicit limitations, dynamic imports for bundle optimization should be carefully balanced against server-side rendering strategies. Improper use can disrupt SSR boundaries and caching behavior, degrading user experience.

Related Skills

Explore More Software Engineering Skills→
ilyvscilyvsc
7

vercel-react-best-practices

Analyze React and Next.js projects to apply performance optimization guidelines.

Community
Advanced
NiapyaNiapya
5

vercel-react-best-practices

Enforce 58 rules across eight categories to optimize React and Next.js applications.

Community
Advanced
pascallammerspascallammers
1

performance-optimization

Optimize application performance through code splitting, lazy loading, and caching strategies.

Community
Advanced
ollieb89ollieb89

performance-profiling

Run Lighthouse audits and collect runtime metrics via Python script.

Community
Advanced