Top AI Skills for Next.js Development [2026]

We installed 15 Next.js skills from the SkillSafe registry, read every line of every archive, and scored them on five dimensions specific to Next.js development: relevance to Next.js-specific concerns, depth of framework-specific patterns, actionability for real projects, structural organization, and adoption signals. This roundup focuses on what makes Next.js different from generic React development — App Router routing, SSR/SSG/ISR, middleware, server-side data patterns, upgrade migration, and the caching model that changed entirely in Next.js 16. If you’re looking for general React patterns (component composition, state management, UI libraries), see our companion article on the best AI React skills. This list is about the framework layer on top.

Five skills cleared the bar. Two come from Vercel’s official skill repos, one is an eval-proven bundle that raised Next.js pass rates from 32% to 78%, and two are community-built skills covering patterns that AI tools get wrong most often.

How We Scored

Each skill was scored out of 50 across five dimensions:

Dimension	Max	What we looked at
Relevance	10	Does it address Next.js-specific concerns — App Router, SSR/SSG, middleware, routing, deployment?
Depth	10	Specific Next.js patterns and version-aware guidance, not repackaged React docs
Actionability	10	Can a developer follow the guidance to build better Next.js apps?
Structure	10	Well-organized with clear workflow coverage and navigability
Adoption	10	Install count, stars, verifications, and community traction

Skills that covered Next.js-specific APIs (async params, use cache, cacheLife, intercepting routes, generateStaticParams) scored higher on relevance than skills that wrapped general React advice in Next.js file paths. Skills with eval results or measurable outcomes scored higher on actionability.

Quick Comparison

Skill	Score	Key Feature	Frameworks / Tools	Installs
@vercel-labs/next-best-practices	45/50	20-file Next.js encyclopedia	Next.js 15/16, App Router, RSC, PPR, Middleware	6,255
@wsimmonds/claude-nextjs-skills	43/50	Eval-proven 9-skill bundle	Next.js 14+, App Router, Vercel AI SDK	8,339
@vercel-labs/next-upgrade	41/50	Version migration assistant	Next.js 13-16, Codemods, Migration Guides	9,763
@wshobson/nextjs-app-router-patterns	40/50	8 architectural patterns	Next.js 14+, App Router, RSC, Streaming, ISR	1,867
@wsimmonds/nextjs-anti-patterns	39/50	Anti-pattern detection checklist	Next.js 13+, App Router, Pages Router Migration	5,824

1. @vercel-labs/next-best-practices — 45/50

Source: github.com/vercel-labs/next-skills — 6,255 installs — 9 stars

We covered this skill in our React roundup as the top overall pick, but it deserves a dedicated look through a Next.js-specific lens. While many of its 20 reference files touch React patterns, the majority are pure Next.js framework concerns that have no equivalent in a plain React app.

The archive spans 3,390 lines across 20 files. The files that matter most for Next.js developers — and that set this skill apart from generic React advice — are file-conventions.md (140 lines on route segments, middleware-to-proxy rename in v16, and parallel route conventions), async-patterns.md (87 lines on the Next.js 15 breaking change where params and searchParams became async), self-hosting.md (371 lines on Docker output: 'standalone', cache handlers for multi-instance ISR, and what needs extra setup outside Vercel), and parallel-routes.md (287 lines covering modal patterns with @slot and (.) interceptors, default.tsx fallback behavior, and router.back() for closing).

The data-patterns.md file (297 lines) is the strongest Next.js-specific reference. It draws the line between Server Components, Server Actions, and Route Handlers with a decision framework that agents can actually follow — Server Components for reads, Server Actions for mutations with progressive enhancement, Route Handlers only for external webhooks and third-party integrations. The error-handling.md file (227 lines) covers error.tsx, global-error.tsx, not-found.tsx, and the newer forbidden() and unauthorized() functions for auth errors, plus the unstable_rethrow escape hatch for catch blocks — details that are new enough to be absent from most training data.

The debug-tricks.md file documents the Next.js MCP debug endpoint (/__next/mcp) and the --debug-build-paths flag for rebuilding specific routes. These are v16-era features that AI tools without this skill simply do not know about.

Where it loses points: The runtime-selection.md file is only 39 lines and lists runtime options without giving the agent a decision heuristic. The agent needs to know “choose Edge when your function is stateless and latency-sensitive, choose Node when you need fs, native modules, or heavy computation” — not just what the options are.

