Next Best Practice
Apply official-style Next.js rules for App Router structure, RSC boundaries, async APIs, metadata, and optimization while writing or reviewing code.
Overview
Next Best Practice is an agent skill most often used in Build (also Ship) that enforces Next.js App Router conventions, RSC boundaries, and Next 15+ async API patterns when writing or reviewing code.
Install
npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practiceWhat is this skill?
- Covers file conventions, dynamic routes, parallel/intercepting routes, and v16 middleware→proxy rename
- RSC boundary checks: invalid async client components and non-serializable props
- Next.js 15+ async params, searchParams, cookies(), and headers() migration patterns
- Runtime selection, directives ('use client', 'use server', 'use cache'), and navigation/generate helpers
- Image, font, bundling, error handling, route handlers, and metadata best practices
- Documents Next.js v16 middleware rename to proxy
- Covers Next.js 15+ async cookies(), headers(), params, and searchParams
Adoption & trust: 2 installs on skills.sh; 919 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Next.js app mixes client and server boundaries incorrectly or still uses sync APIs that break on Next.js 15+.
Who is it for?
Indie builders shipping on Vercel or self-hosted Next.js who want agent-assisted reviews against up-to-date framework rules.
Skip if: Non-Next React SPAs, backend-only services, or beginners who have not chosen Next.js as their web framework.
When should I use this skill?
Writing or reviewing Next.js code for file conventions, RSC boundaries, async APIs, metadata, route handlers, and optimizations (user-invocable: false).
What do I get? / Deliverables
Code and reviews align with documented Next.js file conventions, valid RSC patterns, async cookies/params usage, and optimization defaults.
- Conformance feedback against Next.js topic docs
- Identified RSC/async/metadata issues
- Suggested fixes aligned with linked reference sections
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Next.js convention and RSC guidance is primarily applied while implementing the frontend stack during build. Frontend subphase is the canonical shelf because the skill governs routes, components, data patterns, and Next-specific directives.
Where it fits
Scaffold a dynamic route and verify async params and serializable props before merging.
PR review flags async client components and missing generateMetadata patterns.
Choose Node default runtime and caching directives for a new server action feature.
How it compares
Framework-specific convention pack—not a generic React style guide or a deploy-only DevOps skill.
Common Questions / FAQ
Who is next-best-practice for?
Solo builders and small teams using Next.js who want their agent to catch RSC mistakes, routing misconfigurations, and async API drift during implementation and review.
When should I use next-best-practice?
Use it in Build → frontend while creating routes and components, and in Ship → review before merging changes that touch server actions, metadata, or Next 15 async request APIs.
Is next-best-practice safe to install?
It is documentation-heavy guidance without mandatory external calls; still review the Security Audits panel on this Prism page and the upstream next-skills repository.
SKILL.md
READMESKILL.md - Next Best Practice
# 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 - ESM/CommonJS issues - Bundle analysis - Webpack to Turbopack migration ## 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 ## 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`