Our Sanity and Next.js open source starter project

Introduction

One of my first tasks at Skyward was to build a straightforward open-source project using a headless CMS. I chose Sanity.io and the result was a simple page builder, designed to let content editors add, edit and reorder components on a webpage without having to write any code.

In this blog post, I’m going to share the details of this project, explain the technology stack used, and provide some guidance on how to use it. But, before we dive in, if you’re not too familiar with Sanity, I would recommend taking a quick detour to my previous blog post where I break down Sanity’s key features in detail.

Let’s get started!

The Project: A Simple Page Builder

Our project is a straightforward and scalable page builder, built using Sanity.io. It's designed to serve as a solid starting point for anyone planning to develop more advanced page builders.

With this project, users can add, edit, and reorder components on a page without writing any code. I wanted to keep the project as simple as possible, so it only supports two basic components: Call to Action and Hero. But the structure allows you to add more components if you want to expand on the project.

You can make changes to pages directly within Sanity Studio. The project also uses Live Preview, allowing you to see how your page will look in real-time, before hitting publish.

You’re also able to add new pages within Sanity Studio and the site will update dynamically after publishing.

The Stack: Sanity and Next.js

For the project, I decided to go with Sanity and Next.js. Here's a quick look at why I made these choices:

I chose Sanity.io for its initial simplicity and potential for customisation. Key features like Live Preview and drag-and-drop reordering matched the requirements of my page builder perfectly.. While there was a bit of a learning curve to build more complex setups, it was a challenge well worth tackling.

As for Next.js, it was more about sticking with what I know. While I was dipping my toes into Sanity, it made sense to keep the other parts of the project in familiar territory. That’s exactly why this project is built with the pages router, as this was what I felt more comfortable with.

So, that's how we ended up with Sanity and Next.js for this project - a mix of something new with a dash of the familiar.

Building the Project

At first, I thought about using Sanity’s clean Next.js project and then build on top of it. However, its intricate underlying configuration led to some unexpected challenges.

Given my goal to keep the project simple and easily extendable for others, I decided a fresh start would be better. I chose to create a brand new Next.js project using the pages router and then add Sanity to it.

Step by step, I integrated the different Sanity elements. I started by embedding Sanity Studio into the project and then followed their guide to add Live Preview. This allowed me to focus on understanding each component thoroughly before progressing further.

Throughout this process, Sanity's Slack channel was extremely helpful. The active participation of Sanity team members made debugging issues and gaining deeper insights much more manageable. It's a resource I'd highly recommend for anyone beginning their Sanity journey.

Using the Project

The project is ready for you to use! You'll find everything you need to get started in the project's repository, including a comprehensive readme complete with setup instructions.

If you’re confused by the setup instructions or find any bugs while using the project, please raise an issue on GitHub and we will try our best to get back to you. Your feedback will help to improve refine the project for everyone.

At the moment, as we are a small team, we are only able to support bug fixes and documentation updates. We are not looking to expand the project at this time.

Conclusion

When learning a new technology, reading documentation is essential, but it’s not until we roll up our sleeves and dive into building a project that the real learning begins. And that’s exactly how I felt building this project – it’s really helped me to understand how Sanity.io all fits together.

This experience has reinforced how valuable it is to create projects and document your learning along the way. It pushes you to dig deeper, challenge your understanding, and solidify your newfound knowledge. So, for anyone learning something new, my advice is this: Dive in, create something, and share your experiences, whether on Twitter or in a blog post.

And that’s it from me! I really hope this project proves to be useful for you, and you enjoy exploring it as much as I did creating it.