Why We Pair Next.js with Umbraco 17
A look at how Umbraco 17 and Next.js 16 are combined in a headless architecture, covering the Delivery API and block-based rendering approach.
This piece describes a headless architecture where Umbraco 17, running on .NET 10, serves as the content backend while Next.js 16 with React 19 handles presentation. The two applications communicate solely over HTTP through Umbraco's built-in Delivery API, allowing the CMS and frontend to be developed and deployed independently. Editors compose pages from nested blocks using Umbraco's Block Grid editor, while Next.js renders these blocks server-side through a single catch-all route that dispatches to matching React components based on content type.
For needs beyond the Delivery API—like search, filtering, form submissions, and media handling—the team built custom endpoints and leaned on Next.js's image optimization. The article candidly discusses both the benefits (speed, CMS-controlled SEO, independent team workflows) and trade-offs (fewer battle-tested examples on newer stacks, manual setup for preview/draft workflows and sitemaps) of this approach, offering engineers a practical example of headless CMS architecture decisions.