Run any Skill in Manus with one click

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.

Run Skill in Manus

Stars504

Forks148

UpdatedApril 22, 2026 at 05:23

Source

HoangNguyen0403

HoangNguyen0403/agent-skills-standard

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

File Explorer

4 files

SKILL.md

readonly

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.
metadata	{"triggers":{"files":["app//page.tsx","app//layout.tsx","app/**/loading.tsx"],"keywords":["App Router","Layout","Route Group","parallel routes"]}}

Priority: P0 (CRITICAL)

Workflow: Add New Route

Create page — Add app/dashboard/page.tsx as Server Component.
Add layout — Create app/dashboard/layout.tsx returning {children}.
Add loading state — Create app/dashboard/loading.tsx for Suspense boundary.
Add error boundary — Create app/dashboard/error.tsx with 'use client' and reset prop.
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 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 excluded from URL path. Use Dynamic Routes (brackets [slug]) and define static paths via generateStaticParams.
Specialized: Use Parallel Routes (@modal) by adding slot to parent layout and providing default.tsx fallback. Use Intercepting Routes ((.)route) for advanced layouts like dashboards.

Data & Functions

Next.js 15+ Async: Always await params: Promise, searchParams, cookies(), and headers().
Security: Use middleware.ts for 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.tsx to auto-wrap routes in Suspense boundary. In error.tsx, use 'use client' and provide reset: () => void function.

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 _lib to 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. Use default.tsx for 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: Only app/layout.tsx (root layout) should include them.
No missing error.tsx: Every route segment needs Client Component error boundary.

More from this repository

same repository

common-business-requirements

HoangNguyen0403/agent-skills-standard

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.

2026-05-25504

common-product-requirements

HoangNguyen0403/agent-skills-standard

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.

2026-05-25504

common-software-requirements

HoangNguyen0403/agent-skills-standard

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.

2026-05-25504

brainstorm-feature

HoangNguyen0403/agent-skills-standard

Clarify a rough product or engineering idea into a BRD-lite brief (Why) with measurable business value.

2026-05-25504

design-solution

HoangNguyen0403/agent-skills-standard

Turn an approved PRD or implementation goal into SRS/FRS technical requirements (How), architecture, contracts, and verification decisions.

2026-05-25504

plan-feature

HoangNguyen0403/agent-skills-standard

Plan a feature from BRD-lite brief or clear intent into PRD (What), decisions, implementation plan, and task slices.

2026-05-25504

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.
metadata	{"triggers":{"files":["app//page.tsx","app//layout.tsx","app/**/loading.tsx"],"keywords":["App Router","Layout","Route Group","parallel routes"]}}

Priority: P0 (CRITICAL)

Workflow: Add New Route

Create page — Add app/dashboard/page.tsx as Server Component.
Add layout — Create app/dashboard/layout.tsx returning {children}.
Add loading state — Create app/dashboard/loading.tsx for Suspense boundary.
Add error boundary — Create app/dashboard/error.tsx with 'use client' and reset prop.
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 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 excluded from URL path. Use Dynamic Routes (brackets [slug]) and define static paths via generateStaticParams.
Specialized: Use Parallel Routes (@modal) by adding slot to parent layout and providing default.tsx fallback. Use Intercepting Routes ((.)route) for advanced layouts like dashboards.

Data & Functions

Next.js 15+ Async: Always await params: Promise, searchParams, cookies(), and headers().
Security: Use middleware.ts for 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.tsx to auto-wrap routes in Suspense boundary. In error.tsx, use 'use client' and provide reset: () => void function.

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 _lib to 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. Use default.tsx for 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: Only app/layout.tsx (root layout) should include them.
No missing error.tsx: Every route segment needs Client Component error boundary.