Firebrand going Headless with Silverstripe CMS

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.

• Silverstripe CMS NextJS tutorial series on Vimeo
• Silverstripe NextJS starter Kit on GitHub

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 (https://nextjs.org/docs) is useful too.

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