Headless WordPress · Next.js

A modern front end—without replacing the existing CMS.

For ABB’s digital magazine “Destination Zukunft,” we developed a new front-end architecture based on Next.js. The existing WordPress system was retained as a headless CMS. This allowed ABB to continue using its existing editorial infrastructure, avoid the costs of a complete CMS migration, and at the same time lay the technical foundation for a modern web application.

Development of a digital web magazine for the ABB Group. Valanor handled the technical implementation of the platform, incorporating interactive features to enable modern use of editorial content.

Client
Ruess Group
Type
Website
Status
Ongoing
Services
  • Platform Engineering
  • Software Engineering

A digital magazine designed for content and interaction.

Technical development of ABB's Destination Zukunft magazine

A digital trade magazine must present editorial content in a clear and organized manner, take into account different user habits, and be able to be regularly expanded with new articles. At the same time, existing systems and well-established editorial processes should be preserved as much as possible.

ABB's “Destination Zukunft” is a digital magazine covering industry, energy, digitalization and technological developments. Ruess Group was responsible for concept and design; Valanor delivered the technical implementation, including the standalone web application, interactive features and connection to the existing WordPress CMS.

The focus was on an architecture that opens up new possibilities for front-end development without requiring a complete overhaul of the existing content infrastructure.

Not every system needs to be replaced in order to modernize it.

Targeted further development of existing infrastructure.

A complete switch to a new content management system would have incurred additional costs: existing content would have had to be migrated, editorial processes would have had to be adapted, and new workflows would have had to be implemented.

However, WordPress remained suitable as a system for managing editorial content. The actual requirements lay in the presentation, user experience, and additional features of the magazine.

That’s why we opted for a headless architecture. WordPress remained in place as the CMS, while the front end was developed independently using Next.js.

This separation allowed us to reuse existing structures and implement front-end development independently of the traditional WordPress theme system.

The result of this architectural decision: The existing CMS infrastructure was preserved. At the same time, we established the technical foundation for a custom-developed digital magazine—without the costs and risks of a complete CMS migration.

Preserve existing systems. Overcome technical limitations.

The technical development focused on four areas: continuing to use WordPress as a headless CMS, developing a standalone Next.js front end, integrating additional magazine features, and reducing unnecessary migration costs.

Continue Using WordPress as a Headless CMS

WordPress remained the central system for managing editorial content. Instead of migrating content and editorial processes to a new platform, the existing CMS was integrated with the standalone front end.

This allowed the editorial team to continue using their familiar work environment, while the content presentation was developed independently of WordPress.

Developing a Standalone Front End with Next.js

Using Next.js, we developed a standalone front-end application for the digital magazine. The separation between content management and the user interface allows us to implement design, navigation, and features independently of the traditional WordPress architecture.

This provides greater flexibility for the website’s future development without having to change the editorial infrastructure.

Integrate interactive features into the magazine

A digital magazine should support a variety of usage scenarios. That’s why, in addition to the article layout, we implemented additional features such as dark mode, notifications, a favorites list, and a read-aloud feature.

This allows readers not only to view content, but also to save it for later, customize its appearance, or have articles read aloud to them.

Avoid Migration Costs Through Targeted Modernization

Not every technical advancement requires a complete platform change. Since WordPress continued to meet the requirements for editorial management, the existing system could be retained.

Development work focused on the new front end and the necessary integrations. This eliminated much of the effort involved in a complete CMS migration.

Modernized without starting from scratch.

The result: Headless WordPress and Next.js in production.

“Destination Zukunft” is a digital web magazine created for ABB that combines the existing WordPress infrastructure with a custom-developed Next.js front end.

The editorial team can continue to manage content via WordPress. At the same time, the decoupled front end allows for customized presentation of articles and the integration of interactive features.

By reusing the existing CMS, additional migration costs were avoided. The modernization focused on those parts of the platform that actually had to meet new technical requirements.

The project demonstrates how existing enterprise systems can be strategically enhanced without unnecessarily replacing components that are already functioning properly.

Software Development & Legacy Modernization

Not every existing system needs to be replaced.

Does your existing platform serve its purpose, but are new requirements becoming increasingly difficult to implement? A complete system overhaul isn’t always the most cost-effective solution.

We analyze your existing architecture and specifically enhance the components that are holding your applications back. Whether it’s a headless CMS, front-end modernization, or the integration of existing systems—the key is determining what can be retained and where technical changes are necessary.

Schedule an Initial Technical Consultation

Aleksandar Basara

Managing Director

aleks@valanor.co

+49 (0) 711 16 44 6 83

Lindenspürstrasse 22, 70176 Stuttgart

Aleksandar Basara