next-app-router-patterns
Skill2 starsChanged 8 days agoMITView on GitHub
Next.js App Router patterns for server/client boundary, data fetching and caching, server actions, streaming, parallel and intercepting routes, edge vs node runtime, and review checklist. Use whenever the project contains a `next.config.*`, an `app/` directory with `page`/`layout`/`route` files, or `next` in `package.json`, OR the user asks about the App Router, server and client components, server actions, or route handlers, even if Next.js is not mentioned by name.
In this repository37 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- templates/CLAUDE.mdCLAUDE.md
- auditSkill
- backup-patternsSkill
- bash-patternsSkill
- depsSkill
- django-patternsSkill
- docker-patternsSkill
- drf-patternsSkill
- engineering-fundamentalsSkill
- fastapi-patternsSkill
- git-patternsSkill
- go-patternsSkill
- graphql-patternsSkill
- investigateSkill
- javascript-patternsSkill
- logging-patternsSkill
- referenceSkill
- metaSkill
- monitoring-patternsSkill
- nuxt-patternsSkill
- opentofu-patternsSkill
- prSkill
- python-patternsSkill
- react-patternsSkill
- report-formatSkill
- security-patternsSkill
- slop-patternsSkill
- storybook-patternsSkill
- tailwind-patternsSkill
- test-patternsSkill
- typescript-patternsSkill
- unslopSkill
- vps-provisioningSkill
- vue-patternsSkill
- wcag-auditSkill
- writeSkill
The file
We split this skill into the rules it gives an agent
2 rules. About 0 are common, 0 are distinctive, and 2 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 8
Default assumption: Next.js 16 (current stable as of writing) with the App Router.
- Very specific: line 11
Verify via package.json or lockfile: caching model and cacheComponents flag differ between 15.x and 16.x.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Next.js App Router patterns
Default assumption: Next.js 16 (current stable as of writing) with the App Router. Pages Router patterns are out of scope.
- Cache Components is the new caching model in 16 (opt-in via
cacheComponents: true); the previous caching model is still supported when the flag is off. - Verify via
package.jsonor lockfile: caching model andcacheComponentsflag differ between 15.x and 16.x.
Reference files
| File | Covers |
| reference/anti-patterns.md | Severity-labeled anti-patterns: cache scoping, server/client boundary, streaming errors |
| reference/server-and-client.md | "use client" propagation, server vs client constraints, serialization, server-only |
| reference/caching.md | Cache Components vs previous model, fetch defaults, segment config, revalidation |
| reference/server-actions.md | Server Functions, "use server", form actions, validation, revalidation |
| reference/streaming.md | loading.tsx, <Suspense>, error boundaries, Partial Prerendering |
| reference/routing.md | File conventions, dynamic segments, parallel/intercepting routes, metadata |
| reference/runtime.md | Node vs Edge, Proxy (renamed from Middleware in v16), runtime config |
| reference/client-bundle.md | next/image, next/font, next/dynamic, tree-shaking and bundle audits |
Out of scope
- Pages Router projects (
pages/only, noapp/directory). The patterns differ enough that this skill would mislead. - React projects without Next.js (use the React skill alone).
References
- Next.js docs: https://nextjs.org/docs
- App Router structure: https://nextjs.org/docs/app/getting-started/project-structure
- Caching (Cache Components): https://nextjs.org/docs/app/getting-started/caching
- Caching (previous model): https://nextjs.org/docs/app/guides/caching-without-cache-components
- Server and Client Components: https://nextjs.org/docs/app/getting-started/server-and-client-components
- Mutating Data: https://nextjs.org/docs/app/getting-started/mutating-data
proxy.js: https://nextjs.org/docs/app/api-reference/file-conventions/proxy- Next.js blog: https://nextjs.org/blog
- Lee Robinson (Vercel DX): https://leerob.io/
- Vercel Engineering: https://vercel.com/blog
Version notes
Checked: 2026-09-26 against https://nextjs.org/blog, https://nextjs.org/docs/app/api-reference/file-conventions/proxy and https://nextjs.org/docs/app/guides/upgrading/version-16
- 16.3 (2026-08-03): no guidance change. Proxy runs on Node.js only; a project that needs the Edge runtime keeps
middleware.ts(proxy docs). - 16.0:
middlewarerenamed toproxy(typesNextMiddleware->NextProxy,MiddlewareConfig->ProxyConfig,skipMiddlewareUrlNormalize->skipProxyUrlNormalize); PPR stable and default under Cache Components; one-argumentrevalidateTag(tag)deprecated, pass acacheLifeprofile (upgrade guide; examples fixed 2026-09-26). - 15.0:
fetch()and Route HandlerGETno longer cached by default; 15.5 gave the middleware file stable Node.js runtime support.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.