How do I install the Next Server Patterns skill?

Run npx skillmds@latest add bh611627/next-server-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Next Server Patterns skill do?

Next.js App Router server components, streaming, caching, and client boundaries without guesswork It is listed under Web & Frontend on SkillMD.

Is Next Server Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Next Server Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Next Server Patterns free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Next Server Patterns?

bh611627 (@bh611627) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Next Server Patterns by bh611627 — Agent Skill

Name: Next Server Patterns
Author: bh611627

Instructions

When to Use

Use for RSC, Server Actions, Route Handlers, and client boundaries.
Prefer server-caching-handbook for stampede/tag details.
Prefer next-architecture for whole-app layering decisions.

Guide Next.js App Router layout: Server Components by default, Client only where hooks, browser APIs, or event handlers require it.

Placement cheat sheet

Concern	Put it in
Data read for a page	Server Component / `fetch`
UI event handlers	Client island (`'use client'`)
Same-origin mutation	Server Action (`forms-and-validation`)
External HTTP API	Route Handler (`api-handbook`)
Cache invalidation design	`server-caching-handbook`

Map each route segment: static, dynamic with fetch cache, or force-dynamic - justify in one line each.
Identify client islands: smallest 'use client' files; no client wrapper around entire layouts unless required.
Streaming: propose loading.tsx and Suspense boundaries for slow I/O; avoid waterfalls where parallel is possible.
Data fetching: Server Component fetch cache tags vs unstable_cache / cache - name tradeoffs; no invented Next flags; verify against installed Next.
Metadata: keep in server files; never duplicate head logic in client trees.
React 19+ in Next 15+: prefer useActionState / server-first flows from forms-and-validation; use React.cache for per-request dedupe when appropriate.
User-visible failures: pair with error-loading-not-found - do not catch only in client toasts while the server returns 500 HTML.
Hot paths: tag-based revalidation and stampedes → server-caching-handbook + server-caching-patterns.md.

Outcomes

Boundary diagram (bullet list: server file → client leaf).
Caching table per route.
Copy-paste checklist for code review.

Output Rules

Use headings: Boundaries · Caching · Streaming · Metadata. No full app rewrite unless the user asks.

Scope and boundaries

In scope: App Router RSC patterns, fetch cache, streaming, client split.
Out of scope: Pages Router migration projects, backend DB design, auth secret storage.

Safety

Read-only unless the user requests file edits.
Do not paste real secrets or tokens.

Troubleshooting

Hydration mismatch: client-only state leaking into server HTML.
Stale data: verify revalidatePath / revalidateTag after mutations.
Huge client bundle: list largest imports in client leaves only.
Accidental dynamic: missing cache opts or cookies()/headers() forcing dynamic.

Related skills

server-caching-handbook - tags and stampedes
client-data-fetching - hydrate QueryClient
next-architecture - app-wide boundaries
edge-runtime-handbook - Edge vs Node
forms-and-validation - Server Actions

GitHub: https://github.com/bh611627/skillcodex/tree/main/skills/next-server-patterns/SKILL.md
npm: https://www.npmjs.com/package/@skillcodex/skills

Next Server Patterns

File contents