Verified:GitHub

vercel-react-best-practices

Apply Vercel best practices to optimize React and Next.js performance.

Updated Aug 22, 2025

Search Tags:#performance #react #next.js #refactor #code-splitting #bundle-size

One-click install

npx skills add https://github.com/cdub615/dotfiles --skill vercel-react-best-practices-cdub615

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/cdub615/dotfiles/tree/main/opencode/.config/opencode/skill/vercel-react-best-practices
Command: npx skills add https://github.com/cdub615/dotfiles --skill vercel-react-best-practices-cdub615

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Large React/Next.js projects often suffer from bloated bundles, waterfalls, and slow render paths. This Skill consolidates Vercel Engineering's best practices into a single, actionable guide to improve performance across components, data fetching, and server/client boundaries.

Core Features & Use Cases

Bundle size optimization and intelligent code splitting to accelerate TTI and LCP.
Server and client fetching patterns that minimize waterfalls and maximize parallelism.
Guidance for safe refactors and automated code-generation prompts to improve performance in Next.js apps.
Use Case: Audit an existing Next.js project and apply recommended patterns to reduce bundle size and render time.

Quick Start

Review a React/Next.js project against the vercel-react-best-practices, identify top bottlenecks (e.g., barrel imports, heavy components, and synchronous data fetching), and implement targeted changes such as direct module imports, dynamic loading, and parallel data fetching.

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 reduce bundle size in a Next.js application?▼

Minimize waterfalls in React server components by using parallel data fetching patterns that maximize data retrieval concurrency instead of sequential client-side requests.

What is the best way to refactor synchronous data fetching in React?▼

Refactor synchronous data fetching by applying vetted Next.js best practices that prescribe concrete patterns for parallel fetching and safe code-generation prompts to improve render times.

Do I need specific dependencies to optimize Next.js render paths?▼

No dependencies are required. The optimization process enforces compatibility with standard tooling and applies actionable patterns directly to typical React and Next.js project structures.

How does code splitting improve LCP in React applications?▼

Code splitting improves LCP by breaking down bloated bundles into smaller chunks, ensuring that only necessary JavaScript loads during the initial render path to speed up delivery.