18 skills · 7 categories
Claude Code skills for Next.js
Next.js skills for the App Router era: server components and actions, caching and revalidation that behave as expected, middleware, image and font optimization, and deploying to Vercel or your own infrastructure without surprises.
Start with these
- 1
Next.js App Router
Layouts, caching and invalidation that behave in prod
Before writing data code, Claude checks the installed Next.js version and whether Cache Components is enabled, because caching defaults differ across 14, 15 and 16. It then keeps pages server-first, tags every cached source, invalidates after each Server Action, and verifies the result in the next build route table and a production server, not in dev mode where caching is hidden.
- 2
React Server Components
Keep data on the server and props serializable
Gives Claude a precise RSC mental model so it stops sprinkling use client on whole pages or putting use server on components. It pushes interactivity to small leaves, maps database rows to minimal DTOs before they cross the boundary, treats every Server Function as a public endpoint with validation and authorization, and decodes the common serialization and hydration errors by cause.
- 3
Vercel Deploys
Reproducible builds, scoped env vars, instant rollback
Claude reproduces Vercel builds locally with vercel pull and vercel build before guessing, scopes env vars per Production, Preview and branch, and remembers that changes need a redeploy. Functions run on the Node.js runtime near the database with sensible maxDuration, previews stay protected, monorepo builds skip unaffected apps, and production moves by promotion with a known rollback.
All 18 Next.js skills
Grouped by category. Each card opens the full playbook, example prompts and install commands.
Frontend 5
Next.js App Router
Layouts, caching and invalidation that behave in prod
Before writing data code, Claude checks the installed Next.js version and whether Cache Components is enabled, because caching defaults differ across 14, 15 and 16. It then keeps pages server-first, tags every cached source, invalidates after each Server Action, and verifies the result in the next build route table and a production server, not in dev mode where caching is hidden.
React Server Components
Keep data on the server and props serializable
Gives Claude a precise RSC mental model so it stops sprinkling use client on whole pages or putting use server on components. It pushes interactivity to small leaves, maps database rows to minimal DTOs before they cross the boundary, treats every Server Function as a public endpoint with validation and authorization, and decodes the common serialization and hydration errors by cause.
TanStack Query
Server state with keys, staleTime and rollback
Claude treats server data as a cache with rules. It builds one query key factory with queryOptions, picks staleTime by how fast each kind of data changes, makes mutations invalidate exactly the keys they touch, rolls back optimistic updates on error, and hydrates SSR caches so pages do not refetch on load. Verification uses Devtools and the network tab, not hope.
Micro-frontends
Split the frontend only when the org chart demands it
Makes Claude argue the split before building it. It runs a team-topology test, falls back to a boundary-enforced modular monolith when the test fails, and otherwise defaults to route-level apps behind a proxy, escalating to Module Federation only for a real same-page need. It then pins shared singletons, the route table, typed events, per-app budgets and manifest-based rollback.
SvelteKit Apps
Runes, load functions and forms that work without JS
Claude writes Svelte 5 with runes, snippets and callback props instead of extending legacy export let, $: and on:click code. It picks server or universal load files deliberately, streams slow data, builds form actions that degrade without JavaScript, gates auth in hooks plus each action, and chooses the adapter that matches where the app will actually run.
Backend & APIs 2
tRPC APIs
Typesafe procedures with auth that narrows context
Claude builds tRPC routers with a cheap typed context, protected and role-based base procedures that narrow ctx.user, Zod validation on input and output, and per-object ownership checks inside each procedure. The client imports only the router type, uses the v11 TanStack Query integration for queries and invalidation, and createCaller tests prove that the unauthorized and not-found paths hold.
Hono on the Edge
One typed API for Workers, Bun, Deno and Node
Claude writes Hono apps against Web standard APIs so they run on Workers, Bun, Deno or Node, with Bindings and Variables typed from the start. Inputs pass through Zod or Standard Schema validators, errors flow through one onError handler, and routes are chained so the exported AppType gives the frontend a fully typed hc client without hand-written fetch wrappers.
Cloud Platforms 2
Vercel Deploys
Reproducible builds, scoped env vars, instant rollback
Claude reproduces Vercel builds locally with vercel pull and vercel build before guessing, scopes env vars per Production, Preview and branch, and remembers that changes need a redeploy. Functions run on the Node.js runtime near the database with sensible maxDuration, previews stay protected, monorepo builds skip unaffected apps, and production moves by promotion with a known rollback.
Supabase Backend
Treat the database as the security boundary it is
Claude builds Supabase projects with the CLI and versioned migrations, enables RLS on every exposed table with per-operation policies that are indexed and tested as two different users, and keeps the secret key off clients. Server auth uses @supabase/ssr with verified users, storage paths are scoped by user folder, and types are regenerated after each schema change.
Security 1
Performance 4
Rendering Strategies
Static where you can, per-request only where you must
Claude inventories every route first: data sources, how stale each may be, whether it is per-user, traffic share and page count. It then picks the most static mode the facts allow, maps it to the framework's real config, keeps personalized bits out of shared caches, and proves the plan with build output, cache-hit headers and a cross-user leak test.
Bundle Analysis
Cut the initial JS users actually download
Claude measures before cutting: compressed size of the initial route, a treemap of what is in it, and a classification of every big module as needed now, needed later, duplicated or dead. It then removes, lazy-loads, replaces or tree-shakes in that order, proves the gain with the same build command, and adds a dependency-free budget script to CI so size cannot creep back.
HTTP Caching
Year-long assets, always-fresh HTML, zero leaks
Claude writes a caching policy per response class instead of tweaking headers file by file: fingerprinted assets cached for a year as immutable, HTML revalidated on every load, shared APIs held at the CDN with stale-while-revalidate, and anything personalized marked private. A bundled checker audits live URLs, confirms 304 revalidation and flags public responses that set cookies.
Image Optimization
Right size, modern format, loaded at the right time
Claude fixes images in the order that saves the most bytes: dimensions first, then format, then loading behavior. It generates width variants with sharp or an image CDN, writes srcset and sizes that match the real layout, gives the hero fetchpriority instead of lazy loading, and adds dimensions everywhere. A bundled auditor flags markup mistakes in rendered HTML.
Integrations 2
Auth Providers
Hosted login wired in, authorization kept server-side
Claude picks an auth provider from your real constraints (self-hosting, SSO, MAU, data residency), wires the current SDK for your framework version, and refuses to treat middleware as authorization: every data read re-checks the session. Users are keyed on stable provider IDs and synced through signature-verified webhooks, with a tested plan for moving between providers.
Sentry Error Tracking
Readable stack traces, quiet quotas, useful alerts
Guides Claude through a Sentry setup that actually helps on-call: every event tagged with release and environment, source maps uploaded from CI with the auth token kept secret, errors kept at full rate while traces and replays are sampled, and noise filtered at the SDK before it burns quota. It finishes with alert rules for new and regressed issues and a weekly triage routine.
SEO & Growth 2
Programmatic SEO
Thousands of pages, each one worth indexing
Claude treats the dataset and the quality gate as the product, not the template. It validates that a page pattern matches real SERPs, measures per-page uniqueness instead of swapping variables into boilerplate, computes index, noindex, or skip per row at build time, and pilots a few hundred pages in their own sitemap segment before scaling, keeping clear of Google's scaled content abuse policy.
Schema Markup
JSON-LD that earns rich results and matches the page
Claude stops pasting generic schema snippets and instead builds one connected JSON-LD graph per template from the same data that renders the page. It skips types Google no longer rewards, such as HowTo and most FAQPage use, escapes output safely in Next.js, and lints every template variant with a bundled script before you run the Rich Results Test.
Install
Every Next.js skill in one command
Installs into ~/.claude/skills/. Add --project after -- to install into the current repository.
curl -fsSL https://claudeskills.page/install.sh | sh -s -- nextjs-app-router react-server-components vercel-deploys rendering-strategies trpc-apis auth-providers sentry-error-tracking programmatic-seo tanstack-query micro-frontends sveltekit-apps hono-edge supabase-backend security-headers bundle-analysis http-caching image-optimization schema-markup Next.js skills FAQ
What is the best Claude Code skill for Next.js?
Start with Next.js App Router: Layouts, caching and invalidation that behave in prod. Then add React Server Components and Vercel Deploys, which cover the next most common Next.js requests.
How do I install all 18 Next.js skills at once?
Pass every name to the installer in one command: curl -fsSL https://claudeskills.page/install.sh | sh -s -- nextjs-app-router react-server-components vercel-deploys rendering-strategies trpc-apis auth-providers sentry-error-tracking programmatic-seo tanstack-query micro-frontends sveltekit-apps hono-edge supabase-backend security-headers bundle-analysis http-caching image-optimization schema-markup. Add --project to install them into the current repository's .claude/skills/ folder so your team gets them too.
Do these Next.js skills work outside Claude Code?
Yes. Each skill uses only the portable Agent Skills frontmatter, so the same folder works on claude.ai, through the Claude API and in the Agent SDK. Skills that run bundled scripts need an environment with code execution.