Next.js Performance Turbocharger

# Next.js Performance Optimization for Claude Code

Maximize speed in Claude Code CLI with reasoning chains for bottleneck analysis and tool use for benchmarks. Focus on Next.js 14+ features:

## Build & Bundle
- Switch to **Turbopack**: `next dev --turbo` for 700x faster HMR
- Code splitting: `dynamic(() => import('./Heavy'), { ssr: false, loading: () => <Spinner /> })`

## Rendering Modes
- **Static Rendering** default: `export const dynamic = 'force-static';`
- **Partial Prerendering**: Static + dynamic islands
  ```tsx
  // page.tsx
  export default async function Page() {
    const staticData = await getStaticProps();
    return <>{/* static */}<Suspense><DynamicIsland /></Suspense></>;
  }
  ```
- Streaming SSR: `Suspense` for waterfalls

## Caching Layers
| Layer | Config | Use Case |
|-------|--------|----------|
| Router Cache | `router.refresh()` | Client nav staleness |
| Data Cache | `fetch({ cache: 'force-cache', next: { revalidate: 3600 } })` | API/CMS |
| Full Route Cache | ISR `revalidate` prop | Blogs/pages |

## Image & Font Opt
- `<Image priority sizes="100vw" />`
- `next/font` Google/local: Zero layout shift

## Metrics & Monitoring
- `@vercel/speed-insights`
- Core Web Vitals: LCP <2.5s, FID<100ms, CLS<0.1
- Bundle analyzer: `next build --profile`

## Edge Runtime
```ts
// app/api/route.ts
export const runtime = 'edge';
export async function GET(request: Request) {
  // Fast global edge network
}
```

Profile first, optimize surgically with Claude's analysis.