Framework
Vercel & React Best Practices
React and Next.js performance optimization covering component composition, data fetching, bundle size, and React 19 features.
Last reviewed Mar 2, 2026
Install
Create this file in your project:
.claude/skills/vercel-react-best-practices/SKILL.md---
name: vercel-react-best-practices
description: Use this skill when building or optimizing React/Next.js applications, reviewing React component patterns, or deploying to Vercel.
---
# Vercel & React Best Practices
## When to Use
- Building new pages or components in a Next.js application
- Optimizing performance of existing React components
- Reviewing data fetching patterns and server/client boundaries
- Deploying or configuring a Vercel project
## Process
1. **Assess the component** -- Determine if it needs to be a client component or can remain a server component.
2. **Apply the right pattern** for the use case:
- Static content: Server component, no hydration cost.
- Interactive UI: Client component, minimized to the interactive boundary.
- Data fetching: Server component with async/await, or server action for mutations.
- Shared state: Lift state up to the nearest common client boundary, not to the root.
3. **Optimize the bundle** -- Check imports, use dynamic imports for heavy components, avoid barrel files.
4. **Verify performance** -- Check for unnecessary re-renders, large bundle chunks, and slow data fetches.
## Rules
- Default to server components. Only add "use client" when the component needs interactivity (event handlers, useState, useEffect).
- Keep client component boundaries as small as possible. Wrap only the interactive part, not the entire page.
- Never import server-only code into client components. Watch for accidental "use client" boundary expansion.
- Use `loading.tsx` and `Suspense` for streaming instead of blocking the entire page on data fetches.
- Colocate data fetching with the component that needs it. Avoid prop drilling fetched data through many layers.
- Use React 19 features: `use()` hook for promises, `useOptimistic` for instant UI updates, server actions for mutations.
- Prefer `next/image` over `<img>`, `next/link` over `<a>`, and `next/font` over manual font loading.
- On Vercel: use Edge Runtime for middleware, Node.js Runtime for API routes that need full Node APIs.What this skill does
Vercel & React Best Practices guides AI assistants toward writing performant, idiomatic React and Next.js code. The core principle is server-first: components should be server components by default, with client boundaries drawn as narrowly as possible around interactive elements.
This matters because the server/client boundary in Next.js is the single biggest performance lever. A page that's 90% server-rendered with a small interactive island loads faster, ships less JavaScript, and scores higher on Core Web Vitals than the same page rendered entirely on the client.
The skill also covers React 19 features like the use() hook and server actions, which change fundamental patterns around data fetching and form handling. Keeping up with these patterns ensures the AI writes modern React rather than falling back on older patterns from its training data.
Example workflow
You ask the agent to build a product listing page. The agent will:
- Create the page as a server component that fetches products with async/await.
- Add a
loading.tsxwith a skeleton UI for streaming. - Create a small
AddToCartButtonclient component for just the interactive button -- not the entire product card. - Use
next/imagefor product images with proper width/height/alt attributes. - Use
next/linkfor product detail links with prefetching. - Keep the product card itself as a server component that accepts the button as a child.
Tips
- When in doubt about server vs. client, start as a server component and only switch when you hit a client-only API
- Use React DevTools Profiler to verify that client component boundaries aren't causing unnecessary re-renders
- For complex forms, server actions with
useOptimisticgive the best UX with the least client JavaScript - Run
next buildand check the output for route sizes -- anything over 100KB first-load JS needs investigation
Best with tools
Related MCP servers
- No linked MCP servers yet.