Going headless with Next.js
The Norwegian Labor and Welfare Administration used Enonic and Next.js to migrate their massive site to a modern, headless architecture—without compromising the editor experience.
The Norwegian Labor and Welfare Administration—commonly known as NAV—is the public welfare agency in Norway, consisting of several sub agencies including the state Labor and Welfare Service. NAV has 19,000 employees, is responsible for a third of the Norwegian state budget of USD 169 billion and serves 2.8 million users annually.
Saying NAV.no is a complex site is an understatement. It is served by hundreds of different front-end and back-end applications—as well as getting 200,000 unique daily visitors to its over 15,000 pages.
Additionally, more than 100 content editors are involved in creating and maintaining content on the site, and that is before we mention the large professional environment with a sizable technical team, as well as self service functionality.
Even though NAV had standardized on React components for the front-end, they simultaneously wanted to increase the usage of landing pages, in order to guide visitors through the social welfare funnel—a critical service in Norwegian society. Also, to streamline processes and enable smooth scaling, NAV wanted to migrate from a traditional CMS to a headless architecture.
All in all, as part of a larger and lengthy process of digitization and modernization of both NAV and the public sector in general, NAV of course wanted to update their main site and the technologies underpinning it. They required a modern, flexible, and future-proof platform to cater to their demanding requirements as the largest public agency in Norway.
Being a long-term Enonic customer, NAV upgraded to Enonic XP in late 2019. After initially using Enonic’s front-end, NAV wanted to use the aforementioned React instead, as their developers are well versed in the framework and because NAV’s design system specifically builds components for React. Also, and perhaps most importantly, with a separate presentation layer it is easier to keep a tidy code.
The first working prototype of this new solution went live in August 2020, with full production in December 2020. But NAV did not stop at React, they went even further—integrating Enonic with Next.js.
Next.js is a React framework for production, enabling developers to build sites using the popular React framework. It includes server-side rendering, while React in itself is primarily being used for building single page applications and client-side rendering.
Next.js provides a framework that enables users to use the same technology for server-side and client-side rendering across multiple pages. It is not so much as reinventing the wheel, but actually putting the car together.
Developers can of course create React apps and do all the heavy lifting themselves—like preloading pages with next/link, image optimization with next/image, dynamic routing, and so on. Next.js, however, bundles a lot of these things together, letting developers get started on their projects much faster.
As for content editors with NAV’s headless Enonic/Next.js solution, they can still operate in visual editing mode, work with content tree structures, schedule publishing, manage multiple users and permissions, reuse content across their site, and enjoy high performance over the board.
With the tight integration between a headless CMS (Enonic) and a front-end framework (React/Next.js), NAV has gone headless without compromising the editor experience. This is thus a great solution for both developers and editors.
Other results include reduced software costs, faster development due to NAV’s design system, and higher performance—by being easier to scale and more elastic.
Also, performance and response time has improved with Next.js: NAV.no now works as a single-page application. After the initial load the site responds really quickly, by loading the NAV front page and caching everything behind every link. In NAV’s own words, “you get the application feel.”
As for the specific headless benefits, NAV has moved to a modern architecture, where components are more flexible or loose—and thereby more future-proof and set to tackle the challenges of tomorrow.
- Enonic XP
- Headless CMS with Guillotine
- Next.js front-end application
- SSG and incremental static regeneration
- Hosted on NAV’s Kubernetes based application platform, NAIS (Google Cloud)