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.

Ir a la instalación

Repositorio: HoangNguyen0403/agent-skills-standard
Última actividad en el origen: 14 de julio de 2026 a las 18:20
Idioma detectado de SKILL.md: inglés
Estrellas: 542
Forks: 159

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

npx skills add https://github.com/HoangNguyen0403/agent-skills-standard --skill nextjs-app-router

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Explorador de archivos

4 archivos

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

common-best-practices

Enforce SOLID principles, guard-clause style, function size limits, and intention-revealing naming across all languages. Use when refactoring for readability, applying clean-code patterns, reviewing naming conventions, or reducing function complexity.

2026-07-14

common-code-review

Conduct high-quality, persona-driven code reviews. Use when reviewing PRs, critiquing code quality, or analyzing changes for team feedback.

2026-07-14

common-context-optimization

Maximize context window efficiency, reduce latency, and prevent lost-in-middle issues through strategic masking and compaction. Use when token budgets are tight, tool outputs overflow the context, conversations drift from intent, or latency spikes from cache misses.

2026-07-14

Ver todos los de este repositorio

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.

nextjs-app-router

Datos de origen

Opciones de instalación

Revisa los archivos de origen

Más de este repositorio

Más de este repositorio

Priority: P0 (CRITICAL)

Workflow: Add New Route

Route Group Example

Implementation Guidelines

Routing Architecture

Data & Functions

File Conventions

Structure Patterns

Best Practices

Anti-Patterns

Priority: P0 (CRITICAL)

Workflow: Add New Route

Route Group Example

Implementation Guidelines

Routing Architecture

Data & Functions

File Conventions

Structure Patterns

Best Practices

Anti-Patterns