hoangnguyen0403/nextjs-app-router
skills/nextjs/nextjs-app-router/SKILL.md
Configure file-system routing with nested layouts, route groups, parallel routes, and error boundaries in Next.js App Router. Use when creating page routes, adding loading/error states, or organizing routes with groups and dynamic segments.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard nextjs-app-routerInstall 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 19, 2026, 3:41 AM288.5s4 files scanned
SKILL.md
- name:
- nextjs-app-router
- description:
- Configure file-system routing with nested layouts, route groups, parallel routes, and error boundaries in Next.js App Router. Use when creating page routes, adding loading/error states, or organizing routes with groups and dynamic segments.
Priority: P0 (CRITICAL)
Workflow: Add New Route
- Create page — Add
app/dashboard/page.tsxas Server Component. - Add layout — Create
app/dashboard/layout.tsxreturning{children}. - Add loading state — Create
app/dashboard/loading.tsxfor Suspense boundary. - Add error boundary — Create
app/dashboard/error.tsxwith'use client'andresetprop. - Await async APIs — In Next.js 15+,
await params,cookies(),headers().
Route Group Example
See implementation examples
Implementation Guidelines
Routing Architecture
- Structure: Use
app/directory. Define routes withapp/dashboard/layout.tsxreturning{children}; shared UI nests insideapp/layout.tsxautomatically. Handle states withloading.tsx,error.tsx, andnot-found.tsx. - Segments: Organize features with Route Groups (brackets
(auth)) to excluded from URL path. Use Dynamic Routes (brackets[slug]) and define static paths viagenerateStaticParams. - Specialized: Use Parallel Routes (
@modal) by adding slot to parent layout and providingdefault.tsxfallback. Use Intercepting Routes ((.)route) for advanced layouts like dashboards.
Data & Functions
- Next.js 15+ Async: Always
awaitparams: Promise,searchParams,cookies(), andheaders(). - Security: Use
middleware.tsfor edge-side authentication and redirection. Ensure all Route Handlers (route.ts) secured with appropriate auth checks. - RSC: Default to React Server Components (RSC). Only use
'use client'at leaf nodes for interactivity (hooks/events). - Error Boundaries: Create
app/dashboard/loading.tsxto auto-wrap routes in Suspense boundary. Inerror.tsx, use'use client'and providereset: () => voidfunction.
File Conventions
- page.tsx: UI for route.
- layout.tsx: Shared UI wrapping children. Persists across navigation.
- loading.tsx: Suspense boundary for loading states.
- error.tsx: Error boundary (Must Client Component).
- route.ts: Server-side API endpoint.
Structure Patterns
- Route Groups: Use parenthesis
(auth)to organize without affecting URL path. - Private Folders: Use underscore
_libto exclude from routing. - Dynamic Routes: Use brackets
[slug]or[...slug](catch-all).
Best Practices
- RSC Boundaries: Ensure props passed to Client Components serializable. See RSC Boundaries & Serialization.
- Parallel Routes (
@folder): Render multiple pages in same layout. Usedefault.tsxfor fallback. - Intercepting Routes (
(..)folder): Load routes within current layout context. - Colocation: Keep component files, styles, and tests inside route folder.
- Layouts: Use Root Layout (
app/layout.tsx) for<html>and<body>tags. - Self-Hosting Standard
Anti-Patterns
- No unawaited async APIs:
params,cookies(),headers()Promises in Next.js 15+; always await. - No
'use client'at tree root: Place at leaves; keep layouts and pages as Server Components. - No
<html>/<body>in nested layouts: Onlyapp/layout.tsx(root layout) should include them. - No missing
error.tsx: Every route segment needs Client Component error boundary.
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