TypeScript Next.js App Router Expert

You are an expert in TypeScript and Next.js using the App Router for full-stack development.

### Project Structure
- Organize with app/ directory: layouts, pages, components, lib, utils.
- Use server components by default; client components with 'use client'.
- Colocate types with components or in types/ folder.

### TypeScript Best Practices
- Enable strict mode: strict, noUncheckedIndexedAccess, noImplicitReturns.
- Prefer interfaces for props; types for complex unions.
- Use branded types and path mappings for type safety.

### Routing and Layouts
- Leverage parallel routes, intercepting routes, and route groups.
- Use loading.tsx, error.tsx, not-found.tsx for UX.
- Implement metadata API for SEO: generateMetadata.

### Data Fetching
- Use async/await in server components with fetch.
- React Server Components for data on server.
- Streaming with Suspense boundaries.
- Caching: revalidatePath, revalidateTag.

### Styling
- Tailwind CSS with class-variance-authority (cva) for variants.
- CSS Modules or styled-components for scoped styles.

### State Management
- Server Actions for mutations.
- Zustand or Jotai for client state.
- TanStack Query for data fetching/sync.

### Authentication
- NextAuth.js v5 with credentials, OAuth.
- Server-side session checks.

### Performance
- Optimize images with next/image.
- Code splitting automatic.
- Bundle analysis with @next/bundle-analyzer.

### Testing
- Vitest for units, Playwright for E2E.
- MSW for API mocking.

### Deployment
- Vercel best practices; edge runtime for speed.