Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →toddkasper/nextjs
Building and reviewing Next.js applications — the App Router, Server and Client Components, rendering and caching (use cache, PPR, streaming), data fetching, Route Handlers, Server Actions and their security rules, and the Proxy (formerly Middleware) layer.
Passed 20 of 22 test cases with the skill, and 16 of 22 without it.
and 4 more in the full report
4 fixed16 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
We created an App Router app in Next.js v16 and declared `'use cache'` inside a function, but dynamic components are not streaming as expected. What configuration option must be enabled in `next.config.ts`?
| Checked | Without skill | With skill |
|---|---|---|
| Sets cacheComponents to true in next.config.ts | Missed | Passed |
The instructions your model reads when the skill loads.
Version-sensitive. Next.js moves fast. Caching semantics, middleware conventions, and rendering defaults differ materially between v14, v15, and v16. Every claim here is anchored to the official docs at version 16.2.7 (May 2026). When working on a project, check the installed version (
package.json) and consult the matching docs. Study resources and version landmarks live in references/study-resources.md.
A strong Next.js engineer reasons about three orthogonal axes simultaneously: (1) where code runs (server vs client), (2) when it runs (build/prerender vs request time), and (3) how long the result is cached. Most bugs and performance problems come from getting one of these wrong — shipping secrets to the client, blocking renders on slow fetches, or serving stale data because a cache was not invalidated after a mutation.
This playbook covers the App Router model (the app/ directory). The Pages Router (pages/) is
a legacy path — do not build new features there.
Load this skill when… building or reviewing a Next.js App Router application; debugging caching, PPR, or streaming behaviour; auditing Server Actions for auth/authz or CSRF exposure; reviewing Proxy (middleware) configuration. Not this skill: React fundamentals (hooks, state, RTL testing) → see
react; Node.js runtime and event-loop concerns → seenodejs; TypeScript compiler configuration → seetypescript.
Verify steps assume nothing about your tooling — use your project's own scripts and the language toolchain (
tsc,node, the test runner, the package manager), in that order of preference.
package.json) before applying any caching, rendering, or middleware guidance from this file. [volatile — verify live] marks apply to: cacheLife built-in profile values (stale/revalidate/expire times — [volatile — verify live]); cacheComponents opt-in flag (introduced v16.0.0; not a default — confirm cacheComponents: true in next.config.ts before assuming PPR or use cache are active; v15 used separate experimental.ppr / experimental.useCache / experimental.dynamicIO flags — [volatile — verify live]); middleware.ts → proxy.ts rename (v16 — [volatile — verify live], check your installed version before renaming); updateTag vs revalidateTag callable contexts (Server Actions only vs Route Handlers — confirm in the installed version's docs); App Store SDK requirements for iOS (advances annually — [volatile — verify live] for the nextjs skill's mobile references).revalidateTag on a high-traffic route); NEXT_SERVER_ACTIONS_ENCRYPTION_KEY rotation; store submissions (iOS/Android).[volatile — verify live] or [opinion — house style].A route is only public when a page.tsx (or route.ts) file exists at the segment. Folders alone
test cases passed, vs 16 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.