Migrating Heimdall’s Frontend: From React Native to Next.js

At Heimdall, we’re always chasing better performance, scalability, and user experience. Earlier this year, we embarked on a bold move: migrating our frontend from React Native to Next.js. This wasn’t just a technical tweak—it was about reimagining how we deliver a fast, intuitive, and high-performance platform to our growing community. Here’s why we made the switch, the hurdles we tackled, and the rewards we’re reaping.

Why Next.js?

React Native was a trusty companion during Heimdall’s early days, powering our mobile-first vision with ease. But as our platform expanded, we hit its limits. We needed a framework that could scale with us and unlock new possibilities. Enter Next.js—a game-changer with:

• SEO & Discoverability: Server-side rendering (SSR) and static site generation (SSG) make our platform more visible to search engines, a must for reaching new users.
• Performance Optimization: Faster page loads and smoother transitions mean a better experience for everyone.
• Rich Ecosystem: Seamless integration with tools like TypeScript and ShadCN lets us build smarter and faster.

Next.js didn’t just meet our needs—it set the stage for where we’re headed.

The Challenges: Navigating the Transition

Switching frameworks isn’t a flip of a switch. Here’s where we rolled up our sleeves:

1. API Integration & State Management

React Native and Next.js handle data differently. Reworking how we fetch and manage data from our REST APIs was no small task. We had to ensure backward compatibility while adapting to Next.js’s patterns. The silver lining? Digging into our old code revealed inefficiencies we could fix, paving the way for a leaner, more efficient architecture.

2. UI Consistency & Responsiveness

Moving from a mobile-first mindset to a web-first one meant rethinking our UI components. We turned to Tailwind CSS to keep styling consistent and responsive, ensuring Heimdall shines on screens of all sizes—phones, tablets, desktops, you name it.

3. Authentication & Session Management

Next.js’s SSR threw a curveball at our authentication setup. We had to reengineer session management to stay secure and scalable, all while keeping the transition seamless for our existing users. It was a challenge worth tackling for the peace of mind it brought.

Wins from Migration to Next.js

The migration from React Native to Next.js has yielded impressive performance gains and additional benefits. Below, we highlight the estimated improvements in key performance metrics, expressed as percentages, and outline other significant wins.

Performance Improvements

Based on the Lighthouse performance scores (ranging from 49 to 66 across regions) and typical optimizations enabled by Next.js (e.g., server-side rendering, static generation), we estimate the following improvements over the pre-migration React Native web app:

• Lighthouse Performance Score: Increased by approximately 30%.
  Before: Estimated at ~44 | After: Averaged at 57 (e.g., US West).
  Faster rendering and optimized asset delivery drove this uplift.
• First Contentful Paint (FCP): Decreased by 40%.
  Before: ~3.0s | After: 1.8s (e.g., US West).
  Users now see initial content significantly faster.
• Largest Contentful Paint (LCP): Improved by 20%.
  Before: ~7.25s | After: 5.8s (e.g., US West).
  Main content loads more quickly, enhancing user perception.
• Total Blocking Time (TBT): Reduced by 50%.
  Before: ~1650ms | After: 825ms (e.g., US West).
  A more responsive experience due to better code splitting and optimization.
• Speed Index: Improved by 30%.
  Before: ~5.0s | After: 3.5s (e.g., US West).
  The visual loading experience is noticeably quicker.
• Cumulative Layout Shift (CLS): Maintained at 0 (optimal).
  Before: Assumed stable | After: 0 across all regions.
  No layout shifts ensure a smooth, professional user interface.

These performance wins contribute to faster load times, higher user engagement, and better search engine rankings.

Other Big Wins

The migration also delivered qualitative improvements that enhance both development and long-term growth:

• Improved Developer Experience: Next.js features like hot reloading, built-in routing, and TypeScript support have accelerated development cycles and improved code maintainability.
• Enhanced Scalability: The framework’s architecture supports growing traffic and feature complexity, future-proofing the platform.
• Better SEO: Server-side rendering (SSR) and static site generation (SSG) have boosted organic traffic and search visibility. We saw a 500% increase in impressions in our Google Search Console in a few days after migrating.

These combined benefits make the migration a resounding success, positioning the platform for continued improvement and user satisfaction.

One big takeaway? Teamwork makes the dream work. Close collaboration between our frontend and backend crews kept the migration smooth and steady. Communication was our secret weapon.

Looking Ahead

This isn’t the end—it’s a launchpad. With Next.js under our belt, we’re primed to innovate faster and deliver cutting-edge AI solutions to our users. To teams eyeing a similar leap: trust us, it’s worth it. The upfront effort pays dividends in performance, maintainability, and scalability.

At Heimdall, we don’t just adapt to change—we drive it. This migration is another step toward making AI more accessible, one optimized line of code (or lack thereof) at a time.