/nextjs
Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.
$ npx -y skills add vercel-labs/vercel-plugin --skill nextjs --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/nextjs
Context preview
The summary Claude sees to decide when to auto-load this skill.
Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.
SKILL.md
nextjs.SKILL.md--- name: nextjs description: Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel. metadata: priority: 5 docs:
- "https://nextjs.org/docs"
- "https://nextjs.org/docs/app"
sitemap: "https://nextjs.org/sitemap.xml" pathPatterns:
- 'next.config.*'
- 'next-env.d.ts'
- 'app/**'
- 'pages/**'
- 'src/app/**'
- 'src/pages/**'
- 'tailwind.config.*'
- 'postcss.config.*'
- 'tsconfig.json'
- 'tsconfig.*.json'
- 'apps/*/app/**'
- 'apps/*/pages/**'
- 'apps/*/src/app/**'
- 'apps/*/src/pages/**'
- 'apps/*/next.config.*'
bashPatterns:
- '\bnext\s+(dev|build|start|lint)\b'
- '\bnext\s+experimental-analyze\b'
- '\bnpx\s+create-next-app\b'
- '\bbunx\s+create-next-app\b'
- '\bnpm\s+run\s+(dev|build|start)\b'
- '\bpnpm\s+(dev|build)\b'
- '\bbun\s+run\s+(dev|build)\b'
promptSignals: phrases:
- "next.js"
- "nextjs"
- "app router"
- "server component"
- "server action"
allOf:
- [middleware, next]
- [layout, route]
anyOf:
- "pages router"
- "getserversideprops"
- "use server"
noneOf: [] minScore: 6 validate: - pattern: export.*getServerSideProps message: 'getServerSideProps is removed in App Router — use server components or route handlers' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from Pages Router getServerSideProps to App Router server components with async data fetching.' - pattern: getServerSideProps message: 'getServerSideProps is a Pages Router pattern — migrate to App Router server components' severity: warn - pattern: export.*getStaticProps message: 'getStaticProps is removed in App Router — use generateStaticParams + server components instead' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from Pages Router getStaticProps to App Router generateStaticParams with server components.' - pattern: getStaticProps message: 'getStaticProps is a Pages Router pattern — migrate to App Router generateStaticParams + server components' severity: warn - pattern: from\s+['"]next/router['"] message: 'next/router is Pages Router only — use next/navigation for App Router' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from next/router to next/navigation with useRouter, usePathname, useSearchParams hooks.' - pattern: (useState|useEffect) message: 'React hooks require "use client" directive — add it at the top of client components' severity: warn skipIfFileContains: "^['\"]use client['\"]" - pattern: from\s+['"]next/head['"] message: 'next/head is Pages Router — use export const metadata or generateMetadata() in App Router. Run Skill(nextjs) for metadata API guidance.' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from next/head to the App Router metadata API (export const metadata / generateMetadata()).' skipIfFileContains: export\s+(const\s+)?metadata|generateMetadata - pattern: export\s+(default\s+)?function\s+middleware message: 'middleware() is renamed to proxy() in Next.js 16 — rename the function and the file to proxy.ts. Run Skill(routing-middleware) for proxy.ts migration guidance.' severity: recommended upgradeToSkill: routing-middleware upgradeWhy: 'Guides migration from middleware.ts to proxy.ts with correct file placement, runtime config, and request interception patterns.' - pattern: revalidateTag\(\s*['"][^'"]+['"]\s*\) message: 'Single-arg revalidateTag(tag) is deprecated in Next.js 16 — pass a cacheLife profile: revalidateTag(tag, "max")' severity: recommended upgradeToSkill: nextjs upgradeWhy: 'Guides migration from single-arg revalidateTag to the Next.js 16 two-arg API with cacheLife profiles.' - pattern: '\bcacheHandler\s*:' message: 'Singular cacheHandler is deprecated in Next.js 16 — use cacheHandlers (plural) with per-type handlers' severity: recommended upgradeToSkill: nextjs upgradeWhy: 'Guides migration from singular cacheHandler to Next.js 16 cacheHandlers (plural) with per-type handler config.' - pattern: useRef\(\s*\) message: 'useRef() requires an initial value in React 19 — use useRef(null) or useRef(0)' severity: error - pattern: next\s+export message: 'next export was removed — use output: "export" in next.config.js for static export' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from next export CLI command to output: "export" in next.config for static site generation.' - pattern: (?<!await )\bcookies\(\s*\) message: 'cookies() is async in Next.js 16 — add await: const cookieStore = await cookies()' severity: error skipIfFileContains: "^['\"]use client['\"]" - pattern: (?<!await )\bheaders\(\s*\) message: 'headers() is async in Next.js 16 — add await: const headersList = await headers()' severity: error skipIfFileContains: "^['\"]use client['\"]" - pattern: =\s*(?!await\b)params\b message: 'params is async in Next.js 16 — add await: const { slug } = await params' severity: recommended skipIfFileContains: "^['\"]use client['\"]" - pattern: =\s*(?!await\b)searchParams\b message: 'searchParams is async in Next.js 16 — add await: const { query } = await searchParams' severity: recommended skipIfFileContains: "^['\"]use client['\"]" - pattern: 'from\s+[''""](next-auth|@auth/core)[''""]|NextAuth\(|getServerSession\(' message: 'Legacy auth pattern detected. Modern Vercel apps should use Clerk, Descope, or Auth0 for managed authentication.' severity: recommended upgradeToSkill:
Read more
--- name: nextjs description: Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel. metadata: priority: 5 docs:
- "https://nextjs.org/docs"
- "https://nextjs.org/docs/app"
sitemap: "https://nextjs.org/sitemap.xml" pathPatterns:
- 'next.config.*'
- 'next-env.d.ts'
- 'app/**'
- 'pages/**'
- 'src/app/**'
- 'src/pages/**'
- 'tailwind.config.*'
- 'postcss.config.*'
- 'tsconfig.json'
- 'tsconfig.*.json'
- 'apps/*/app/**'
- 'apps/*/pages/**'
- 'apps/*/src/app/**'
- 'apps/*/src/pages/**'
- 'apps/*/next.config.*'
bashPatterns:
- '\bnext\s+(dev|build|start|lint)\b'
- '\bnext\s+experimental-analyze\b'
- '\bnpx\s+create-next-app\b'
- '\bbunx\s+create-next-app\b'
- '\bnpm\s+run\s+(dev|build|start)\b'
- '\bpnpm\s+(dev|build)\b'
- '\bbun\s+run\s+(dev|build)\b'
promptSignals: phrases:
- "next.js"
- "nextjs"
- "app router"
- "server component"
- "server action"
allOf:
- [middleware, next]
- [layout, route]
anyOf:
- "pages router"
- "getserversideprops"
- "use server"
noneOf: [] minScore: 6 validate: - pattern: export.*getServerSideProps message: 'getServerSideProps is removed in App Router — use server components or route handlers' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from Pages Router getServerSideProps to App Router server components with async data fetching.' - pattern: getServerSideProps message: 'getServerSideProps is a Pages Router pattern — migrate to App Router server components' severity: warn - pattern: export.*getStaticProps message: 'getStaticProps is removed in App Router — use generateStaticParams + server components instead' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from Pages Router getStaticProps to App Router generateStaticParams with server components.' - pattern: getStaticProps message: 'getStaticProps is a Pages Router pattern — migrate to App Router generateStaticParams + server components' severity: warn - pattern: from\s+['"]next/router['"] message: 'next/router is Pages Router only — use next/navigation for App Router' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from next/router to next/navigation with useRouter, usePathname, useSearchParams hooks.' - pattern: (useState|useEffect) message: 'React hooks require "use client" directive — add it at the top of client components' severity: warn skipIfFileContains: "^['\"]use client['\"]" - pattern: from\s+['"]next/head['"] message: 'next/head is Pages Router — use export const metadata or generateMetadata() in App Router. Run Skill(nextjs) for metadata API guidance.' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from next/head to the App Router metadata API (export const metadata / generateMetadata()).' skipIfFileContains: export\s+(const\s+)?metadata|generateMetadata - pattern: export\s+(default\s+)?function\s+middleware message: 'middleware() is renamed to proxy() in Next.js 16 — rename the function and the file to proxy.ts. Run Skill(routing-middleware) for proxy.ts migration guidance.' severity: recommended upgradeToSkill: routing-middleware upgradeWhy: 'Guides migration from middleware.ts to proxy.ts with correct file placement, runtime config, and request interception patterns.' - pattern: revalidateTag\(\s*['"][^'"]+['"]\s*\) message: 'Single-arg revalidateTag(tag) is deprecated in Next.js 16 — pass a cacheLife profile: revalidateTag(tag, "max")' severity: recommended upgradeToSkill: nextjs upgradeWhy: 'Guides migration from single-arg revalidateTag to the Next.js 16 two-arg API with cacheLife profiles.' - pattern: '\bcacheHandler\s*:' message: 'Singular cacheHandler is deprecated in Next.js 16 — use cacheHandlers (plural) with per-type handlers' severity: recommended upgradeToSkill: nextjs upgradeWhy: 'Guides migration from singular cacheHandler to Next.js 16 cacheHandlers (plural) with per-type handler config.' - pattern: useRef\(\s*\) message: 'useRef() requires an initial value in React 19 — use useRef(null) or useRef(0)' severity: error - pattern: next\s+export message: 'next export was removed — use output: "export" in next.config.js for static export' severity: error upgradeToSkill: nextjs upgradeWhy: 'Guides migration from next export CLI command to output: "export" in next.config for static site generation.' - pattern: (?<!await )\bcookies\(\s*\) message: 'cookies() is async in Next.js 16 — add await: const cookieStore = await cookies()' severity: error skipIfFileContains: "^['\"]use client['\"]" - pattern: (?<!await )\bheaders\(\s*\) message: 'headers() is async in Next.js 16 — add await: const headersList = await headers()' severity: error skipIfFileContains: "^['\"]use client['\"]" - pattern: =\s*(?!await\b)params\b message: 'params is async in Next.js 16 — add await: const { slug } = await params' severity: recommended skipIfFileContains: "^['\"]use client['\"]" - pattern: =\s*(?!await\b)searchParams\b message: 'searchParams is async in Next.js 16 — add await: const { query } = await searchParams' severity: recommended skipIfFileContains: "^['\"]use client['\"]" - pattern: 'from\s+[''""](next-auth|@auth/core)[''""]|NextAuth\(|getServerSession\(' message: 'Legacy auth pattern detected. Modern Vercel apps should use Clerk, Descope, or Auth0 for managed authentication.' severity: recommended upgradeToSkill:
Comprehensive Vercel ecosystem plugin — relational knowledge graph, skills for every major product, specialized agents, and Vercel conventions. Turns any AI agent into a Vercel expert.
Repo: vercel-labs/vercel-plugin
Other skills on vercel.
- /benchmark-agents
Advanced AI agent benchmark scenarios that push Vercel's cutting-edge platform features — Workflow DevKit, AI Gateway, MCP, Chat SDK, Queues, Flags, Sandbox, and multi-agent orchestration. Designed to stress-test skill injection for complex, multi-system builds.
Open skill - /benchmark-e2e
End-to-end benchmark suite for vercel-plugin. Runs realistic projects through skill injection, launches dev servers, verifies everything works, analyzes conversation logs, and produces an improvement report for overnight self-improvement loops.
Open skill - /benchmark-sandbox
Run vercel-plugin eval scenarios in Vercel Sandboxes instead of local WezTerm panels. Provisions ephemeral microVMs with Claude Code + plugin pre-installed, runs benchmark prompts, extracts hook artifacts, and produces coverage reports.
Open skill - /benchmark-testing
Create and launch benchmark test projects to exercise vercel-plugin skill injection across realistic scenarios. Sets up isolated directories, installs the plugin, and spawns WezTerm panes running Claude Code with crafted prompts.
Open skill - /plugin-audit
Audit vercel-plugin performance on real-world projects. Extracts tool calls from Claude Code conversation logs, tests hook matching against actual inputs, identifies pattern coverage gaps, and checks plugin cache staleness. Use when asked to audit, test, or investigate plugin
Open skill - /release
Release vercel-plugin — run gates, bump version, generate artifacts, commit, and push. Use when asked to "release", "ship", "bump and push", or "cut a release".
Open skill

