Nextjs
Ship or refactor Next.js App Router apps with correct Server Components, caching, routing, and Vercel-ready builds without mixing deprecated Pages Router patterns.
Overview
nextjs is an agent skill most often used in Build (also Ship) that guides Next.js App Router architecture, data fetching, Server Actions, and Vercel deployment.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill nextjsWhat is this skill?
- Expert guidance for App Router routing, layouts, middleware/proxy, and Server Actions
- Server Components vs client boundaries, cache components, and rendering strategy choices
- Validation rules that flag removed APIs (e.g. getServerSideProps) with migration messaging
- Monorepo-aware path and bash patterns for next dev/build across apps/* workspaces
- Deployment and performance alignment with Vercel and official Next.js docs
- Built-in validate rule flags export getServerSideProps with App Router migration guidance
- Path patterns cover app/**, pages/**, monorepo apps/*/app/**, and next.config.*
Adoption & trust: 4.5k installs on skills.sh; 186 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are on Next.js 13+ but the agent keeps suggesting Pages Router APIs or unclear server/client splits that break builds or caching.
Who is it for?
Solo builders maintaining or greenfielding Next.js App Router apps who want framework-accurate answers tied to their repo layout.
Skip if: Teams on non-React stacks, static sites without Next.js, or repos where the spec is frozen on legacy Pages Router with no migration plan.
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 strategies, and deployment on Vercel.
What do I get? / Deliverables
You get App Router–correct routing, components, and build commands aligned with Vercel, with legacy patterns flagged before merge.
- App Router–correct route and layout structure
- Server Action and data-fetching recommendations
- Build and lint command guidance for CI and Vercel
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Next.js feature work lives in Build; the skill is shelved under frontend because routing, layouts, and rendering choices are the primary touchpoints solo builders hit daily. App Router, Server Actions, and component-level data fetching are front-of-stack concerns even when they touch the server boundary.
Where it fits
Split a dashboard into Server and Client Components without breaking serializable props.
Wire Server Actions to a backend API with correct mutation and revalidation tags.
Choose rendering and cache component strategy before production traffic.
Validate next build output and env setup ahead of a Vercel production push.
How it compares
Framework-specific procedural guidance—not a generic React skill and not an MCP server for live Vercel dashboards.
Common Questions / FAQ
Who is nextjs for?
Indie and solo developers shipping Next.js on the App Router who need reliable agent help for routing, RSC, Server Actions, and Vercel-oriented builds.
When should I use nextjs?
During Build when editing app/** routes and layouts; during Ship when tuning next build, lint, and deploy assumptions; whenever prompts mention App Router, Server Components, or middleware with Next.js.
Is nextjs safe to install?
Treat it like any third-party agent skill: review the Security Audits panel on this Prism page and skim SKILL.md before granting shell or network tools in your agent.
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