NAV with Headless Enonic, Next.js, and Aksel

NAV recently held a talk at the Enonic offices. In this companion blog post, Anders Bråthen Nomerstad, a full stack web developer at NAV, shares insights into NAV’s headless Enonic setup and their design system called “Aksel”.

See the talk here for all details:

About NAV

NAV, the Norwegian Welfare and Labor Administration, is responsible for administering public welfare, benefits, and services on behalf of the Norwegian government.

This encompasses a significant portion of the state budget, covering pensions, unemployment benefits, sickness benefits, family benefits, social services, and various other programs.

Team NAV.no and Their Role

Anders is part of “team NAV.no”, responsible for most of the public pages on the respective website. While not the only team working on NAV.no, they focus primarily on the front pages and information pages about services for private individuals, employers, and health professionals.

NAV.no attracts about 250K daily unique users on average weekdays and hosts over 16,000 pages on the Enonic platform.

NAV’s CMS Stack

NAV’s CMS stack, a core product of their team, is designed as a publishing platform for other specialized teams within NAV. These teams publish content on various benefits and services.

NAV.no comprises many apps, mostly for logged-in users, managed by different teams, all utilizing the same design system, Aksel.

The Headless CMS Approach

NAV uses Enonic as a headless CMS with no front-end logic on the platform itself, having migrated their front-end code to Next.js three years ago.

The Guillotine GraphQL library is used internally in their Enonic app for content delivery to the front-end, which requests URLs and receives the necessary content for rendering pages.

Front-end Strategy with Next.js

NAV employs server-side rendering with static HTML using Next.js functions like getStaticProps and incremental static regeneration. This approach offers the benefits of a static site with fast response times.

They have also implemented an event-driven cache invalidation system that updates content immediately upon publishing in the CMS.

Component-Based Page Composition

A significant aspect of NAV’s setup is the heavy use of components for page composition in Enonic, utilizing their design system. This aligns well with the parts and layout components of Enonic and the React components distributed through Aksel.

Exploring Aksel the Design System

Aksel, available at aksel.nav.no, is a comprehensive design system comprising front-end libraries, best practices for digital product development, and component libraries.

The component libraries include icons, side tokens (CSS library), and a core library of generic React-based components. These libraries are thoroughly documented and easy for developers of all levels to use.

Real Time Demo: Using Axel

Anders demonstrated the use of Aksel’s components in NAV’s content authoring tool, Content Studio, highlighting the component based composition of pages.

For example, editors can easily add buttons or alert boxes, with various props matching the design system’s React components. The front-end fetches content from Enonic, which resolves and delivers the necessary components.

Future Developments and Collaborations

NAV is planning to expand their setup in Aksel, aiming to include more comprehensive page templates in their design system. Currently, these templates exist solely in Enonic, but the goal is to make them widely usable across different teams.

Q&A Session Highlights

During the Q&A session, Anders addressed various technical aspects, including NAV’s use of Next.js without the app router, the mapping of Enonic parts to React components, and their cache invalidation strategy in Kubernetes.

The team NAV.no, consisting of 16 members including seven developers, collaborates closely with team Aksel, which manages the design system documentation and development.

In summary, NAV’s headless Enonic setup and Aksel design system showcase a sophisticated approach to managing a large scale, user centric website with diverse content needs.