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