Waqas Bajwa

A headless Umbraco site, rendered by Next.js

A personal project. Umbraco 16 on .NET 9 manages the content and serves it through its Delivery API. Next.js 16 fetches that content and renders the pages with React 19 and TypeScript.

Type
Personal project, built in my own time
CMS
Umbraco 16 on .NET 9, headless
Frontend
Next.js 16, React 19, TypeScript
Content
Umbraco Delivery API
Rendering
Incremental Static Regeneration (ISR), with support for static generation (SSG)
Status
A recorded demo. The recording has no sound.

What it does

In a traditional CMS site, the CMS stores the content and also renders the pages. Here the two jobs are split. Umbraco keeps the back office editors already know, but it only stores and serves content. Next.js owns everything a visitor sees: the pages, the routing and the page titles.

The two sides talk through Umbraco's Delivery API, a REST API that returns content as JSON. Either side can change without touching the other.

How a page gets built

  1. An editor publishes content in the Umbraco back office.
  2. Next.js requests that content from the Delivery API.
  3. React 19 components, written in TypeScript, render it as a page.
  4. ISR serves the page as static HTML and rebuilds it in the background, so new content appears without rebuilding the whole site.

The recording

Screen recording, no sound. The video only downloads when you press play.

What the recording shows:

  • Umbraco 16 running headless on .NET 9.
  • Next.js 16 fetching content from the Delivery API, with ISR.
  • Pages rendered by React 19 components written in TypeScript.
  • Routing and page titles for content that lives in the CMS.
Ask me about this project Back to selected work