Headless CMS
A content system such as Sanity or Contentful, so your marketing team can edit pages and posts without a developer, while the front end stays custom.
Capability 02 · Front-ends
React and Next.js interfaces that load fast on a phone.
We build front-ends from tested, reusable components, render as much as possible on the server, and measure the result with the same public tools Google uses.
§01Components
A component system, not a pile of pages.
Buttons, cards, forms and navigation are built once in React and Tailwind CSS, typed with TypeScript, and reused everywhere.
- The same look and behaviour on every page, because every page is built from the same parts
- Accessibility handled once: labels, focus states and keyboard support live inside the component
- New pages assembled from tested parts, so they are quicker to build and review
- Props checked by TypeScript, so a missing price is a build error, not a blank label
ProductCard.tsxIllustrative example
type ProductCardProps = {
name: string;
price: number;
href: string;
};
export function ProductCard({ name, price, href }: ProductCardProps) {
return (
<Link href={href} className="card">
<h3>{name}</h3>
<p>{formatPrice(price)}</p>
</Link>
);
}§02Rendering
Render on the server, send less JavaScript.
Next.js lets each page, and each part of a page, choose how it is rendered. Choosing well is most of the work of a fast site: the less code a phone has to download and run, the sooner the page is usable.
Static
HTML built ahead of time and served from a cache
Marketing pages, guides and documentation
Cached, then refreshed
Static HTML that is rebuilt on a schedule or when content changes
Product catalogues, blog posts and pricing
Server-rendered
HTML built on the server for each request
Accounts, carts and anything personal or live
Client components
Interactive parts that run in the browser
Filters, forms and configurators, only where interaction needs it
§03Measured, not claimed
Checked with Google's own tools.
When we rebuilt the Great Lakes Additive store in Next.js, its PageSpeed Insights score went from 41 to 98 on mobile and from 51 to 100 on desktop. The main content now appears in 2.4 seconds on a phone, down from 20.7.
Google's thresholds for a good page
- LCP (Largest Contentful Paint)
- 2.5 s or less
- INP (Interaction to Next Paint)
- 200 ms or less
- CLS (Cumulative Layout Shift)
- 0.1 or less
§04Content & data
Content and data from wherever they live.
The front-end does not have to live inside the system that stores your content. Keeping them separate lets the interface stay fast and custom while editors keep a tool they know.
Your own API
A custom Node.js back end for orders, accounts and business rules, sharing TypeScript types with the front end.
Custom architecture & APIsThird-party services
Payments, search, maps and shipping behind small typed wrappers, so one provider can be swapped without touching every page.
§05Further reading
Where to go from here.
Next season starts here
Is your front-end slowing you down?
Send us your website address. We will run Google's tests with you, show where the time goes, and tell you what is worth fixing.
- Free, no-obligation consultation
- Reply within one business day
- Led by a principal architect