nextjs-app-router

## Quick Reference

| Convention | File | Purpose |
|------------|------|---------|
| Page | `page.tsx` | Route UI (required for route) |
| Layout | `layout.tsx` | Shared UI (persists across navigations) |
| Loading | `loading.tsx` | Loading UI with Suspense |
| Error | `error.tsx` | Error boundary (must be 'use client') |
| Not Found | `not-found.tsx` | 404 UI |
| Template | `template.tsx` | Re-renders on navigation |

| Pattern | Syntax | Example |
|---------|--------|---------|
| Dynamic Route | `[slug]` | `/blog/[slug]/page.tsx` |
| Catch-all | `[...slug]` | `/docs/[...slug]/page.tsx` |
| Optional Catch-all | `[[...slug]]` | `/shop/[[...slug]]/page.tsx` |
| Route Group | `(name)` | `/(marketing)/about/page.tsx` |
| Parallel Route | `@slot` | `/@analytics/page.tsx` |

## When to Use This Skill

Use for **App Router fundamentals**:
- Setting up new Next.js 15 projects with App Router
- Understanding file-based routing conventions
- Creating layouts that persist across navigation
- Implementing loading states and error boundaries
- Organizing routes with groups

**Related skills:**
- For data fetching: see `nextjs-data-fetching`
- For advanced routing: see `nextjs-routing-advanced`
- For caching strategies: see `nextjs-caching`

---

# Next.js App Router Fundamentals

## Project Structure

### App Directory

```
app/
├── layout.tsx              # Root layout (required)
├── page.tsx                # Home page (/)
├── loading.tsx             # Loading UI
├── error.tsx               # Error boundary
├── not-found.tsx           # 404 page
├── global-error.tsx        # Global error boundary
├── template.tsx            # Re-renders on navigation
│
├── (marketing)/            # Route group (no URL impact)
│   ├── about/
│   │   └── page.tsx        # /about
│   └── contact/
│       └── page.tsx        # /contact
│
├── dashboard/
│   ├── layout.tsx          # Dashboard layout
│   ├── page.tsx            # /dashboard
│   ├── loading.tsx         # Dashboard loading
│   ├── @a