>_SkillsHub▋

> nextjs-app-router

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. (triggers: app/**/page.tsx, app/**/layout.tsx, app/**/loading.tsx, App Router, Layout, Route Group, parallel routes)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-app-router?format=md"
SKILL.md•nextjs-app-router

Priority: P0 (CRITICAL)

Workflow: Add a New Route

  1. Create page — Add app/dashboard/page.tsx as a Server Component.
  2. Add layout — Create app/dashboard/layout.tsx returning {children}.
  3. Add loading state — Create app/dashboard/loading.tsx for Suspense boundary.
  4. Add error boundary — Create app/dashboard/error.tsx with 'use client' and reset prop.
  5. Await async APIs — In Next.js 15+, await params, cookies(), headers().

Route Group Example

See implementation examples

Implementation Guidelines

Routing Architecture

  • Structure: Use the app/ directory. Define routes with app/dashboard/layout.tsx returning {children}; shared UI nests inside app/layout.tsx automatically. Handle states with loading.tsx, error.tsx, and not-found.tsx.
  • Segments: Organize features with Route Groups (brackets (auth)) to be excluded from URL path. Use Dynamic Routes (brackets [slug]) and define static paths via generateStaticParams.
  • Specialized: Use Parallel Routes (@modal) by adding the slot to the parent layout and providing a default.tsx fallback. Use Intercepting Routes ((.)route) for advanced layouts like dashboards.

Data & Functions

  • Next.js 15+ Async: Always await the params: Promise, searchParams, cookies(), and headers().
  • Security: Use middleware.ts for edge-side authentication and redirection. Ensure all Route Handlers (route.ts) are 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.tsx to auto-wrap routes in a Suspense boundary. In error.tsx, use 'use client' and provide a reset: () => void function.

File Conventions

  • page.tsx: UI for a route.
  • layout.tsx: Shared UI wrapping children. Persists across navigation.
  • loading.tsx: Suspense boundary for loading states.
  • error.tsx: Error boundary (Must be 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 _lib to exclude from routing.
  • Dynamic Routes: Use brackets [slug] or [...slug] (catch-all).

Best Practices

  • RSC Boundaries: Ensure props passed to Client Components are serializable. See RSC Boundaries & Serialization.
  • Parallel Routes (@folder): Render multiple pages in the same layout. Use default.tsx for fallback.
  • Intercepting Routes ((..)folder): Load routes within current layout context.
  • Colocation: Keep component files, styles, and tests inside the 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() are 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: Only app/layout.tsx (root layout) should include them.
  • No missing error.tsx: Every route segment needs a Client Component error boundary.

> related_skills --same-repo

> common-store-changelog

Generate user-facing release notes for the Apple App Store and Google Play Store by collecting git history, triaging user-impacting changes, and drafting store-compliant changelogs. Enforces character limits (App Store ≤4000, Google Play ≤500), tone, and bullet format. Use when generating release notes, app store changelog, play store release, what's new, or version release notes for any mobile app. (triggers: generate changelog, app store notes, play store release, what's new, release notes, ve

> golang-tooling

Go developer toolchain — gopls LSP diagnostics, linting, formatting, and vet. Use when setting up Go tooling, running linters, or integrating gopls with Claude Code. (triggers: gopls, golangci-lint, golangci.yml, go vet, goimports, staticcheck, go tooling, go lint)

> common-ui-design

Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS). (triggers: build a page, create a component, design a dashboard, landing page, UI for, build a layout, make it look good, improve the design, build UI, create interface, design screen)

> common-owasp

OWASP Top 10 audit checklist for Web Applications (2021) and APIs (2023). Load during any security review, PR review, or codebase audit touching web, mobile backend, or API code. (triggers: security review, OWASP, broken access control, IDOR, BOLA, injection, broken auth, API review, authorization, access control)

┌ stats

installs/wk0
░░░░░░░░░░
github stars452
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#react#typescript
└────────────