skills.rest
fbosch
fboschCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

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

3|Updated Jun 23, 2022
Search Tags:#performance#suspense#react#optimization#nextjs#bundle#server-components
One-click install
npx skills add https://github.com/fbosch/dotfiles --skill vercel-react-best-practices-fbosch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/fbosch/dotfiles/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/fbosch/dotfiles --skill vercel-react-best-practices-fbosch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance optimization guidelines from Vercel Engineering help teams write faster, more efficient code and reduce unnecessary boilerplate during development.

Core Features & Use Cases

  • Guideline-driven: prioritized rules target eliminating waterfalls, minimizing bundle size, and optimizing server/client data flow.
  • Automation-friendly: designed to translate into reviews, automated refactoring prompts, and AI-assisted code improvements.
  • Use Case: when reviewing or refactoring a Next.js page with heavy data fetching, apply the rules to streamline rendering and improve LCP/TTI.

Quick Start

Review a React/Next.js project and apply the performance best practices to identify optimization opportunities.

Frequently Asked Questions about vercel-react-best-practices

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

FAQPage Schema
What are the best practices for React and Next.js performance optimization?▼

React and Next.js performance optimization involves applying prioritized rules to eliminate data fetching waterfalls, minimize bundle size, and optimize server/client boundaries. This reduces render times and improves load performance metrics like LCP and TTI.

How do I reduce bundle size and optimize server/client boundaries in Next.js?▼

Optimizing server/client boundaries in Next.js requires applying targeted rules during code reviews and refactoring. By streamlining data flow and minimizing client-side JavaScript, teams can reduce bundle size and eliminate unnecessary rendering waterfalls.

Why does my Next.js page have slow LCP and TTI due to heavy data fetching?▼

Slow LCP and TTI in Next.js pages often result from data fetching waterfalls and unoptimized server/client boundaries. Applying Vercel Engineering guidelines helps streamline rendering and refactors heavy data fetching to improve load performance.

Can I automate React and Next.js performance refactoring during code reviews?▼

Yes, React and Next.js performance best practices are automation-friendly. The compiled rules translate directly into automated refactoring prompts and AI-assisted code improvements, ensuring safe and repeatable performance enhancements across teams.

Does this approach work for both React components and Next.js pages?▼

Yes, the performance best practices cover the full scope of React and Next.js projects. This includes optimizing individual components, entire pages, data fetching strategies, and bundle optimization to guide refactors and code reviews.

Related Skills

Explore More Software Engineering Skills→
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
markky21markky21

vercel-react-best-practices

Audit React and Next.js components against performance optimization guidelines.

Community
Advanced
okayusokayus

vercel-react-best-practices

Apply Vercel optimization guidelines to React and Next.js performance reviews.

Community
Advanced
kimjuyoung1127kimjuyoung1127

react-best-practices

Audit React/Next.js projects and prioritize performance optimization rules.

Community
Advanced