Next.js Performance Optimization

Optimize my Next.js application for performance. Here is my current setup:

**Pages:** [LIST_KEY_PAGES — e.g., "landing page, dashboard, product listing with 500+ items"]
**Current issues:** [WHAT_IS_SLOW — e.g., "LCP is 4.2s, layout shift on load, slow dashboard"]
**Data fetching:** [HOW_YOU_FETCH — e.g., "client-side useEffect, getServerSideProps"]

Audit and optimize:

1. **Rendering strategy** — for each page, recommend: Static (SSG), ISR, SSR, or Client, with rationale
2. **Image optimization** — next/image config, sizing, lazy loading, priority hints
3. **Bundle size** — identify common bloat (moment.js, lodash full import) and fix with tree-shaking or alternatives
4. **Data fetching** — move to server components, implement streaming, add suspense boundaries
5. **Caching** — HTTP cache headers, React cache(), unstable_cache, revalidation strategy
6. **Fonts** — next/font optimization, font-display swap, preloading
7. **Third-party scripts** — defer/async, load after interaction, use next/script
8. **Code splitting** — dynamic imports for heavy components, route-based splitting

For each optimization:
- What to change (specific file and code)
- Expected impact on Core Web Vitals (LCP, FID/INP, CLS)
- Implementation effort (Low/Medium/High)

Prioritize by impact × effort ratio. Start with quick wins.