Sanity + Next.js For Dummies PART I
If you’re wondering what a headless CMS is, or how to integrate Sanity to a Next.js repository, this article is written just for you.
Right, so this is an extended introduction for those of you with good-enough Next.js knowledge, but next-to-nothing of Sanity. This is more or less an outcome from a lightning talk I had at work. I was covering pitfalls of Sanity with Next.js, only to realize that not everybody has tested Sanity — just yet. I have a tendency to think that everything I just learned, others have known for years. Note to self: stop it.
You see, as a pro-bono project, my team at Variant and I created a website for PMDD Norge with Next.js and Sanity. It was the type of project where we focus on doing something good for our community, while also gaining some new skill sets, or diving deeper into what we already know.
So, why did we choose Sanity? For content management. We wanted the organization to have ownership of the content on their website, but we also had little knowledge of CMS, or even headless CMS. At the time, we could hardly tell you the difference…
What’s the difference? Great question! I’d love to tell you.
The main difference between a traditional Content Management System (CMS) and a headless CMS is how the content is created, stored, and delivered.
Traditional CMS has an integrated approach, some front-end limitations, and a monolithic architecture. This means that the content is created, managed, and presented to the end-user all within the same system. Both layers, the content management backend and the presentation layer (frontend), are tightly integrated; making it difficult to customize the user experience.
Headless CMS, on the other hand, has a separated architecture, a flexible frontend, and a content-as-a-service approach. In short, it separates the content management backend from the presentation layer (frontend). So the content, which is stored as data, can be accessed through an API on any front-end systems: websites, apps, IoT devices… And because it can be accessed through an API, the designers have more freedom. Yay! 🎉
Right, back to Sanity. At first, it might be a little tricky to wrap your head around it; because you’re defining data models in your next.js repository, while creating content in Sanity Studio, but Sanity themselves are storing the data…🤯
What? Yes, let’s take a closer look.
Where Is the Data Stored?
You might have guessed right: it’s cloud-hosted. Sanity stores your data on its own cloud servers — a.k.a your data is accessible from anywhere, making it that much easier for us developers and content creators to collaborate in real-time!
All the data in Sanity is stored as structured content. This is a structure you as a developer define using schemas to represent different types of content; such as articles, authors, products, etc… Don’t worry, we’ll cover this too.
What Is Sanity Studio?
It’s a customizable editing environment, or interface of the Sanity platform. And when I say customizable, I mean it is fully customizable. It’s built with React.js, and if you like, you can tailor the studio to fit the project’s content models and workflows. And as mentioned above, it supports real-time collaboration, allowing multiple editors to work on the same document simultaneously.
How Do I Structure the Data?
With schema definitions, or content models (potato, potato). These schemas describe the type of content (e.g., blog posts, user profiles) and their fields (e.g., title, body, author). And you define these in a Sanity-powered Next.js application, with plain JavaScript (or TypeScript) objects. The Sanity Studio then creates the forms and inputs needed to create and edit your content. Brilliant.
And because it’s headless, the Next.js frontend then communicates with Sanity through API calls to fetch or mutate data. You can use Sanity’s own query language, GROQ, or GraphQL to retrieve your content.
Sanity also has some nifty client-side libraries for making the integration even more simple. As a few examples, you’ve got @sanity/client or @sanity/image-url that help with fetching data and generating image URLs. You’ve also got Sanity’s portable text helpers for presentation of rich text content.
But What About SEO?
Right, SEO. I’d love to say: “no worries,” because in many ways, headless CMS has a positive effect on your website’s SEO score, however, it depends greatly on how you implement and manage your content delivery.
There are some best practices to follow:
- Choose Server-Side Rendering (SSR) or Static Site Generation (SSG): These can help ensure that search engines can crawl and index your content efficiently.
- Optimize Content Delivery: Use a Content Delivery Network (CDN) and optimize images and assets to ensure fast loading times. You get this out of the box with Sanity!
- Do SEO Audits: What now? SEO Audits are used to identify and fix potential issues, such as broken links, missing meta tags, slow-loading pages. Nothing too complicated, and really just a glorified way to say “SEO Reviews”.
Right, but I mentioned positive and negative impacts of headless CMS. Let’s cover those as well.
Like I said, it all depends on how you implement and manage your content delivery, so naturally potential negative impacts are:
- Potential for Poor Implementation: SEO-friendly implementation is key for crawlable websites. That means no heavy JavaScript for rendering content — it’ll just hinder search engines to crawl and index your site’s content effectively. And we don’t want that.
- Increased Complexity: With great power comes great responsibility. All jokes aside though, the flexibility and control you get from headless CMSs adds a complexity that required a solid understanding of both development and SEO best practices. If you’re lacking this, it means your site isn’t fully optimized for search engines, a.k.a your site gets a shitty SEO score.
- Lack of Built-in SEO Features: Traditional CMS platforms often come with built-in SEO tools and plugins that automatically handle basic SEO needs. With a headless CMS, you’re gonna need to implement these features manually, increasing the risk of overlooking important SEO factors; like meta tags.
Why Even Choose a Headless CMS Then?
Because it’s just um-mah-zing. ✨ Ok, ok, ok. I’ll lay it out for you:
- Speed and Performance: Headless CMS solutions often lead to faster websites because they allow for more streamlined, efficient loading of content and assets. And faster site speed equals higher SEO-ranking. Not to mention how it improves user experience which potentially leads to even higher search rankings. I mean, sweet!
- Flexibility in SEO Optimization: With headless CMS we get more control over the HTML output. But how is that cool? Because it allows for precise optimization of elements without the constraints of traditional CMS templates. Such as meta tags, structured data, and other SEO-relevant HTML-elements.
- Better Control Over URL Structures: Headless CMS platforms don’t impose URL structures. You know what this means, right ? We get clean and logical URL-structures! It benefits both user navigation and SEO.
- Improved Mobile Experience: Because of the API-driven nature of headless CMS platforms, it’s easier to create responsive or mobile-specific versions of your content. Which is coolio as Google has their mobile-first indexing policies.
If that wasn’t a mouthful…! 😮💨
Stick around for PART II (coming soon), where we’ll look at how to implement Sanity with Next.js (for dummies). ⭐️
—
Loving my content? Support me by buying me a cup of coffee! (Click the image-link down below 👇).
