Auping is known for its headless e-commerce setup and international presence. I joined the project in a later phase of that journey to help re-architect the customer-facing frontend and bring the application in line with newer Next.js patterns. The goal was not just to upgrade the framework, but to leave the codebase in a better shape for the team working on it afterwards.
Together with a colleague, I worked on migrating and rebuilding the storefront from Next.js 12 with the Pages Router to Next.js 15 using the App Router. That shift affected almost every part of the application, from routing and layouts to data fetching and component boundaries. A large part of the work involved rethinking older patterns, replacing deprecated APIs, and reducing technical debt so the platform would be easier to maintain over time.
Project Focus
The project centred on rebuilding the frontend around the App Router and modern Next.js conventions. That meant moving away from a structure that had grown around older framework decisions and reshaping it into something more modular, predictable, and easier to extend. It also meant being careful with existing business-critical flows, because the migration could not come at the cost of stability.
A big part of the work was architectural rather than visual. The migration touched routing, rendering strategy, data access, and shared components, so each decision had consequences elsewhere in the application. That made it important to treat the project as a full re-architecture rather than a version bump.
What I worked on
One of the main pieces was restructuring the application from the old pages directory to the new app directory. This involved reworking layouts, nested routes, and the relationship between server and client components. The aim was to make the structure easier to reason about and better aligned with how modern Next.js applications are expected to work.
At the same time, I helped modernise the data layer. Existing fetching logic had to be reviewed and adjusted to fit async server components, updated caching behaviour, and newer rendering patterns. Where APIs and GraphQL integrations had grown inconsistent over time, we worked to make them more predictable and easier to reuse across the codebase.
There was also a substantial amount of component work. Some parts of the UI could be adapted to the new architecture with relatively small changes, while others needed a more complete rewrite. This included the store finder, navigation, and responsive content areas. Throughout that process, I focused on keeping the frontend responsive, maintainable, and consistent across devices and locales.
Delivery
Because this was a live commerce platform, rollout had to be handled carefully. I was involved in testing, regression checks, and the gradual introduction of the new structure to reduce risk. That included working closely with others on the project to surface edge cases early and make sure important customer journeys remained reliable during the migration.
This kind of work is often less visible than building new features, but it has a direct impact on how confidently a team can keep developing a platform. Cleaning up architecture, reducing friction, and improving the baseline for future work was a big part of the value of the project.
Outcome
The result was a frontend better aligned with current Next.js practices and easier to work on going forward. As part of Youwe’s broader engagement with Auping, spanning Drupal, Adobe Commerce, and UX, the platform delivered substantial commercial results: eCommerce revenue grew 480%, average order value increased 85%, organic traffic rose 105%, and Google search rankings improved 300%. Store appointments driven by CRO work increased 47%, with a single A/B test on Auping Plaza achieving a 41% conversion rate increase. The migration created a more solid foundation for future development and helped prepare Auping’s storefront for continued international growth.
See Youwe’s official case study for further details.