Vercel React Best Practices

What it does

This skill guides AI agents in generating React code that adheres to modern Vercel standards, ensuring optimal performance and maintainability. It enforces patterns like Server Components, proper data fetching strategies, and clean component architecture specific to the Next.js ecosystem.

When to use it

• Generating new pages or components for a Next.js application deployed on Vercel.
• Refactoring legacy React codebases to align with current Vercel performance guidelines.
• Implementing Server Components to reduce client-side bundle sizes and improve initial load times.
• Structuring data fetching logic to leverage edge capabilities and caching strategies.

Key capabilities

• Enforces modern React patterns compatible with Next.js App Router.
• Optimizes rendering strategies for server-side and client-side contexts.
• Applies best practices for state management and prop drilling reduction.
• Ensures code is ready for Vercel's deployment pipeline and edge functions.

Example prompts

• "Create a new product listing page using Server Components and React Query for data fetching."
• "Refactor this legacy class component into a functional component following Vercel best practices."
• "Optimize this dashboard layout to reduce client-side bundle size while maintaining interactivity."

Tips & gotchas

Ensure your project is set up with the Next.js App Router before applying these patterns, as they rely on specific routing features. Avoid using older lifecycle methods like componentDidMount when Server Components are available for data fetching.