Next.js App Router

# Next.js App Router

## File conventions
- `app/page.tsx` route UI
- `app/layout.tsx` shared layout (must render children)
- `app/loading.tsx` Suspense fallback
- `app/error.tsx` error boundary ('use client' required)
- `app/not-found.tsx` 404
- `app/route.ts` API route handler

## Server vs Client
- Default: Server Component. Can be async, fetch data directly, access env, no hooks.
- Add `'use client'` at the top only when you need: state, effects, event handlers, browser APIs.
- Keep client components as leaves; pass server data down as props.

## Data fetching
```ts
// Server component
async function Page() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 },     // ISR
    // cache: 'no-store',         // SSR
    // cache: 'force-cache',      // SSG (default)
  })
  const data = await res.json()
  return <pre>{JSON.stringify(data)}</pre>
}
```

## Route handlers
```ts
// app/api/items/route.ts
import { NextRequest, NextResponse } from 'next/server'
export async function GET(req: NextRequest) {
  return NextResponse.json({ ok: true })
}
```

## Dynamic segments
`app/posts/[slug]/page.tsx` -> `params: { slug: string }`

## Server Actions
```ts
'use server'
export async function createItem(formData: FormData) { /* ... */ }
```