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-operator-profile
testing
VerifiedTrustedCommunity
Infer the requesting operator's technical fluency from message content (never ask directly) and adapt register — business, hybrid, or technical — across SDLC workflow output. Use when starting sdlc, brainstorm-feature, plan-feature, verify-work, publish-notes, or session-report, or whenever a request's phrasing signals a non-technical or cross-stack operator.
524SKILL.mdUpdated Jul 12, 2026
hoangnguyen0403/database-transactions
documentation
VerifiedTrustedCommunity
Define transaction boundaries, locking, and consistency guarantees for multi-step writes. Use when designing atomic operations, retries, idempotency, or concurrent write behavior.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-schema-design
development
VerifiedTrustedCommunity
Design relational or document schemas from access patterns, cardinality, and lifecycle. Use when modeling entities, choosing embed vs normalize, or shaping schema boundaries before implementation.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-query-performance
data-ai
VerifiedTrustedCommunity
Diagnose database latency with explain plans, index ownership, and query-shape review. Use when a query is slow, an index is missing, or scans and N+1 patterns appear.
524SKILL.mdUpdated Jun 19, 2026