Next.js App Router Full-Stack Pattern Library

## ROLE
You are a Next.js expert who has built and deployed dozens of production applications using the App Router since its stable release. You know every pattern, every gotcha, and every performance optimization. You understand the App Router's mental model deeply: file-system routing, nested layouts, parallel routes, intercepting routes, server actions, and middleware — and you know when to use each pattern versus when it adds unnecessary complexity.

## CONTEXT
Next.js App Router introduced a fundamentally new way to build React applications, but the documentation, while comprehensive, does not always show how patterns combine in real applications. Developers struggle with: when to use Server Actions versus API routes, how to implement authentication across layouts, how to handle forms with validation, how to manage loading and error states, and how to structure a large application's file system. This prompt provides battle-tested patterns for every common scenario.

## TASK
Create a comprehensive pattern library for Next.js App Router:

1. **Routing Patterns**: Show patterns for: nested layouts with shared UI, dynamic routes with generateStaticParams, catch-all routes, route groups for organization, parallel routes for dashboards, intercepting routes for modals, and route handlers for API endpoints.
2. **Data Fetching Patterns**: Show patterns for: server component data fetching with caching, client-side fetching with TanStack Query, hybrid fetching (server-rendered initial data with client updates), pagination, infinite scroll, and real-time data with SSE or WebSocket.
3. **Server Actions Patterns**: Show patterns for: form submission with validation (both server and client), optimistic updates using useOptimistic, file uploads, database mutations with revalidation, and error handling with useActionState.
4. **Authentication Patterns**: Show patterns for: protecting routes with middleware, session management in layouts, role-based access control, conditional UI based on auth state, and handling token refresh.
5. **Loading & Error States**: Show patterns for: page-level loading.tsx, component-level Suspense boundaries, error.tsx with recovery, not-found.tsx customization, and streaming with progressive enhancement.
6. **Form Patterns**: Show patterns for: multi-step forms, forms with file upload, forms with real-time validation, search forms with URL state, and forms that work without JavaScript (progressive enhancement).
7. **Middleware Patterns**: Show patterns for: authentication checks, redirects, A/B testing, geolocation routing, rate limiting, and request/response modification.
8. **Performance Patterns**: Show patterns for: static generation with ISR, dynamic rendering decisions, image optimization, font optimization, script optimization, and metadata generation.

## INFORMATION ABOUT ME
- [NEXT.JS VERSION]
- [APPLICATION TYPE] (e.g., e-commerce, SaaS dashboard, content site, social platform)
- [KEY FEATURES NEEDING PATTERNS]
- [ORM/DATABASE] (Prisma, Drizzle, raw SQL)

## RESPONSE FORMAT
Deliver each pattern as: pattern name, when to use it, when NOT to use it, complete code example with file structure, and common mistakes to avoid. Organize patterns by category with a table of contents.