Website Migration to Jamstack with Next.js and Storyblok Headless CMS
Goals
Best IT aimed to showcase their digital expertise through a state-of-the-art website, integrating Storyblok for superior content and website management. And so, we happily involved ourselves with our Jamstack know-how!
01
Migrating to a modern Jamstack architecture
Best IT aimed to transition from their monolithic WordPress setup to a Jamstack architecture using Next.js and Storyblok. This move was intended to enhance website performance, scalability, and flexibility, allowing for a more robust and dynamic digital presence.
02
Increasing content management efficiency
The goal was to empower Best IT's content marketing team by providing them with greater control over content creation and updates. This shift aimed to reduce the dependence on developers, streamline content processes, and enable quicker, more efficient updates.
03
Speeding up the website’s performance
Best IT sought to significantly boost their website’s Core Web Vitals and overall speed. This goal was critical for ensuring a seamless user experience, enhancing SEO performance, and maintaining their reputation as digital and eCommerce experts.
Challenge
When Best IT asked us about modernizing their website, we knew it would be a complex project… Perfect! That’s just what we wanted to work on.
Christoph Batik
Chief Customer Officer at Best IT
WordPress limited our workflows: disrupted the team’s control over content processes and required ongoing support from the development team.
Best IT, a leader in digital transformation within the DACH region, faced several challenges with their existing WordPress setup. It resulted in performance issues, negatively impacting user experience. At the same time, the content marketing team lacked autonomy, requiring developer support for any updates.
The Constraints of the Monolith
Monolithic architecture links the front end and back end, limiting flexibility and scalability. Visual changes required overall architecture adjustments, and client-side rendering slowed loading times. This setup also hampered SEO performance, as page speed is a key factor in Google's Core Web Vitals.
The project required more than a visual refresh; it involved transitioning from a monolithic WordPress architecture to a Jamstack framework. This transition demanded careful planning to ensure functionality and team readiness.
Approach
We worked hand in hand with the Best IT team: exchanged our know-how and best practices in terms of user experience and content exposition.
Christoph Batik
Chief Customer Officer at Best IT
We felt supported at every stage of the project, yet Naturaily managed to remain reliable and assertive all the way.
We started as always: with a comprehensive analysis of Best IT's existing technological stack and their business requirements. Best IT was strongly determined to make the best use of Storyblok. They knew its potential to cut workloads and show all the site’s changes in real time with their game-changing visual editor.
Storyblok Powered by Next.js: The Perfect Headless Duo
This enabled us to enter the Jamstack approach with a headless CMS setup that decouples the front end from the back end. Next.js allowed us to use varied page generation methods – some dynamically during the build phase and others served statically.
The provided designs served as a good base that we would later develop for the purposes of the project. Eventually, we developed 70 React-based components, categorized into templates, organisms, molecules, and atoms, to ensure modularity and ease of use.
With Storyblok backed by Next.js, you can edit already implemented components with just a few clicks
Basically, one type of component can display itself in a few different yet similar alterations. The project also included detailed documentation and training sessions to ensure Best IT's team could manage the new setup independently.
Results
The project was a nice example of cooperation between two companies offering similar services, during which a good atmosphere and understanding were felt all the time.
Christoph Batik
Chief Customer Officer at Best IT
With the new site and the know-how gained through our cooperation, we feel even more equipped to support our clients.
Our cooperation with Best IT led to a highly optimized, modular, and user-friendly website. We significantly improved the performance and Core Web Vitals metrics have improved notably.
Scalability and Modularity
Best IT is now equipped with a website architecture that allows for the front end and back end to be separated from each other. Further scaling and expanding the website through the use of API and microservices, without technical debt, is just around the corner.
Content Operations Made Easier
Content marketers can easily modify the site's appearance in real-time via the Storyblok interface, enhancing flexibility and collaboration. Basically, all content visible on the website is editable without the reliance on the development team.
A Website That is Faster, Lighter, and Safer
The new Jamstack setup significantly improved performance and Core Web Vitals metrics, allowing seamless SEO strategy implementation without heavy plugins. The headless approach ensures that even if the front end is compromised, it does not necessarily grant access to the back end, where sensitive data and business logic reside.
With the PWA version provided, all operations are streamlined to ensure optimal performance and accessibility, even offline.
Outcome
Best IT can now proudly use the website that reflects their advanced digital environment expertise
Before
Burdened by a high-maintenance WordPress setup, Best IT struggled with performance and content management inefficiencies.
After
With a sleek Jamstack architecture, Best IT enjoys superior website performance and content management autonomy. The website’s quick, light, and ultra-flexible.
Improvements
Our work resulted in:
Improved Performance
The Performance metric went up from 24 to 100 (Lighthouse). We improved LCP from 1.4 s to 0.6 s and Time to Interactive from 4.3 s to 0.9 s.
Refreshed Look with the New Design
Utilizing Best IT's designs, we developed a flexible design system that markedly improved usability and user experience.
More Control Over SEO
SEO strategy implementation without heavy plugins: metadata, internal linking, sitemap generation, or image optimization can be done quickly.
Offline Access with PWA
The website now features a PWA version, reducing data usage and allowing offline access, along with enhanced security due to the absence of server-side databases.
Smooth Technical Handover
Best IT’s developers received full support and technical enablement, including further development of components. This allows them to be independent.
Improved Security
Reduced risk of data breaches with no need for server-side databases.
Some numbers (we all like numbers!)
0
Performance (Lighthouse)
0.9 s
Time to Interactive
0
Fully Customizable Components
Most interesting features
Real-time content management
Storyblok Live Editor
Allows content marketers to manage the look and feel across the entire website with extreme freedom within the Storyblok interface, seeing changes instantly. With pre-defined, customizable components on hand, they don’t need developers for any minor changes.
Third-party integration anytime
Headless Architecture for Increased Scalability
The new Jamstack setup allows for easier future enhancements and integrations. After saying ‘goodbye’ to plugins, Best IT can now test out any API-based third-party app in a breeze.
Optimized page generation
Next.js Dynamic Routing
We introduced Next.js’ dynamic routing, allowing pages to be built dynamically or served statically. This streamlines content delivery and optimizes page generation, perfectly suiting complex, modern web requirements.
The team
We’re delighted with the quality of work we’ve done collaboratively. Before we handed the setup to the client, we made sure they’d be able to operate within it freely.
Christoph Batik
Chief Customer Officer at Best IT
The team was able to quickly verify business requirements and then propose and implement the most accurate technology. Whenever we encountered a challenge, we knew that their creativity and knowledge in the area of headless CMS implementation would allow us to move forward with ease.
These great professionals worked on this project for our client:
Mateusz Hadryś
Software Engineer
Tomasz Kordyś
Head of Delivery
About the client
Best IT is one of the top partners for digital transformation in the German-speaking / DACH region.
Project
Web Development
Industry
IT Consulting
Web
Best IT
As a digital agency established in 2000, Best IT is considered one of the pioneers in the e-commerce area, having partnered with big solution providers like Spryker, Commercetools and Shopware.
They consist of 100+ experts located in 4 offices in Germany and Austria: developers, UX designers, consultants, solution architects, analysts and project managers. These skill sets allow them to offer solutions for the entire digital commerce chain: from strategy and consulting, user experience and design to the development and operation of e-commerce platforms across all channels and devices.
Naturaily proved to be the right technological partner for us: efficient, responsive, and always focused on finding alternative, goal-oriented solutions.
Christoph Batik
Chief Customer Officer at Best IT
Similar challenge? Let's get into it!
We develop solutions, you grow your business. It's that easy!
Here’s how we're making a difference in the web, together
Stories of path-breaking solutions, responsibility, and businesses moving forward
Bronson Labs
Health & Wellness E-Commerce
From Magento to Shopify: a path to 90% increased day-to-day efficiency
Bronson Labs wanted to add content, integrations, and special offers quickly. After migrating to Shopify, all website changes became easy, cutting maintenance costs threefold.
5/5
Clutch review
70%
Less dev time
3x
Lower maintenance costs
Nerdy Banana
Apparel E-Commerce
Automated custom product configurator for Shopify-run multi-store
Nerdy Banana’s manual order processing hindered their efficiency and customer experience. Happily, we helped them increase conversion rates, delivery times, and sales.
3x
Quicker delivery times
95%
Production lead time saved
98%
Faster file preparation time
n8n
Workflow Automation SaaS
Empowering SaaS growth with a scalable, SEO-optimized Nuxt.js website
n8n sought a scalable web solution for automated API-rich content creation in huge page volumes. The rapid website we created boosted their visibility and product usage while saving tons of time.
5/5
Clutch review
300k
API-driven dynamic pages generated
900%
More Top 10 keywords in 1 year
Urban
Wellness SaaS
Transforming web management to allow quicker SaaS growth
We supercharged Urban’s website and gave their marketing team the tools and autonomy they needed. All while significantly improving web performance and SEO capabilities.
96
Performance (Lighthouse)
100%
Web devs’ time saved
Total
Flexibility & scalability
Artinfo
Auction House
Custom web app for live art auctions' market leader
Artinfo needed a seamless, real-time online auction platform to modernize bidding and engage more users. We built a scalable web platform that enhanced data processing, increased participation, and boosted sales.
75k
Unique users a month
80%
of phone bids transferred online
300
online bidding yearly
Lingohub
Translation Management SaaS
Fast & scalable custom Vue.js app for improving translation efficiency
Lingohub needed a modern, scalable foundation for its translation SaaS. We migrated their platform to Vue.js, improving speed, collaboration tools, and securing €600k+ in funding for future growth.
5/5
Clutch review
600k+
Euros of new FFG funding
60%
Time saved on translation
