vercel-react-best-practices

Identify and fix React/Next.js performance antipatterns across components and data flows.

9|2|Updated Mar 12, 2026

Search Tags:#performance #react #optimization #next.js #memoization #server-components #data-fetching

Ready to run

npx skills add https://github.com/hongmaple0820/agent-academy --skill vercel-react-best-practices-hongmaple0820

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/frameworks/react-best-practices
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill vercel-react-best-practices-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects frequently struggle with performance due to rendering bottlenecks, large bundles, and inefficient data-fetching patterns. This guide consolidates proven guidelines to help engineers consistently produce faster, more reliable user interfaces.

Core Features & Use Cases

Establishes server/client boundary patterns, memoization, and parallel data fetching.
Improves bundle size, time to interactive, and user-perceived performance across components and pages.
Use cases include code reviews, refactoring campaigns, and automated tooling to apply performance improvements.

Quick Start

Audit a React/Next.js module and apply the documented performance patterns to achieve faster render times and smaller 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 rendering bottlenecks and reduce bundle size in Next.js?▼

Fix React rendering bottlenecks by applying server/client boundary optimizations, memoization, and safe serialization to reduce bundle size and improve time to interactive.

What is the best way to optimize parallel data fetching in React server components?▼

Optimize parallel data fetching in React server components by restructuring data flows to resolve requests concurrently, ensuring safe serialization while maintaining security and reliability constraints.

When do I need memoization in Next.js applications?▼

You need memoization in Next.js applications when resolving component rendering bottlenecks and inefficient data-fetching patterns, preventing unnecessary re-renders to consistently produce faster user interfaces.

Can I apply these React performance patterns during code reviews?▼

You can apply React performance patterns during code reviews and refactoring campaigns to audit modules and enforce improvements for time to interactive and bundle size.

Why does my Next.js bundle size stay large after applying basic optimizations?▼

Your Next.js bundle size stays large when server/client boundary patterns and safe serialization are improperly applied, leaving inefficient data-fetching patterns and rendering bottlenecks unresolved across components.