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-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