nextjs-app-router

# Next.js App Router Skill Expert assistance for implementing Next.js App Router with advanced routing patterns and conventions. ## Capabilities - Design app directory structure with route groups - Implement parallel and intercepting routes - Configure layouts, templates, and loading states - Set up error boundaries and not-found pages - Implement streaming with Suspense - Configure route handlers for API endpoints ## Usage Invoke this skill when you need to: - Structure app directory for complex routing - Implement modal routes with interception - Create parallel route layouts - Configure streaming and loading states - Build API route handlers ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | routeType | string | Yes | page, layout, route, loading, error | | routePath | string | Yes | Route path in app directory | | features | array | No | parallel, intercept, group | | streaming | boolean | No | Enable streaming with Suspense | ### Configuration Example ```json { "routeType": "page", "routePath": "/dashboard/analytics", "features": ["parallel", "loading"], "streaming": true } ``` ## Route Structure Patterns ### Route Groups ``` app/ ├── (auth)/ │ ├── login/ │ │ └── page.tsx │ ├── register/ │ │ └── page.tsx │ └── layout.tsx # Auth-specific layout ├── (dashboard)/ │ ├── analytics/ │ │ └── page.tsx │ ├── settings/ │ │ └── page.tsx │ └── layout.tsx # Dashboard...