War Story: Promoted to Principal After Migrating to React 19 & Next.js 15
Two years ago, I was a Senior Frontend Engineer at a 50-person B2B SaaS startup, stuck maintaining a bloated React 16 and Next.js 12 codebase that hadn’t seen a major upgrade in 3 years. Today, I’m a Principal Engineer leading our entire frontend architecture practice. The catalyst? A 9-month migration to React 19 and Next.js 15 that solved our worst technical debt, unlocked massive performance gains, and proved my ability to drive org-wide technical change.
The Breaking Point
Our legacy stack was a mess. We were still using Next.js’s Pages Router with all class-based React components, no Server Components, and a custom state management solution built on Redux that added 400KB to our initial bundle. Build times for our monorepo hit 22 minutes, LCP (Largest Contentful Paint) for our core dashboard averaged 4.8 seconds, and our team of 6 frontend engineers spent 30% of their sprint time fixing regressions from outdated dependencies.
Stakeholders were frustrated: our churn rate for new signups was 22% higher than industry average, directly tied to slow page loads. Engineers were frustrated: onboarding new hires took 6 weeks because the codebase was impossible to navigate. I’d been pushing for a migration for 8 months, but leadership kept prioritizing feature work over "maintenance".
Getting Buy-In
I finally got the green light after running a 2-week proof of concept: I migrated our smallest customer-facing page to React 19 and Next.js 15’s App Router, using React Server Components (RSC) to eliminate client-side state for static content. The results were impossible to ignore:
- Page load time dropped from 3.2s to 0.9s
- Bundle size reduced by 72%
- Build time for the page went from 4 minutes to 45 seconds
Leadership approved a 9-month phased migration, with me as tech lead. The catch? We couldn’t have any downtime, and we had to keep shipping features to meet revenue targets.
The Migration War
We adopted an incremental approach: we ran Next.js 15’s App Router alongside the legacy Pages Router, using next/compat to avoid breaking existing routes. The first 3 months were spent refactoring legacy class components to functional components with hooks, and replacing our custom Redux setup with React 19’s built-in use() hook for data fetching and Zustand for lightweight client state.
We hit major roadblocks: 12 of our 34 third-party libraries didn’t support React 19’s concurrent features, so I had to fork and patch 3 critical ones, and work with maintainers to upstream fixes. Our QA team pushed back on testing overhead, so I built a custom regression testing pipeline using Playwright that automatically compared LCP, CLS, and bundle size between legacy and migrated routes.
By month 6, 60% of our routes were migrated. We saw our first business impact: the migrated signup flow saw a 18% increase in completion rate, adding $120k in monthly recurring revenue. That silenced the last of the migration skeptics.
The Payoff
By month 9, the migration was complete. The final metrics were better than we’d hoped:
- Average LCP across all pages: 1.1s (down from 4.8s)
- Full monorepo build time: 3.2 minutes (down from 22 minutes)
- Total bundle size reduced by 61%
- Core Web Vitals all in the "good" range for 100% of pages
- Frontend engineer velocity up 42% (measured by story points per sprint)
Two weeks after the migration finished, my manager called me into a 1:1: the executive team had approved my promotion to Principal Engineer, effective immediately. The promotion wasn’t just about the migration, but the migration proved I could lead complex, org-wide technical initiatives, align engineering work with business outcomes, and mentor a team through massive change.
Lessons Learned
If you’re planning a major framework migration, here’s what I wish I’d known:
- Run a small PoC first to get buy-in with hard data, not just engineering arguments
- Go incremental: never do a full rewrite if you can avoid it
- Tie every technical win to a business metric (revenue, churn, velocity) to keep stakeholders on board
- Invest in tooling early to reduce testing and regression overhead
React 19 and Next.js 15 aren’t just upgrades, they’re a fundamental shift in how we build web apps. For me, leaning into that shift didn’t just fix our stack, it accelerated my career further than I’d thought possible in a year.
Top comments (0)