Nextjs
Architect, debug, and ship Next.js App Router apps with correct Server Components, Server Actions, caching, routing, and Vercel deployment patterns.
Overview
nextjs is an agent skill for the Build phase that guides Next.js App Router architecture, Server Components, Server Actions, caching, and Vercel deployment.
Install
npx skills add https://github.com/vercel/vercel-plugin --skill nextjsWhat is this skill?
- App Router-first guidance with path signals for app/, pages/, and monorepo next.config.* layouts
- Server Components, Server Actions, Cache Components, and data-fetching strategy coverage
- Middleware/proxy, layouts, and rendering strategy decisions aligned to current Next.js docs
- CLI and bash pattern detection for next dev|build|start|lint and create-next-app flows
- Validation hooks flag legacy patterns such as getServerSideProps incompatible with App Router
- metadata priority: 5
- official docs anchors: nextjs.org/docs and /docs/app
Adoption & trust: 669 installs on skills.sh; 186 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are editing a Next.js repo but the agent keeps suggesting Pages Router APIs or wrong caching boundaries for App Router.
Who is it for?
Indie developers shipping SaaS or content sites on Next.js with Claude Code, Cursor, or Codex in the loop.
Skip if: Pure backend-only services, non-React stacks, or teams standardized on Pages Router without migration intent.
When should I use this skill?
Building, debugging, or architecting Next.js applications—routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering, and Vercel deployment.
What do I get? / Deliverables
You get doc-aligned recommendations, path-triggered assistance, and validators that push Server Components and modern routing instead of deprecated patterns.
- App Router-compliant route and layout structure
- Validated config without legacy Pages Router APIs
- Deployment-ready build and lint command guidance
Recommended Skills
Journey fit
Next.js product work sits squarely in Build because routing, rendering, and UI integration happen before launch hardening. Frontend is the canonical shelf for App Router layouts, middleware/proxy, and client/server boundary decisions.
How it compares
Framework expert skill from the Vercel plugin—not a generic CSS kit or a standalone MCP deployment server.
Common Questions / FAQ
Who is nextjs for?
Solo builders and small teams using AI coding agents on Next.js App Router projects headed to Vercel or compatible hosting.
When should I use nextjs?
In Build while creating routes and layouts; in Ship when fixing build or lint failures; and at Launch when tuning rendering for SEO-facing pages—whenever Next.js paths or next dev/build commands appear in your repo.
Is nextjs safe to install?
It is documentation and validation guidance from Vercel’s plugin—review the Security Audits panel on this page and treat network-linked docs fetches per your agent policy.
SKILL.md
READMESKILL.md - Nextjs
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: 'G