vercel/nextjs-skills
3 skills1.3k installs2.8k starsGitHub
Install
npx skills add https://github.com/vercel/nextjs-skillsSkills in this repo
1Next Best PracticesNext Best Practices is a procedural Next.js skill from Vercel’s skills repo that tells your agent how to structure App Router projects, respect React Server Component boundaries, and follow modern async data APIs. Solo builders shipping marketing sites, dashboards, or full-stack SaaS on Next.js use it whenever they generate or review routes, layouts, server actions, metadata, and asset optimization—without guessing which APIs became async in Next.js 15+. The skill splits guidance across focused references (file conventions, RSC boundaries, async patterns, runtime selection, directives, functions, and related topics), so reviews stay consistent across sessions. It complements generic React knowledge by encoding framework-specific pitfalls—non-serializable props across the server boundary, invalid async client components, and edge-vs-node tradeoffs—that otherwise slip through chat-only planning. Use it during active feature work and again before release when you want a structured pass over framework compliance rather than ad-hoc lint fixes.847installs2Next Cache Componentsnext-cache-components is a Vercel-maintained agent skill that teaches solo builders how to use Next.js 16 Cache Components to combine Partial Prerendering with explicit caching boundaries. You turn on `cacheComponents`, mark slow-but-shareable fetches with `'use cache'` and `cacheLife`, keep user-specific or session data in Suspense-wrapped dynamic segments, and invalidate with `cacheTag` / `updateTag` / `revalidateTag`. It matters when a marketing shell should ship instantly while blog listings stay warm in cache and dashboards still stream fresh. The README walks static header patterns, parameterized routes, fetch caching notes, and config for custom `cacheLife` profiles—ideal when you are past prototype and need production-grade rendering without rewriting the whole app.475installs3Next Upgradenext-upgrade is an agent skill that walks a solo builder through a disciplined Next.js version upgrade aligned with Vercel’s published migration path. It starts by reading package.json to establish the current Next.js and React stack, then pulls the latest official codemod list and version-specific upgrade guides so recommendations match what the framework team documents—not blog guesswork. For large jumps it favors stepping through majors incrementally, running named codemods before hand-editing, and only then updating npm dependencies in a single coherent pass. That sequence reduces broken async request APIs, geo/IP migrations, and dynamic import regressions that show up after a blind npm install. It fits indie SaaS and API-route projects where you own the repo and need a repeatable upgrade ritual your coding agent can execute with shell and network access.1installs