next-best-practices

Overview

The official Next.js best practices skill from Vercel Labs, providing core knowledge for AI coding agents working with Next.js projects. It covers 19 topic areas including file conventions, React Server Component boundaries, data fetching patterns, async APIs (Next.js 15+), directives, navigation hooks, runtime selection, error handling, route handlers, metadata/SEO, image and font optimization, bundling, scripts, hydration error debugging, Suspense boundaries, parallel routes, self-hosting, and debug tricks.

Each topic is documented in a dedicated reference file, making it easy for agents to look up specific patterns. The skill is designed as a background skill that automatically applies when relevant, rather than requiring explicit invocation.

Key Features

• File conventions and project structure guidance for Next.js App Router
• React Server Component vs. Client Component boundary rules
• Data fetching and mutation strategies for server and client components
• Next.js 15+ async API patterns and directive usage (use client, use server, use cache)
• Route handler patterns, metadata/SEO configuration, and OG image generation
• Image optimization (next/image), font optimization (next/font), and bundling guidance
• Hydration error debugging, Suspense boundary patterns, and parallel route/modal patterns
• Self-hosting guides for Docker, standalone output, and ISR
• Next.js 16 Cache Components and PPR available as an optional advanced skill

Who is this for?

Developers building Next.js applications who want their AI coding agents to follow official Vercel best practices, and teams adopting Next.js App Router who need reliable guidance on server components, data patterns, and deployment.