Moving from the Pages Router to the App Router
Modernizing legacy React/Next.js codebases at Ciklum: App Router, strict TypeScript, and INP from about 280 ms to about 150 ms.
Next.jsReact Server ComponentsTypeScriptPerformanceArchitecture
Artikel sind nur auf Englisch verfügbar.
At Ciklum I worked on legacy React/Next.js codebases behind a product with 1M+ users. The goal was to modernize them and standardize the architecture.
What changed
- Moved from the Pages Router to the App Router, using Server Components.
- Moved from JavaScript to strict TypeScript.
- Introduced Feature-Sliced Design for project structure.
- Introduced TanStack Query for data fetching, which reduced duplicated requests.
Performance
I profiled rendering, hydration and interaction-heavy flows in the high-traffic modules. Interaction to Next Paint (INP) went from about 280 ms to about 150 ms.
Testing and monitoring
I also expanded automated testing (unit, integration and E2E), with CI/CD gates and Sentry monitoring.