B2B commerce · Technical lead · Client details withheld
Modernising a legacy commerce platform with Next.js.
A Next.js migration for a catalogue of approximately 60,000 products that lifted Lighthouse performance from the low 40s to above 80 and cut typical page loads to under one second.
- Role
- Frontend architecture, migration planning and technical delivery across three to four developers
- Technology
- React 18 · Next.js 14 · .NET APIs · Redux · Azure
01 / Background
Context
The commerce platform served approximately 60,000 products through a legacy NopCommerce MVC storefront. Ordering, persistent baskets and organic product discovery were business-critical, but the tightly coupled server-rendered application made frontend changes slow and limited future product development.
02 / Constraints
Constraint
The migration had to preserve feature parity, long-running customer baskets and search visibility while continuing to use proven backend services. Every legacy capability needed to be audited and deliberately retained, replaced or improved rather than disappearing during a visual rewrite.
03 / Change
Before / after
A server-rendered MVC storefront required full-page round-trips, scored in the low 40s in Lighthouse and coupled frontend progress to the legacy application.
A server-rendered Next.js storefront combined fast client-side interactions, database-backed Redux basket persistence and product-level SEO with established backend services.
04 / Architecture
System design
- 01
Next.js storefront
Server-rendered product journeys, reusable UI and structured SEO
- 02
State + service layer
Redux basket persistence, server fetches and client-side Axios calls
- 03
Existing services + Azure
.NET business capability, API caching, CDN delivery and YAML deployment
05 / Decisions
Technical decisions
- 01
Decouple the product interface
Separate the frontend from the legacy application while continuing to use backend services that already worked reliably.
- 02
Preserve long customer journeys
Back Redux basket state with database persistence so faster client interactions did not make extended purchasing journeys fragile.
- 03
Build in performance and SEO
Reduce JavaScript, optimise images, cache API requests and add semantic metadata and structured data as part of the implementation.
- 04
Audit feature parity
Review the legacy site and migration backlog capability by capability so every business function was retained, replaced or consciously improved.
06 / Leadership
My contribution
I designed the frontend architecture and migration plan, led delivery across three to four developers, organised work around product, basket and pricing capabilities, reviewed the migration backlog and owned deployment through an Azure DevOps YAML pipeline to Azure App Service.
07 / Results
Outcome
The new storefront supported approximately 60,000 products, raised Lighthouse performance from the low 40s to above 80 and reduced typical page loads to under one second while preserving basket journeys, feature coverage and product-level SEO.