One Shoe logo

Creative & Digital Agency

Headless in practice: our experience with Storyblok and Next.js for furniture brand Pode

Ever more organisations are opting for a headless CMS when building their new online platforms. We too are more often using a headless approach so we are able to offer the best solutions. Recently, we used the combination of Storyblok and Next.js to create a total brand experience on furniture brand Pode’s new website. In this blog, we will tell you how that went in practice.

One Shoe | 28 jun 2021

headless storyblok next.js

An ambitious project for Pode

The furniture brand Pode was set up in 2008 and is part of the Dutch design furniture brand Leolux Furniture Group. For Pode, design is more than designing the furniture alone. By offering complete series of mutually-compatible furniture and accessories, Pode provides harmony all through the home.

For the new website, the main objective was to communicate this brand feeling properly. It was therefore of great importance to Pode to make the transition from a functional website to an experience-oriented digital platform that inspires the visitor. We wanted to realise this without compromising on functions or performance. As a design furniture brand, it is essential that the brand experience and the ‘feeling’ come across authentically to the website visitor. Our objective as a consultancy was clear: from the very first contact moment, the brand must inspire, and the visitor must get a brand experience that is equivalent to being in a physical showroom.

Pode.eu’s challenge

Unlimited creativity thanks to headless

As regards technology, we needed total freedom in order to realise our vision of the digital brand experience for Pode.eu. Traditional CMSs are restricted as to what is possible in the front end. This is because of the way the front end is directly connected to the back end, thus defining a large part of the format and designs. With a headless CMS, this is not the case. Thanks to the architecture of a headless CMS, you manage all your content in one separate system, and then you load this to the various front ends by means of APIs. In this way, you obtain more creative freedom and flexibility, because the front end is now no longer restricted by the standard solutions that apply to a traditional CMS. Exactly what we needed for this project.

Modern frameworks

We also knew that, for the realisation of the digital brand experience, we wanted to employ a modern front end framework that offers the opportunity to create ambitious User Interfaces. For example, React, developed by Facebook, is a modern way to make everything more dynamic, interactive and intuitive. Frameworks like this one are no longer connected directly to the CMS. Thanks to this, it also works well for an online portal or smartwatch app.

A flexible CMS

Because the front end for this project is so ambitious, it was important that we chose a solid back end option that is simple to set up. There are many traditional CMSs for which it is time-consuming to set up the servers, and install and configure CMS. Fortunately, there are now also many SaaS (Software as a Service) CMSs for which setting up the back end costs far less time, thanks to use of plug-and-play. We were therefore able to invest the great majority of our time in the front end and thus perfect the brand experience.

The right tools for the job

With these three pillars in mind, we went looking for the right tools. From our experience with this kind of project, we quickly knew what would possibly be good options. We are also happy to use new technologies frequently so as to be re-inspired and keep creating innovative digital products. This is why we opted for the following solutions:

Storyblok: headless and SaaS

We opted for a headless CMS for Pode because we wanted to make use of the limitless creativity this solution provides. In Pode’s case, it was also important that we could display data from multiple sources, such as the materials and colours of the furnishings. With a headless CMS, this is easy to realise.

 

Interested as to whether a headless CMS is the right choice for you too? Then do read our blog: Choosing a new CMS?Eight situations where a headless CMS is the right choice

 

Storyblok was in our view an excellent choice for constructing Pode.eu. This headless SaaS CMS is easy to implement and offers a lot of flexibility for integrations and APIs. Storyblok also provides plenty of space to apply bespoke work. Many headless options only offer a more rigid and closed system, so you can only make limited modifications. For us, it was essential that there be no restrictions.

For content editors too, Storyblok provides a number of advantages. It is possible to see the modifications you make in the CMS in the front end in real time. When you open the page, as well as the editing tool, you get to see a live preview of the website. This means the focus remains on the experience the visitor gets, and it is simple to spot mistakes in the format.

 

headless storyblok next.js

Next.js: unrestricted creativity with top performance

The front end framework React, mentioned earlier, is in essence a UI library with which you can build attractive and modern UIs. Unfortunately, this is where React’s possibilities run out. A website built on React has to download, construct and generate the codebase every time the site is opened. This impacts the performance and SEO. Because we did not want to compromise on the performance or function of the website, this was not an option for us.

Luckily, there is Next.js. Next.js is a complete and mature framework, developed based on React, with which you can build real production level solutions. Next.js is in fact a shell around React which ensures a quick website and good SEO findability. Additionally, Next.js provides functions such as routing, image optimisation and internationalisation. Next.js also offers the possibility to add plug-ins to the ecosystem simply, for micro-animations and page transitions for example. This was exactly what we needed in order to realise an unequalled brand experience for Pode, with all the functions needed, the top performance of a quick website, and good SEO findability.

Conclusion

Thanks to the combination of Storyblok and Next.js, we were able to create exactly what we had in mind. This was mainly because we consider these two solutions to be one of the best headless CMSs and one of the best front ends. An additional plus point is that Storyblok and Next.js are highly compatible. With Storyblok’s headless structure, we could put all our effort into the front end without restrictions. The focus on the front end was reinforced by Storyblok’s SaaS properties. The quicker setting up of the CMS allowed us to employ the majority of our resources to make the brand experience the front end offers as good as possible. With Next.js, we could position the redesigned Pode.eu entirely in the context of perception and inspiration, something we certainly achieved.

Want to know more about what a headless CMS can do for you?

Contact Jordy for more information!