Harry TwiggGet in Touch

Case 01 · Next.js & Payload CMS

Built to be edited, not maintained

Ravenscroft Anaesthetic Services is a single-consultant anaesthetic practice in Gloucestershire. I designed and built its site, and modelled the content so the practice can keep it current without booking a developer first.

Harry Twigg · 8 August 20264 min read
Ravenscroft Anaesthetic ServicesFig 1.
Ravenscroft Anaesthetic Services Homepage
Referral-led practices don't need to be found — the work arrives from surgeons and clinics. What they do need is to survive being looked up, usually by a patient who has been handed a name and is checking it before a procedure. Ravenscroft Anaesthetic Services had nothing to find.

The scope was deliberately small

The model is deliberately shallow. Pages are built from blocks; navigation and footer links are their own entries rather than hard-coded markup. Rich text carries inline buttons and an embeddable contact form, so a call to action can sit inside a sentence without a developer adding a component. Nothing in the model is specific to Ravenscroft, which is the point - the changes this practice actually makes are link edits, new paragraphs and the occasional new page, and those are the three things it covers.

The content model

A variety of customisable content was implemented including: pages, header links, footer links, rich text, inline buttons, and inline forms.

Editing

The editor is built for someone who doesn't normally manage a website. Blocks are dragged onto a page and edited against a live preview, and nothing is public until it's explicitly published - so the practice can draft, look at it, and change its mind.
Customisation options on left hand side and a live preview of the changes on the right
A screenshot of the editor, you drag blocks onto the page, then update content and check how it looks, its that simple.

Deploy

Deployment is via Next.js on AWS via OpenNext. Pages are server-rendered on demand and then stored in S3 and cached in CloudFront. No further Lambda invocations are made once a page has been generated, making the solution highly cost-effective. Content is revalidated instantly when updated, meaning patients always have the most up to date infomation when they need it the most.
Media is served straight from the private S3 bucket through a CloudFront behaviour, evaluated ahead of the default route. Without it every image byte proxies through the Next.js server Lambda via Payload's file endpoint — paying Lambda time to move bytes CloudFront can serve on its own.

Publishing, and the cache that got in the way

An edit has to reach a patient in seconds, which is harder than it sounds — a deployed site of this shape has two caches. Finished pages sit in an S3 bucket, and CloudFront keeps its own copy in front of them. Clear one and the other carries on serving yesterday's page.
The first version cleared them exactly how you'd imagine: work out which pages the edited content appears on, then clear only those. That relies on a Next.js feature called cacheComponents, which turned out to break the Payload admin panel — it loads blank. The admin panel is the whole point of handing a site over, so it won.
Without it, targeted clearing fails silently, which is worse than failing loudly. So publishing now clears the cache completely. That's heavy-handed and it's deliberate: at this size it costs nothing measurable, and I'd rather be blunt than wrong. Payload is targeting support in v4 - the precise version goes back in then, and since the interface never changed, that's one module and no call sites.

The form

Enquiries are driven by a handmade call to action and a custom contact form. The form is embeddable in paragraphs and text, so the site owner can invite the users to contact in their own words. The form can also be placed on multiple pages of the site, increasing exposure.
Page copy, buttons, and the contact form afterwardsFig. 2
The contact form is embedded naturally on the page.

Result

Since the handoff of the site, it has been fully managed by Ravenscroft Anaesthetic Services. They draft and publish pages, trial new content and update links to external partners all without my involvement. That was the goal. A site that needs its developer for a link change hasn't really been handed over.
A site that needs its developer for a link change hasn't really been handed over

Harry