New Enonic.com Launched with Next.js

After more than a year of planning, workshops, sprints, and bug fixing, we finally released a completely new version of Enonic.com in October 2023.

Our content platform is still the same, but now there is a new sleek and modern design on top of it. Consequently, most of the news are actually under the hood. Gone are technology from 2015, and welcome are our API first approach coupled with the Next.js front-end framework!

Why You Should Care

The million dollar question is: Why should you care? Companies and people release new websites all the time, and bragging about it is about as original as the butler twist in a murder mystery.

We think we now have an excellent showcase for how you can build a modern website with a headless CMS and Next.js. And we want to share it with you.

At the same time we want to highlight how all these bells and whistles have a meaningful impact on the editor and developer experiences. How the involved technology can make life easier for your coworkers.

Challenges We Wanted to Solve

We have detailed why we are building a new website with Next.js and headless CMS before. If you don’t want to read all that, you can check out our main reasons below:

1. Business Goals and User Tasks

Fundamentally, we wanted a new website to solve so-called “core tasks,” the intersection between our business goals and the tasks that visitors come to perform.

We aligned business goals like generating opportunities, differentiation, and building trust with user tasks like “can I use this for my project?”, “what does it cost?”, and “is this platform modern?”

With this in mind, we came up with a site structure for the most important landing pages, as well as a rudimental wireframe of the front page.

2. The Developer Experience

In order to realize our core tasks, we had to feature the latest and best technology on our fledgling new website. This was of course headless CMS + Next.js.

But what exactly do headless and Next.js solve? Let’s start by saying that developers don’t like to be locked in with technology. They prefer to work with whatever suits their fancy, and old monolithic content management systems will not exactly give them freedom with tools and frameworks.

A headless CMS cuts the tie between content and presentation. The developers can then focus solely on the latter and build the solution with their favorite front-end framework.

And because it’s both faster and easier for them, developers want to implement design systems and UI components within the same front-end framework they have chosen.

3. The User Experience

However, front-end frameworks (like React) render in the browser. This process is slow compared to server-side processed and rendered HTML.

This is where Next.js saves the day. It uses a JavaScript runtime under the hood, which makes it possible to execute JavaScript server-side.

We will not go into the details here (you can do that on our Next.js article), but suffice to say that Next.js can greatly improve the user experience by making sites incredibly fast.

This is of course good news for UX and SEO.

4. Adapting the Enonic platform to Next.js

We were not supposed to reinvent the wheel with our new website. We therefore kept the headless Enonic platform and the authoring interface Content Studio below the front-end tech.

In doing this, we naturally had to adapt the Enonic platform to Next.js. This is especially relevant to the following three areas:

• Next.XP integration: Acts as a proxy to our Next.js front-end
• Preview integration: Made easy with Next.XP
• Visual landing page editing: Made easy with Next.XP
• Headless API: Fetches our structured content

5. Design

The current website and design originated in 2015 and were ripe for a new and fresh take. We wanted to get rid of the centered design, the capitalized titles, and the overall cartoonish feeling.

We wanted a design that was modern, smooth, and sleek, while evoking confidence and security. The idea culminated in “nordic office,” with a bright palette. This became the task of a designer from our agency Avidly.

6. Top Tasks

A final challenge was to decide on which tasks to prioritize first. In a website project there is potentially an infinite amount of things to fix and do. If we ever wanted to launch a new site, we had to prioritize—and prioritize hard.

As mentioned, the new website was not supposed to be a complete overhaul of everything. Most of the content would stay as it was. But a new design (obviously), new messaging, new top-level structuring, and new ways to present the content were in any case chosen as the top tasks.

The Solution Itself

The new Enonic.com was launched 3 October 2023 after months of hard work from our dedicated team. It has a sleek and modern design with lots of air, dominated by the colors white and black, together with orange and blue as secondary colors.

The new website is fast and responsive, with lightning fast loading times thanks to an enthusiastic cache. Several new components have been crafted, with the addition of a new content type. Multiple outdated components and content types have been discontinued and removed to declutter the site for the content editors.

Some Tangible Results

Here are some statistics:

• 66 landing pages
• 17 feature articles
• 240 blog posts
• 1,200+ images
• 21 content types
• Several components

Here are the Siteimprove scores:

• 91.5/100 in the Digital Certainty Index
• 96.6/100 in Quality Assurance
• 85.8/100 in Accessibility
• 92.3/100 in SEO

As mentioned, this means a much faster site for visitors than the previous site, which contributes to improving the UX and the SEO. 

Here’s snapshot of Google PageSpeed Insights for our front page:

Google PageSpeed is a tool that helps you improve the speed of your website. It does this by analyzing your website and giving you suggestions on how to fix performance issues. Getting top scores in almost all the categories is a great testimonial for us.

As for the working team experience, our developers use React and their preferred tools to great success. At the same time, the content editors get the familiar and coherent visual experience of working in an editorial environment.

Front-end developer Persijn had the following to say about the project:

“Making changes in the Next project feels faster, with decreased build time. It is nice to work on a popular framework, and having a test project for our Next integration is really helpful for improving it.”

Next Steps

We have reached a major milestone in releasing the new Enonic.com site, where we showcase the power of Next.js coupled with the headless Enonic platform.

But we are far from done in our quest for eminence.

In the near future, we will conduct user testing on the site to further improve upon accessibility, as well as messaging and content. And who knows what next technical marvel is around the corner?