Tue, 6 December 2022

Web & App Development

Using Headless CMS with Sanity

Team image

Being able to decouple your frontend and backend is useful as it allows for changes to either the data or your frontend without the other being affected. Headless CMS with Sanity is great for websites that have content which is added to, or updated frequently.

So, what is a headless CMS? And how will it help your business? Let's dive in.

Headless CMS

Headless CMS is a backend content management system which acts as a central repository for all the content for your website. The data is then delivered to the frontend by API, where it can then be used.

Getting started with Sanity

Sanity is one examples of headless CMS and was the one we chose to refresh the Exo Digital website.

There were several reasons for choosing Sanity that made it a great fit for what we wanted as a company:

  • Text editor: Sanity uses the text editor to save and structure content in a versatile way, enabling users to adapt the way the data is used across different platforms.
  • Live preview: Sanity can integrate with Next.js to offer a live preview service which is great for designers and content creators to see how what they are producing will look on final completion.
  • Versioning: Sanity offers access to versioning on content created and stored in the studio. You can see when content was created, edited and deleted, as well as being able to restore if necessary.

Creating a Sanity project is very simple and the Sanity documentation is fairly comprehensive on this, along with a supportive Slack channel that can be joined for any help that is needed.

Frameworks

We used a combination of Next.js, Tailwind CSS and Sanity for our website, whilst also using TypeScript instead of vanilla JavaScript. The website was then hosted on Netlify as this combines with Sanity very nicely.

One of the reasons Next.js works so well with Sanity is the live editing feature of Next.js working in conjunction with the Sanity preview feature. This means you can see how your content is going to look whilst it is being worked on and before publishing.

Tailwind allows for consistent, responsive design throughout your development and links well with React and Next.js to use components for the website as opposed to repeating CSS and code.

Learn more about headless CMS

Sanity is a great example of a seamless headless CMS. The ease of integration with Next.js and Tailwind allows for a great developer experience in creating fast, production ready websites.

If your business needs CMS support, our consultants can help. Reach out to the Exo Digital team for a complimentary consultation!

Book an Info Session

Feeling inspired? Take the first step and book in an info session with one of our team