Score breakdown: Relevance 10 — Depth 10 — Actionability 9 — Structure 10 — Adoption 6

skillsafe install @vercel-labs/next-best-practices

2. @wsimmonds/claude-nextjs-skills — 43/50

Source: github.com/wsimmonds/claude-nextjs-skills — 8,339 installs

This is not a single skill — it is a bundle of 9 focused Next.js sub-skills in one archive, plus a Vercel AI SDK skill. What makes it remarkable is that it was built with a specific, measurable goal: improving pass rates on Vercel’s official Next.js evals at nextjs.org/evals. And it has the receipts.

The README documents the results: Claude Haiku 4.5 went from a 32% baseline to 78% (39/50 evals passed), and Claude Sonnet 4.5 went from 32% to 76% (38/50). The eval results table shows pass/fail for all 50 evals across 3 runs each, with timing data. This is the only skill in the registry with published, reproducible eval numbers for Next.js development.

The 9 sub-skills map to specific Next.js problem areas, each in its own SKILL.md:

• nextjs-app-router-fundamentals/ — File conventions, layout nesting, Pages Router migration, generateStaticParams
• nextjs-server-client-components/ — Decision tree for Server vs Client, useSearchParams + Suspense requirements, React use() API
• nextjs-anti-patterns/ — 6 categories of anti-patterns with wrong/right code pairs
• nextjs-use-search-params-suspense/ — The useSearchParams + Suspense pattern that agents consistently miss
• nextjs-advanced-routing/ — Parallel routes, intercepting routes, route groups
• nextjs-dynamic-routes-params/ — Dynamic segments, catch-all routes, generateStaticParams patterns
• nextjs-server-navigation/ — Server-side redirect() vs client-side useRouter()
• nextjs-client-cookie-pattern/ — Cookie access across the server/client boundary
• nextjs-pathname-id-fetch/ — Extracting pathname parameters and fetching data by ID

Each sub-skill is independently installable on SkillSafe (the individual install counts range from 1,299 to 5,824), but the bundle installs them all as a coordinated set. The combined content runs to over 5,000 lines of Next.js-specific guidance.

Where it loses points: The sub-skills share boilerplate (every one repeats the same TypeScript any warning block and common type patterns section), which adds ~30 lines of duplicated preamble per file. The bundle was designed as a proof of concept and hasn’t been updated since October 2025, so it doesn’t cover Next.js 16 features like Cache Components or the middleware-to-proxy rename. That said, the eval numbers speak for themselves — this is the most empirically validated Next.js skill in the registry.

Score breakdown: Relevance 10 — Depth 9 — Actionability 10 — Structure 7 — Adoption 7

skillsafe install @wsimmonds/claude-nextjs-skills

3. @vercel-labs/next-upgrade — 41/50

Source: github.com/vercel-labs/next-skills — 9,763 installs — 480 stars

The most-installed and most-starred Next.js skill in the registry, and it is exactly 50 lines long. That ratio — 9,763 installs per 50 lines — tells you something about the pain point it addresses. Next.js version upgrades are the single most common source of broken AI-generated code: the agent writes code targeting Next.js 14 patterns while the project is on 15, or generates synchronous params access in a Next.js 15+ codebase where params are now async.

The skill works as a step-by-step workflow for the AI agent:

1. Detect the current Next.js version from package.json
2. Fetch the official upgrade guide via WebFetch (with URLs for v14, v15, and v16 migration docs)
3. Determine the upgrade path — for major jumps, upgrade incrementally (13 to 14 to 15)
4. Run codemods first (npx @next/codemod@latest <transform> <path>), with three named transforms: next-async-request-api for the v15 async params change, next-request-geo-ip for the geo/IP property migration, and next-dynamic-access-named-export for dynamic import transforms
5. Update dependencies (next@latest react@latest react-dom@latest)
6. Review breaking changes and update next.config.js
7. Update TypeScript types
8. Test with npm run build and npm run dev

This is a task-oriented skill — it doesn’t teach patterns, it automates a workflow. The 480 stars (the highest of any Next.js skill by a wide margin) reflect that this is the skill people install before they do anything else with a Next.js project. It accepts a [target-version] argument, letting you specify the version you’re upgrading to.

