Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.


Firebrand going Headless with Silverstripe CMS

Firebrand recently completed a rebuild of their main website using Silverstripe CMS in a Headless configuration. Learn about their experience and the benefits of Headless and Silverstripe CMS.

Read post

As Firebrand is a Marketing and Digital Transformation Agency, the pressure is always on to ensure our “front window” demonstrates our creativity, future focus and capability and with our website being almost three years old it was well overdue for an overhaul. We made the call to test the waters and see what was possible using our favourite content management system,  Silverstripe CMS and the React framework with Next.js. What better way to experiment than on our own website.

We based the project on the Silverstripe CMS Next.js starter kit. A handy starting point, with multiple branches providing options for a blank template, through to a fully themed template using content blocks. From there, we moved on to designing and developing the CMS, setting up all the pages and models needed for our website. Using GraphQL, we pulled the content to the front-end, then utilised the power of Next.js and React to design the website, along with our favourite front-end framework, Bootstrap, and animation library, GSAP.

The use of React and Next.js hooks and components allowed for efficient state management and improved code organisation. Meanwhile, Next.js Image's automatic image optimisation features played a significant role in enhancing the site's loading speed by reducing image file sizes, and inturn, optimising the delivery to the user. The combination of these two technologies and best practices contributed to an overall fast and well-performing website.

We chose Vercel to host the front-end website. It was easy to set up, integrates well with Next.js (as they are built by the same developers) and provides us with a fast and easy way to deploy the website. Silverstripe CMS’s headless module provides full CMS flexibility as you’d expect with your standard Silverstripe CMS website. Once content editors have made all the required updates, they then have the ability to publish all changes, and in our case, call a webhook, that triggers Vercel to rebuild the website.

Since the website’s launch, we have successfully upgraded the website to use the most recent CMS version, Silverstripe CMS 5, paired with the most recent Next.js version, 13.This enabled us to utilise the latest features and functionalities, without any detriment to the overall user experience.

When to use Next.js and Silverstripe CMS

Combining Next.js with a headless Silverstripe CMS provides a powerful  solution for dynamic and high-performing web applications, all while maintaining content management capabilities. It's ideal for scenarios demanding complex front-end interactions, SEO optimisation, and high-end performance. Additionally, the active communities and ecosystems surrounding both technologies offer ample resources. When considering this solution, assess your project's specific needs, scalability demands, and your development team's expertise to ensure a successful implementation.

How to power your website with Next.js

Although it’s still very early days, there are some useful resources that can help you get started in the headless space with Silverstripe CMS.

The above resources provided us with insights into what was possible and gave us the confidence to dive in and build our website using this stack. If you’re not familiar with Next.js, their documentation ( is useful too.

Experience this new stack, be inspired for your own next website, and also (of course) find out more about Firebrand.

About the author
Alex Murray

Alex Murray is an accomplished Digital Design Director with over 10 years of experience in the industry. As a shareholder in Firebrand, he is deeply invested in the success of the company. With his profound understanding of UI and UX, Alex not only conceives and executes digital design experiences but also actively contributes to their technical implementation, resulting in seamless and visually captivating outcomes.

In his role as a Digital Design Director, Alex plays a pivotal role in leading the web design and development team. His clear direction and guidance enable the team to achieve a diverse range of outcomes. By bridging the gap between design and development, Alex leverages his expertise to foster efficient collaboration and ensure the seamless execution of projects.

Post your comment


No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments