Fabrication · 12/12

Steel fabrication

The same SPA problem as the events build, plus two complications: page-level SEO managed by a client-side library, and an interactive map that breaks a server render if handled naively.

Sector: Fabrication
Region: Hertfordshire
Stack: Next.js 14 (App Router) · TypeScript · Tailwind
Status: Delivered

[ The transformation ]

What changed.

Same branch-isolated migration playbook, run end to end.

react-helmet-async replaced with the Next Metadata API, preserving every page’s SEO and the LocalBusiness structured data.

The browser-only map wired through an ssr:false dynamic import, so it can never break the server render. Verified page by page.

Next.js 14 (App Router)TypeScriptTailwindDynamic imports

What it does now

Structured data and per-page SEO preserved through a full framework change, with the map isolated so it cannot take the render down.

[ Design system ]

What it's built from.

Read off the delivered stylesheet, not chosen for this page.

Palette

#1C4EAAStructural blue

#F9FAFBSurface

#E5E7EBHairline

Typefaces

Inter

Headings

Helvetica Neue

Body

Every route pre-rendered static, so the page arrives as HTML before a line of JavaScript runs.

Next project

What changed.

What it's built from.

Construction & development.