Where it loses points: It is thin by design, which limits its depth score. It names three codemods but doesn’t explain what each one transforms or show before/after code. It doesn’t cover the Next.js 16-specific changes (Cache Components replacing experimental.ppr, middleware rename to proxy). For those you need @vercel-labs/next-best-practices alongside it. The strength is the workflow — detect, codemod, upgrade, test — and the weakness is that it delegates all the detail to the fetched docs.

Score breakdown: Relevance 10 — Depth 5 — Actionability 9 — Structure 8 — Adoption 9

skillsafe install @vercel-labs/next-upgrade

4. @wshobson/nextjs-app-router-patterns — 40/50

Source: github.com/wshobson/agents — 1,867 installs — 4 stars — 1 verification

A single 537-line file that covers 8 complete architectural patterns for the Next.js App Router, each with full TypeScript implementations. Where the Vercel skills give you reference material organized by topic, this skill gives you patterns organized by what you’re building.

The 8 patterns are:

1. Server Components with Data Fetching — Async page with searchParams, Suspense key for re-rendering on filter changes, separate data-fetching component with tag-based cache invalidation
2. Client Components with use client — Server Action integration via useTransition, error handling in the transition callback
3. Server Actions — Full mutation flow with cookies(), revalidateTag, redirect, and form data handling
4. Parallel Routes — Dashboard layout with @analytics and @team slots, independent loading states per slot
5. Intercepting Routes — Photo modal pattern with @modal/(.)photos/[id], full-page fallback, and router.back() close behavior
6. Streaming with Suspense — Product page with blocking header fetch and streamed reviews/recommendations sections
7. Route Handlers — GET/POST/dynamic route handlers with NextRequest/NextResponse, proper 404 handling
8. Metadata and SEO — generateMetadata with OpenGraph and Twitter cards, generateStaticParams for static generation, notFound() for missing resources

Each pattern is a complete, working example — not a fragment. The Server Actions pattern (Pattern 3) shows the full lifecycle from form submission to database mutation to cache invalidation to redirect, with proper error handling at each step. The Intercepting Routes pattern (Pattern 5) includes the file structure diagram, which is critical because the (.) and (..) prefix conventions are the part agents get wrong most often.

The caching strategies section at the bottom consolidates the four fetch cache options (no-store, force-cache, revalidate: N, tag-based) with their revalidateTag/revalidatePath counterparts. The do’s and don’ts summary is agent-oriented: “Don’t fetch in Client Components — use Server Components or React Query.”

Where it loses points: Lower install count (1,867) reflects that it’s newer and less discoverable than the Vercel skills. It doesn’t cover Next.js 16 features (Cache Components, use cache directive). The patterns are all Next.js 14+ and use await params correctly, but there’s no mention of the middleware system or deployment concerns (Docker, edge config, ISR cache handlers). For a patterns-focused skill, that’s an acceptable scope limitation; for a comprehensive Next.js reference, you’d pair it with @vercel-labs/next-best-practices.

Score breakdown: Relevance 10 — Depth 9 — Actionability 9 — Structure 8 — Adoption 4

skillsafe install @wshobson/nextjs-app-router-patterns

5. @wsimmonds/nextjs-anti-patterns — 39/50

Source: github.com/wsimmonds/claude-nextjs-skills — 5,824 installs

A 944-line single file organized into 6 categories of Next.js anti-patterns, each with wrong/right code pairs and explanations of why the wrong pattern is wrong. This is the skill that catches the patterns AI tools default to when they don’t have Next.js-specific training: useEffect for data fetching, useState for server data, getServerSideProps in the App Router, window.location.href for navigation, and API routes as middlemen for direct database access.

The 6 categories are:

1. Inappropriate useEffect Usage (3 sub-patterns) — Using useEffect for browser detection (should be direct detection in component body), data fetching (should be async Server Component), and URL detection (should be accessed in event handler)
2. Inappropriate useState Usage (2 sub-patterns) — Using useState for server data (should be Server Component), and for derived values (should be direct computation or useMemo)
3. Pages Router Patterns in App Router (3 sub-patterns) — getServerSideProps (should be async Server Component with cache: 'no-store'), getStaticProps (should be fetch with revalidate), and next/head (should be metadata export)
4. Performance Anti-Patterns (3 sub-patterns) — Serial await (should be Promise.all or Suspense), over-using use client (should push boundary as low as possible), importing Server Components into Client Components (should use composition/children pattern)
5. Router and Navigation Anti-Patterns (2 sub-patterns) — window.location.href (should be Link or useRouter), useRouter in Server Components (should be redirect())
6. Data Fetching Anti-Patterns (2 sub-patterns) — Creating unnecessary API routes as middlemen (should access database directly in Server Components), missing loading states (should use Suspense)

The detection checklist at the bottom is the most agent-useful section — it’s a bulleted list of 11 things to check when reviewing Next.js code. An AI agent can run through this list systematically when doing code review:

• useEffect used for data fetching -> Replace with Server Component
• getServerSideProps or getStaticProps -> Migrate to async Server Components
• 'use client' on static components -> Remove directive
• Client Component importing Server Component -> Use composition pattern

The “When Client Components ARE Appropriate” section prevents over-correction. It explicitly lists 5 cases where use client is the right choice: event handlers, form state, browser APIs, third-party client libraries, and React Context consumers. This balance is important — many anti-pattern skills push agents to avoid Client Components entirely, which creates its own class of bugs.

Where it loses points: The skill doesn’t cover Next.js 16 patterns. The browser detection anti-pattern section (Anti-Pattern 1.1) is oddly specific about Safari detection, likely because it was tuned for a specific eval. Some of the “correct” examples use older patterns — for instance, the data fetching correction uses fetch() with revalidate rather than the newer use cache directive. For a skill focused on what not to do, that’s a minor gap, but teams on Next.js 16 should pair this with @vercel-labs/next-cache-components for the current caching model.

Score breakdown: Relevance 9 — Depth 9 — Actionability 9 — Structure 7 — Adoption 5

skillsafe install @wsimmonds/nextjs-anti-patterns

Frequently Asked Questions

How is this different from the React skills roundup?

Our React skills roundup covers skills for React development broadly — component composition, state management, UI libraries like shadcn/ui. Two skills from that article (@vercel-labs/next-best-practices and @vercel-labs/next-cache-components) overlap because they are both React skills and Next.js skills. This article focuses exclusively on what makes Next.js different from plain React: the App Router file system, server-side rendering modes, middleware, routing conventions, version upgrades, and the caching architecture. If you use Next.js, install skills from both lists. If you use Vite + React or Remix, this list won’t apply to your stack.

Can I install the wsimmonds sub-skills individually instead of the bundle?

Yes. Each of the 9 sub-skills in @wsimmonds/claude-nextjs-skills is published separately on SkillSafe — for example, @wsimmonds/nextjs-anti-patterns (5,824 installs) and @wsimmonds/nextjs-server-client-components (5,151 installs). If you only need help with one area, install the individual skill. The bundle is for teams that want comprehensive coverage and are willing to accept the duplicated preamble across files. The eval results in the README were measured with all 9 sub-skills active simultaneously.

Do these skills work with Claude Code, Cursor, and Windsurf?

All five skills install cleanly in Claude Code and Cursor (SkillSafe creates symlinks to both .claude/skills/ and .cursor/skills/ automatically). The three Vercel skills are tagged for Claude Code, Cursor, Windsurf, Codex CLI, and AMP. The wsimmonds skills specify allowed-tools: Read, Write, Edit, Glob, Grep, Bash in their frontmatter, which is Claude Code-specific — other tools will use the content as context but won’t enforce the tool restrictions.

Conclusion

If you install one skill from this list, install @vercel-labs/next-best-practices — 3,390 lines across 20 files covering every Next.js-specific concern from file conventions to self-hosting Docker configuration. If you want empirical proof that skills improve AI-generated Next.js code, install @wsimmonds/claude-nextjs-skills — the eval results (32% to 78% pass rate) are published and reproducible.

For version upgrades, @vercel-labs/next-upgrade is the highest-signal install in the registry at 9,763 installs and 480 stars. Pair it with @wshobson/nextjs-app-router-patterns for 8 complete architectural patterns that cover the App Router workflows agents need most. And for code review, @wsimmonds/nextjs-anti-patterns gives your agent a systematic 11-point checklist for catching the patterns AI tools default to without framework-specific guidance.

# Install all five
skillsafe install @vercel-labs/next-best-practices
skillsafe install @wsimmonds/claude-nextjs-skills
skillsafe install @vercel-labs/next-upgrade
skillsafe install @wshobson/nextjs-app-router-patterns
skillsafe install @wsimmonds/nextjs-anti-patterns

Related roundups: Browse all Best Of roundups