New Skill: Next.js Skills from Vercel
We’ve added a new development skill to the directory: Next.js Skills from Vercel Labs. This skill provides comprehensive guidance for Next.js development, automatically applying best practices while you code.
Two Types of Skills
Next.js Skills includes both background and invokable skills:
Background Skills (Automatic)
The next-best-practices skill runs automatically when working on Next.js projects, providing contextual guidance across 19 topic areas:
Core Concepts
- Project structure and file conventions
- Server and Client component boundaries
- The
'use client','use server', and'use cache'directives
Data & APIs
- Data fetching patterns
- Data mutation strategies
- Route handlers
- Async APIs specific to Next.js 15+
Optimization
- Image optimization with next/image
- Font optimization with next/font
- Metadata management for SEO
Production Concerns
- Error handling patterns
- Hydration debugging
- Self-hosting strategies
Invokable Skills (On-Demand)
Advanced skills you activate with slash commands:
/next-upgrade
Migration guides between Next.js versions. Get step-by-step instructions for updating your project, handling breaking changes, and adopting new features.
/next-cache-components
Next.js 16 caching features and Partial Pre-rendering (PPR). Learn the new caching model and how to implement incremental static regeneration with streaming.
What Makes This Different
Unlike generic React guidance, Next.js Skills focuses on patterns specific to the framework:
- App Router conventions - File-based routing, layouts, loading states
- Server Components by default - When and how to use Client Components
- Next.js-specific APIs -
cookies(),headers(), dynamic rendering - Vercel deployment patterns - Edge runtime, ISR, on-demand revalidation
Complements React Best Practices
This skill works alongside the React Best Practices skill from the same team. Use both together:
- React Best Practices - Component-level patterns, hooks, performance
- Next.js Skills - Framework-level patterns, routing, data fetching
Get Started
Browse the Next.js Skills in the directory. The background skill activates automatically in Next.js projects, while advanced skills are available via slash commands.
For detailed documentation, visit the GitHub repository.