plugins/aai-stack-nextjs/skills/nextjs-app-router/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/the-answerai/alphaagent-team/blob/main/plugins/aai-stack-nextjs/skills/nextjs-app-router/SKILL.md -a claude-code --skill nextjs-app-routerInstallation paths:
.claude/skills/nextjs-app-router/# Next.js App Router Skill
Patterns for building applications with Next.js App Router.
## File-Based Routing
### Basic Routes
```
app/
├── page.tsx # / (home)
├── about/
│ └── page.tsx # /about
├── blog/
│ └── page.tsx # /blog
├── blog/
│ └── [slug]/
│ └── page.tsx # /blog/:slug
└── shop/
└── [...slug]/
└── page.tsx # /shop/* (catch-all)
```
### Special Files
```
app/
├── layout.tsx # Shared layout
├── page.tsx # Page content
├── loading.tsx # Loading UI
├── error.tsx # Error UI
├── not-found.tsx # 404 UI
├── template.tsx # Re-mount on navigation
├── default.tsx # Parallel route fallback
└── route.ts # API route
```
### Route Groups
```
app/
├── (auth)/ # Group without affecting URL
│ ├── login/
│ │ └── page.tsx # /login
│ └── register/
│ └── page.tsx # /register
├── (dashboard)/
│ ├── layout.tsx # Shared dashboard layout
│ ├── settings/
│ │ └── page.tsx # /settings
│ └── profile/
│ └── page.tsx # /profile
```
## Layouts
### Root Layout
```tsx
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Header />
<main>{children}</main>
<Footer />
</body>
</html>
)
}
```
### Nested Layouts
```tsx
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="dashboard">
<Sidebar />
<div className="content">{children}</div>
</div>
)
}
```
### Parallel Routes
```tsx
// app/layout.tsx with parallel routes
export default function Layout({
children,
modal,
analytics,
}: {
children: React.ReactNode
modal: React.ReactNode // @modal slot
analytics: React.ReactNode // @analytics slot
}) {
return