hoangnguyen0403/nextjs-server-components
skills/nextjs/nextjs-server-components/SKILL.md
Build async React Server Components and place 'use client' boundaries at leaf nodes for interactivity in Next.js App Router. Use when deciding RSC vs Client Component, composing server data into client wrappers, or fixing hydration errors.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard nextjs-server-componentsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 20, 2026, 3:04 AM133.4s4 files scanned
SKILL.md
- name:
- nextjs-server-components
- description:
- Build async React Server Components and place 'use client' boundaries at leaf nodes for interactivity in Next.js App Router. Use when deciding RSC vs Client Component, composing server data into client wrappers, or fixing hydration errors.
Server & Client Components
Priority: P0 (CRITICAL)
[!WARNING] If project uses
pages/directory instead of App Router, ignore this skill entirely.
App Router uses React Server Components (RSC) by default.
Workflow: Add Server/Client Component Split
- Default to RSC — Async Server Components for data fetching.
- Push
'use client'to leaves — Interactive leaf nodes only (Button, Form, Chart). Keep layouts/pages as Server Components to maximise RSC benefits. - Compose via children — Pass Server Components as
childrento Client Components. - Serialize props — Server-to-Client props must be serializable (no functions, Dates, or Classes).
- Guard secrets — Import
server-onlyin modules with sensitive logic.
Composition Pattern Example
See implementation examples
Implementation Guidelines
- Async RSCs: Fetch directly in async Server Components —
await db.queries,await paramsfor route segments. - Data Fetching:
fetchwithcache: 'no-store'orrevalidate: 0opts out of static rendering. - Streaming: Wrap slow async components in
<Suspense>. Useloading.tsxfor route-level skeletons. - Hydration: Server sends HTML + RSC payload; client hydrates only Client Components. Server Components: zero JS in client bundle.
- Server-in-Client: Cannot import Server Component into Client Component.
- Fix: Pass as
childrenprop. See Composition Example.
Anti-Patterns
- No secrets in Client Components: Use
server-onlypackage to prevent accidental bundling. - No full DB objects passed to client: Minimize serialized props; pass IDs when possible.
- No
useState/useEffectin Server Components: These Client Component-only hooks. - No
'use client'at tree root: Push boundary to leaf components.
References
- Server/Client Composition Example
Related Skills
hoangnguyen0403/common-software-requirements
development
VerifiedTrustedCommunity
Standardize SRS and FRS specifications for technical behavior, interfaces, data contracts, quality constraints, and verification mapping. Use when writing SRS, functional specification, system behavior requirements, API/data contracts, or non-functional thresholds.
503SKILL.mdUpdated May 23, 2026
hoangnguyen0403/common-business-requirements
development
VerifiedTrustedCommunity
Standardize BRD and BRD-lite discovery for business goals, stakeholder impact, current-to-future state, and measurable value outcomes. Use when creating BRD, business case, project justification, ROI narrative, or AS-IS to TO-BE scope.
503SKILL.mdUpdated May 23, 2026
hoangnguyen0403/common-tdd
development
VerifiedTrustedCommunity
Implements a strict Red-Green-Refactor loop to ensure zero production code is written without a prior failing test. Use when: creating new features, fixing bugs, or expanding test coverage.
503SKILL.mdUpdated May 10, 2026
hoangnguyen0403/common-product-requirements
testing
VerifiedTrustedCommunity
Standardize PRD discovery and drafting for product scope, user outcomes, requirement IDs, and acceptance criteria. Use when creating PRD, product requirements, feature specification, or acceptance criteria plan.
503SKILL.mdUpdated May 10, 2026