Going headless with Next.js

Introduction

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.

Challenge

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.

Solution

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.