Web Development · 01/10

Client websites

Production business websites, most migrated to Next.js and shipped fast.

Role: Sole engineer.
Timeline: 2024–present
Stack: Next.js 14 (App Router, static) · TypeScript · Tailwind · Framer Motion · Vercel
Status: Delivered

Illustrative — a code editor open on a Next.js project.

[ The set ]

12 sites, one playbook.

Every one live, and every one with its own write-up — sector, region, what the build involved and the URL.

Home page: aerial photography of a completed housing development behind a bold three-word masthead.

01Construction & developmentHertfordshireA twenty-year-old contractor with award-winning developments behind them had a site that undersold every one of them — the work…Read the case study→

Home page: service-led hero with the Gas Safe rating surfaced beside the primary call to action.

02Plumbing & heatingHertfordshire & LondonA Gas Safe firm with a strong review history had no way to show it. The rating sat on a testimonials page nobody reached, whilst…Read the case study→

Home page: dark hero with the four services split into their own routes in the navigation.

03Commercial roofingNorth West EnglandA contractor selling four distinct services — roofing, cladding, scaffolding and emergency call-out — had them stacked on one…Read the case study→

Home page: technical services list structured into scannable sections for main contractors.

04Construction supportLondon & South EastA specialist selling drilling, demolition, structural alteration and passive fire protection to main contractors — a technical…Read the case study→

Home page: emergency call-out number and pricing surfaced at the top of the page.

05Boiler repair & servicingLondon & HertfordshireAn emergency trade where the customer is cold, in a hurry, and comparing three firms on price. Anything that delays the number or…Read the case study→

Home page: structured enquiry routes replacing the unstructured email the practice relied on.

06Bookkeeping practiceNorth West EnglandA practice whose enquiries arrived as unstructured email, from an audience that mostly cannot say what it needs — most people do…Read the case study→

Home page: product explanation of cloud CCTV against traditional installers.

07Cloud CCTV platformUKA technical product sold against traditional installers. The site has to explain what cloud CCTV is and why it beats a box on a…Read the case study→

Home page: engineering services for studios and labels, written for an engineering audience.

08Games & music technologyInternationalA studio selling engineering services to other studios and labels. The audience is engineers, who are unmoved by marketing…Read the case study→

Home page: full-bleed monochrome campaign photography under a fine serif masthead.

09Bridal retailLondon & HertfordshireSeveral boutiques under one name, an audience that browses on a phone late at night, and photography that had to carry the page…Read the case study→

Home page: the agency’s own site, fast and restrained.

10Digital agencyUKAn agency site is judged by the same people who judge the work. It cannot be the slowest or the least considered thing the studio…Read the case study→

Home page: events business rebuilt from a single-page app into static pre-rendered routes.

11Mobile bar servicesLondon & Home CountiesAn eighteen-page single-page app that search engines could barely read: one document, one title, no per-page metadata, and a…Read the case study→

Home page: fabrication portfolio with per-page metadata restored in the migration.

12Steel fabricationHertfordshireThe same SPA problem as the events build, plus two complications: page-level SEO managed by a client-side library, and an…Read the case study→

[ The transformation ]

Before

Multiple UK businesses were on older stacks — Vite/React SPAs and WordPress — that were slower, harder to maintain, and weaker on SEO.

After

Older SPA and WordPress sites became fast, static, SEO-clean Next.js builds — migrated with zero downtime and no visual change.

[ The hard problem ]

Migrating live production sites with zero downtime — the old site stays untouched until the new one is verified pixel-identical. One wrong redirect and the client's business goes dark.

[ How it works ]

I built a repeatable, safe migration playbook — branch-isolated, zero-downtime, verified pixel-identical before cutover. Two named examples:

Single-page apps that search engines could not read

Vite and React-Router builds served as one document with one title and no per-page metadata. Converted to Next.js App Router with file-based routing, every route pre-rendered static and addressable on its own.

SEO managed client-side

react-helmet-async replaced with the Next Metadata API, preserving page titles, descriptions and LocalBusiness structured data through a full framework change.

Browser-only libraries breaking the server render

Interactive maps and similar client-only dependencies wired through ssr:false dynamic imports, so they cannot take a server render down.

Cutover risk

Every migration branch-isolated and verified pixel-identical before the switch. The live site stayed untouched until the moment it was replaced.

[ Key features ]

Branch-isolated, zero-downtime migration playbook — repeatable across every client

react-router → next/link route conversion with file-based routing

react-helmet-async → Next.js Metadata API with preserved SEO and JSON-LD

Browser-only Leaflet maps via ssr:false dynamic imports

Per-page metadata for SEO that the SPAs never had

Page-by-page visual verification before cutover

[ The result ]

Outcome

12+ production websites shipped — older SPA and WordPress sites became fast, static, SEO-clean Next.js builds with zero downtime.

Delivered 2024–present

Tech stack

Next.js 14 (App Router, static)TypeScriptTailwindFramer MotionVercel

More work

// Open for work

Want somethinglike this built?

Book a 1:1