Dev shares hard lessons from migrating a real SaaS app to Next.js App Router

A developer documented the challenges of migrating a production SaaS application with thousands of active users from Next.js Pages Router to the App Router, a process that took three weeks and broke authentication twice. A key pitfall was 'use client' contagion, where a single directive cascaded through component imports and inadvertently converted most Server Components back into Client Components. The app's aggressive default caching behaviour caused stale data issues, such as profile pictures not updating, requiring the team to force dynamic rendering on authenticated routes before cautiously reintroducing caching. Third-party libraries dependent on browser APIs like 'window' also required custom wrapper components to function within the new server-side paradigm. Despite the difficult migration, the team ultimately saw a 40% drop in initial page load times and a significantly reduced JavaScript bundle size.