nextjs-server-components

nextjs-server-components is a skill for Claude Code, Codex from fusengine/agents. It costs 31 tokens per session (838 once invoked), scanned A, original, MIT.

Guidance for deciding which parts of a Next.js 16 application run on the server and which run in the browser. It covers server-side data loading, streaming, and keeping private code away from client code.

In plain words
What is it for?
Use it when fetching data in components, composing server and client components, adding Suspense streaming, or protecting server-only code.
Why use it?
It helps avoid sending secrets or unnecessary code to browsers and prevents confusing server-and-browser boundary errors. It also supports pages that load data progressively.

Skill for Claude CodeCodex

Part of the fuse-nextjs plugin — 11 skills, 1 agent shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/fusengine/agents/nextjs-server-components
Any agent
npx skills add fusengine/agents --skill nextjs-server-components
Clone the repo
git clone --depth 1 https://github.com/fusengine/agents

Made for: Claude Code, Codex.

Or install fuse-nextjs, the plugin that ships this one along with the rest of its 11 skills, 1 agent.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for nextjs-server-components

README.md
[![agentmods](https://agentmods.dev/badge/skills/fusengine/agents/nextjs-server-components.svg)](https://agentmods.dev/skills/fusengine/agents/nextjs-server-components)
Your own site
<a href="https://agentmods.dev/skills/fusengine/agents/nextjs-server-components"><img src="https://agentmods.dev/badge/skills/fusengine/agents/nextjs-server-components.svg" alt="Measured on agentmods" height="20"></a>
Per session 31 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 838 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00031 $0.00838
Opus 5 $0.00015 $0.00419
Sonnet 5 $0.00006 $0.00168
Haiku 4.5 $0.00003 $0.00084

Measured yesterday against content hash 45ca5be14891, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

nextjs-server-components scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/nextjs-expert/skills/nextjs-server-components/SKILL.md · 86 lines

How it starts

The opening of the file, as written. The whole thing — 86 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Covers composition patterns (passing Server Components as children into Client Components), the server-only package to prevent accidental secret leakage, parallel data fetching with Promise.all(), and caching server computations with use cache. Does not cover Next.js routing/caching APIs generally (nextjs-16) or client-side data-fetching libraries (nextjs-tanstack-query) — this skill is specifically about the server/client component boundary itself.

Next.js Server Components

Server Components are the default rendering model in Next.js 16 with React 19.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

  1. fuse-ai-pilot:explore-codebase - Analyze existing component boundaries
  2. fuse-ai-pilot:research-expert - Verify latest RSC docs via Context7/Exa
  3. mcp__context7__query-docs - Check Next.js 16 RSC patterns

After implementation, run fuse-ai-pilot:sniper for validation.


Overview

When to Use

  • Deciding between Server and Client Components
  • Fetching data directly in components without API routes
  • Implementing streaming and progressive rendering
  • Passing data across the server/client boundary
  • Using async components with direct database access

Why Server Components

Feature Benefit
Zero client JS Components never ship to the browser bundle
Direct data access Query databases, read files without API layer
Streaming Progressive rendering with Suspense boundaries
Automatic code splitting Client Components are lazy-loaded by default
SEO-friendly Full HTML rendered on the server

Read the full file on GitHub · 86 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 86 lines · 31 tokens per session scan A 45ca5be14891

Subscribe to this mod's changes

nextjs-server-components is a skill published in the GitHub repository fusengine/agents (25 stars, last pushed 1mo ago), licensed MIT. It adds 31 tokens to every session and 838 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

obsidian-skill

Controls Obsidian vaults via the official CLI (1.12+). Reads, creates, appends to, and searches notes. Manages daily notes, tasks, tags, properties, templates, bookmarks, and plugins. Analyzes knowledge graph structure including backlinks, orphans, and unresolved links. Triggers on Obsidian, vault, notes, daily notes…

wizzy15/obsidian-skill · 102 tokens

radin-review

Run a thermo-nuclear code quality review over a scope (commit, PR, directory, or a range like "since yesterday") and log each finding as a backlog entry instead of printing to terminal. Use for /radin-review, "review and log to backlog", "audit this commit/PR/directory and file backlog entries", "turn this review into…

shortcuts/radin · 83 tokens

radin-doctor

Check that radin's own install under /.claude is complete and its optional companion tools are reachable. Use for /radin-doctor, "check my radin install", "is radin installed correctly", "radin doctor", "verify radin install".

shortcuts/radin · 62 tokens

radin-uninstall

Remove everything install.sh copied into /.claude -- radin's agent, skills, and lib scripts. Use for /radin-uninstall, "uninstall radin", "remove radin", "tear down radin", "get rid of radin".

shortcuts/radin · 58 tokens

designing-interfaces

Creates a design system for software with a UI. Use when a project has a user interface and architecture is confirmed — whether creating from scratch or extracting patterns from existing code.

isvlasov/rageatc-oss · 39 tokens

managing-product

Extracts product requirements and produces a PRD. Use when a user wants to build software and needs to define what to build before architecture or implementation, when scoping an MVP, or when translating a vague idea into a buildable specification.

isvlasov/rageatc-oss · 52 tokens