Next Best Practices
Apply Vercel-maintained Next.js rules for file conventions, RSC boundaries, async APIs, metadata, and bundling while coding or reviewing.
Overview
Next Best Practices is an agent skill most often used in Build (also Ship review) that enforces Next.js file conventions, RSC boundaries, async APIs, metadata, and optimization patterns when writing or reviewing code.
Install
npx skills add https://github.com/vercel-labs/vercel-skills --skill next-best-practicesWhat is this skill?
- File conventions: route segments, groups, parallel/intercepting routes, middleware→proxy note for v16
- RSC boundary checks: invalid async client components and non-serializable props
- Next.js 15+ async params, searchParams, cookies(), and headers() patterns
- Runtime selection guidance (Node default vs Edge when appropriate)
- Directives and APIs: use client/server/cache, navigation hooks, generateStaticParams, metadata and error handling (see l
- Topic areas include file-conventions, rsc-boundaries, async-patterns, runtime-selection, directives, and functions refer
Adoption & trust: 75 installs on skills.sh; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You ship Next.js features quickly but keep hitting App Router, RSC, or Next 15 async API mistakes that only show up in review or production.
Who is it for?
Solo builders maintaining App Router Next.js apps who want agent-enforced conventions without re-reading release notes each sprint.
Skip if: Projects not on Next.js, or teams that want a one-click deploy/MCP integration instead of coding standards.
When should I use this skill?
Apply these rules when writing or reviewing Next.js code (per skill frontmatter; not user-invocable).
What do I get? / Deliverables
Your agent applies consistent Next.js rules across implementation and review so routes, server actions, metadata, and bundles match current Vercel-aligned practice.
- Corrected or compliant Next.js route and component patterns
- Review feedback aligned to linked best-practice topic files
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Most violations surface while implementing routes and components—the canonical shelf is Build frontend even though the same rules matter at review time. Coverage is App Router UI, server/client boundaries, and Next-specific data and navigation patterns—not DevOps deploy scripts.
Where it fits
Adding a dynamic segment page and having the agent verify async params and client/server directives before merge.
PR review that flags non-serializable props passed from a Server Component into a client child.
Tuning image/font optimization and bundle rules before a Vercel production push.
Patching error.tsx and metadata after a production incident on a specific route.
How it compares
Use as an in-editor Next.js rule pack for agents, not as a deployment or infrastructure skill.
Common Questions / FAQ
Who is next-best-practices for?
Developers using Claude, Cursor, or Codex on Next.js SaaS or API-fronted apps who want Vercel-aligned defaults during implementation and review.
When should I use next-best-practices?
During Build while adding routes and server components; during Ship while reviewing PRs for RSC and async API issues; when upgrading to Next 15+ or adjusting metadata, images, and error boundaries.
Is next-best-practices safe to install?
It is documentation-style guidance with user-invocable false; still review the Security Audits panel on this Prism page before adding any third-party skill repo to your agent.
SKILL.md
READMESKILL.md - Next Best Practices
# Next.js Best Practices Apply these rules when writing or reviewing Next.js code. ## File Conventions See [file-conventions.md](./file-conventions.md) for: - Project structure and special files - Route segments (dynamic, catch-all, groups) - Parallel and intercepting routes - Middleware rename in v16 (middleware → proxy) ## RSC Boundaries Detect invalid React Server Component patterns. See [rsc-boundaries.md](./rsc-boundaries.md) for: - Async client component detection (invalid) - Non-serializable props detection - Server Action exceptions ## Async Patterns Next.js 15+ async API changes. See [async-patterns.md](./async-patterns.md) for: - Async `params` and `searchParams` - Async `cookies()` and `headers()` - Migration codemod ## Runtime Selection See [runtime-selection.md](./runtime-selection.md) for: - Default to Node.js runtime - When Edge runtime is appropriate ## Directives See [directives.md](./directives.md) for: - `'use client'`, `'use server'` (React) - `'use cache'` (Next.js) ## Functions See [functions.md](./functions.md) for: - Navigation hooks: `useRouter`, `usePathname`, `useSearchParams`, `useParams` - Server functions: `cookies`, `headers`, `draftMode`, `after` - Generate functions: `generateStaticParams`, `generateMetadata` ## Error Handling See [error-handling.md](./error-handling.md) for: - `error.tsx`, `global-error.tsx`, `not-found.tsx` - `redirect`, `permanentRedirect`, `notFound` - `forbidden`, `unauthorized` (auth errors) - `unstable_rethrow` for catch blocks ## Data Patterns See [data-patterns.md](./data-patterns.md) for: - Server Components vs Server Actions vs Route Handlers - Avoiding data waterfalls (`Promise.all`, Suspense, preload) - Client component data fetching ## Route Handlers See [route-handlers.md](./route-handlers.md) for: - `route.ts` basics - GET handler conflicts with `page.tsx` - Environment behavior (no React DOM) - When to use vs Server Actions ## Metadata & OG Images See [metadata.md](./metadata.md) for: - Static and dynamic metadata - `generateMetadata` function - OG image generation with `next/og` - File-based metadata conventions ## Image Optimization See [image.md](./image.md) for: - Always use `next/image` over `<img>` - Remote images configuration - Responsive `sizes` attribute - Blur placeholders - Priority loading for LCP ## Font Optimization See [font.md](./font.md) for: - `next/font` setup - Google Fonts, local fonts - Tailwind CSS integration - Preloading subsets ## Bundling See [bundling.md](./bundling.md) for: - Server-incompatible packages - CSS imports (not link tags) - Polyfills (already included) - ESM/CommonJS issues - Bundle analysis ## Scripts See [scripts.md](./scripts.md) for: - `next/script` vs native script tags - Inline scripts need `id` - Loading strategies - Google Analytics with `@next/third-parties` ## Hydration Errors See [hydration-error.md](./hydration-error.md) for: - Common causes (browser APIs, dates, invalid HTML) - Debugging with error overlay - Fixes for each cause ## Suspense Boundaries See [suspense-boundaries.md](./suspense-boundaries.md) for: - CSR bailout with `useSearchParams` and `usePathname` - Which hooks require Suspense boundaries ## Parallel & Intercepting Routes See [parallel-routes.md](./parallel-routes.md) for: - Modal patterns with `@slot` and `(.)` interceptors - `default.tsx` for fallbacks - Closing modals correctly with `router.back()` ## Self-Hosting See [self-hosting.md](./self-hosting.md) for: - `output: 'standalone'` for Docker - Cache handlers for multi-instance ISR - What works vs needs extra setup ## Debug Tricks See [debug-tricks.md](./debug-tricks.md) for: - MCP endpoint for AI-assisted debugging - Rebuild specific routes with `--debug-build-paths`