Rebuilding Flügger's webshop on Next.js 16
Flügger · Frontend Lead · 2025 – present · Launching Q4 2026
Leading the frontend of a multi-market replatforming from Nuxt 2 to Next.js 16 and React 19. Under stress testing the new platform performs ~40% better than the legacy app, and unit-test coverage from near zero to ~80%.
- ~40%better than the legacy app under stress testing
- ~80%unit-test coverage, up from near zero
- 7European markets from one codebase
Context
Flügger, the Danish paint brand, runs B2C and B2B webshops across seven European markets. The B2C webshop ran on Nuxt 2 and Vue 2, a stack at the end of its life, with almost no automated tests.
Novicell is rebuilding it on Next.js 16 and React 19 in the same Turborepo monorepo as the newer B2B webshop, so both share a component library, typed API clients, configuration and conventions.
My role
I took over as Frontend Lead when the previous lead left. I own the frontend architecture and technical decisions, refine the work with the team, break the migration into deliverable tasks, and guide four frontend developers through implementation and review, while writing code myself.
Architecture
- React Server Components by default; client components only where interaction needs them, each with a stated reason.
- A three-layer data path: generated, typed OpenAPI clients; a factory that adds market headers, logging and cache lifetimes; and server-only hooks that pages call. Pages never talk to an API directly.
- Per-request de-duplication with React's cache(), revalidation-based caching for content, and server actions with tag revalidation for changes such as the basket.
- Code organized by business domain (catalog, basket, checkout, search and so on), mirroring the B2B webshop so patterns and reviewers carry over.
- One codebase for seven European markets, with the market resolved per request.
Quality
- Unit-test coverage from near zero to ~80%, with Vitest and Testing Library, reported to SonarQube with a quality gate in the Azure DevOps pipeline.
- Accessibility rules are part of the definition of done (one h1 per page, alt text, keyboard reachability, visible focus, touch-target size), backed by an accessibility audit in CI.
- Playwright end-to-end tests, Lighthouse audits and container image scans run in the delivery pipeline, and dependencies are kept current.
AI-assisted, human-reviewed
The migration runs on a structured AI workflow I designed: layered agent instructions, a status table per business domain, plan-first design documents, and agents for legacy feature-parity checks, code quality and tests. Every AI-generated change goes through the same human review as any other.
Results so far
Under stress testing the new platform performs ~40% better than the legacy application, and unit-test coverage from near zero to ~80%. The launch is planned for Q4 2026.
Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS v4
- next-intl
- Zustand
- Vitest
- Testing Library
- Playwright
- Turborepo
- OpenAPI
- SonarQube
- Azure DevOps
- Docker