Headless CMSs with Next.js

Headless CMS & Industry Overview

Scott Moss

Scott Moss

Superfilter AI
Headless CMSs with Next.js

Check out a free preview of the full Headless CMSs with Next.js course

The "Headless CMS & Industry Overview" Lesson is part of the full, Headless CMSs with Next.js course featured in this preview video. Here's what you'd learn in this lesson:

Scott provides an overview of headless CMS (Content Management System) and discusses its history and evolution, the different types (open source and closed source), and some popular examples such as Sanity IO, Contentful, and Strapi.


Transcript from the "Headless CMS & Industry Overview" Lesson

>> Scott Moss: A headless CMS, I think it's a silly name. [LAUGH] I don't know why we call it that, but I get it. A headless CMS is basically a CMS that doesn't build your website, although most headless CMSs want to build your website now. Traditional CMSs manage your content for you or allow you to manage your content admin interface where you're basically filling out forms.

Some of the more sophisticated ones will allow you to visually edit you're talking like full blown site builders the squarespaces of the world and things like that. And then the other part is actually building your website, right? So there's like themes you can install, you can use their custom language, on Shopify, it's like liquid.

On Squarespace, it's, I don't know, on WordPress, it's Php. You can use their language and actually build a site. A headless CMS is just half of that. It's just saying, all right, we'll let you manage your content and we'll deliver it over an API. So that's the best way I can describe it.

So why headless CMS is a thing now when it's only half of what most CMS have always been. Well, I think it initially started because around some time in the 2018s, JavaScript or Google was easily able to index JavaScript based websites, right? Before that, you have people remember this, but if you had like a single page app, you had to use a service like pre render to.

If you detected a Google bot crawling your website, you send them back a pre rendered version of that website that you use the service to actually pre render, because it really wasn't good at indexing JavaScript based websites, but at some point it did get good. And it was, yeah, we don't care if you have JavaScript, we'll run that.

And then that was the change. That's when people were, well, we can finally build SEO-friendly static websites with JavaScript. Let's just do that. And you went from having these server side or these template languages like handlebars or EJS. To like, CS, whatever thing you want on the front end, and that's totally fine, right?

So I think that's what happened and that became a better experience to build static SEO friendly websites and whatever proprietary or outdated technologies that you had to use before. So now that people are building websites and their favorite JavaScript framework, and there's more frameworks to be released every single day, so the love is getting bigger.

How do you manage your content? You still have people on your team who aren't technical. You still have people on your team that need to run experiments and manage some of the content. And you also still don't wanna do it. So how does that work? So that's where headless CMS has come from, right?

They came from that need and at least that's kind of where I saw it are in the early days. And since then, they've evolved, they're now moving back towards traditional health. Traditional CMS is where you can download or build a whole site and a headless CMS, and we'll actually do some of that you'll see what I'm talking about.

Look at this point where it kind of feels like you're just making a site, which can be good or bad. It really just depends on your relationship with the non-technical people on your team and how much power you've given them. There's a dynamic with headless CMSs on who has the most power, who can do things.

Do you want them to be able, is this dynamic? Is this not dynamic? You can let someone change the theme on the website if you want through a CMS or the colors, but should you? I don't know, right? So it really just depends on how much power you give them.

Let's talk about some of the headless CMSs out there and the different types. And then which one we're gonna be using and why I chose it. So there's two types of headless CMS is although like a third type is like emerging and we'll kind of talk about that.

There's got to be like the open source and the closed source basically, right? So the open source ones you have things like the sanity IEOs of the world. The way these work, there's this weird problem that most headless CMS companies have to figure out is like who are we marketing towards to because a headless CMS cannot be used by just a content team.

It's a product that has to be integrated by engineers, but the engineers aren't the ones typically editing the content, but they have to do the integration. So it's like this chicken or the egg problem of like, all right, are we marketing to developers so they can integrate or are you marketing to content people so they can ask their developers to integrate?

So on a lot of headless CMS websites, you'll see things like for developers, click here for marketers, click here for product people, click here, right, and I do things like that. Because it's used by a lot of people. These open source headless CMS is are kind of just double down on developer experience, right?

They're just like if we make the best developer experience, developers won't feel like it's a chore to set this up. And therefore they're not technical folks and their team, we'll get really good value a lot faster, so that's the whole point of like the open source headless CMS is that's the approach that they're doing.

Sanity's probably one of the leading open source headless CMS out there in my opinion I don't know if it's the best, I haven't used it in like years. I'm actually not a fan of their UI, I just cannot get over how basic that UI is. But, it works.

But yeah, this one's open source. You would have to download Saturday on your computer, run it just like a regular app and then you talk to it and then you gotta host it and do things like that. We're not gonna do that today, although I do think the developer experience is better.

It's just a lot more work. So I don't wanna have to host that and then deploy our app and do all this stuff. But if you want like a superior developer experience where you can reuse components from your app and also in your headless CMS, so your non-technical folks or your content creators can actually use those components too.

You probably want something open source. Here's another one. I see. I forgot what it's called. Let me see typescripts headless CMS, payload. It's called payload. This was relatively new but I kind of like what they're doing. Payloads also open source one. They work very well with a lot of the frameworks is out there, they have a good aesthetic if you like, design is your sweet spot.

So this is also a really good one but I would say the leading open source one iIthink is probably still strappy maybe, although at this point I cannot confidently say that it's just a headless CMS. At this point it's a back-end as a service literally does everything, it's not just a CMS, but because it can do everything.

You can use it as a CMS. To me it's like an overkill. It's like shooting a roach with a bazooka. It's just more than you'll ever need at this point. But it works really good and people speak very highly of it. I haven't used it since they first came out in early 2015 even before then, so I can't tell you how it is now I just heard really good things about it, so I think they're still like the leading open source one.

Again, these open source ones focus on developer experience. I think strappy also put a really good emphasis on user experience as far as the UI, so there's a great content editing experience as well. So whereas a lot of the open source ones don't really have an editing experience, catered towards non technical people, they're like, still catered toward developers.

So it's like, who's really making the content here, the developers or the non technical folks. So we got that. So those are open source, closed source. There are so many of them. There's like a new one every single day. I don't really have any opinions on like which one's the best or if this one's better than that one.

I've just, the ones that I've tried are the ones that I've used over time. So I'll just talk about some of them. I think the OG OG one is contentful. That's probably one of the first headless CMSs out there. Well, other than like the enterprise ones that have been doing it for way much longer than contentful has.

This one's pretty cool, I guess. It's like the McDonald's of headless CMS. So, it's just everywhere. But if you want something, you're not gonna go there to get Wagyu. So [LAUGH] it's pretty good, I guess. I've used it many times, very simple. I think they simplified it a lot, but they definitely cater towards more enterprise now.

And as you can see, a lot of CMSs are starting to talk about AI, this, and AI that, which is very interesting because I do think CMSs have a great surface in which you can apply AI to, so you can do some really cool stuff. So I think it's a great app.

I haven't tried any of the AI features, but I bet they're pretty cool. So I would say Contentful is probably a good one. I mean, I could talk, about other ones, there's so many of ' out there. You have Prismic, you have butter CMS, you have Sitecore, you have, there's a lot, there's so many of them out there I can't even Adobe has one too.

It's like Adobe Experience Manager. There's a lot of them, so it's overwhelming when it comes to deciding which one you wanna pick. Now when it comes to which one we're gonna pick, we're gonna pick it sinful. The reason I pick in sinful is really just three reasons one, it's free, a lot of them are free, but this one is free and it's been free for a long time.

Two, out of all the ones that I've had experience with this is the one I have the most experience with so I feel more comfortable teaching it. And then three, because they actually don't support the latest version of Next.js, it actually works out for us because we get to build like our own custom integration from scratch, which means we can do whatever the hell we want.

Whereas all the other ones either support it, they support the latest version of Next.js, but they abstracted away so much that you were not gonna learn anything. So I was like, I don't really want to do that, because you're not, really gonna know what's going on here. You're not gonna know that, this is how you turn on previews and Next.js, because it's doing it for you.

And I think it's just too specific. I wanted something that was literally just an HTTP call and that was it. So that way we are not bound to this is how you do this in contentful and it only works here. So I wanted it to be extremely generic, and it doesn't get more generic than this.

Like I said, it's the McDonald's of headless CMSs. So that's why it shows them, but I wouldn't say that they're the best. There's definitely a lot of better products out there in my opinion. So we're gonna be doing that. So with that being said, go to contemplate.com, sign up, you can create an account, it's free.

I'm I already have one, so I'm gonna log in. Once you create an account, they're gonna have you go through and make something called spaces. You can roughly associate spaces with websites, I guess. A space is like a website or you can think of it as a database.

This is a database. This is a website. This is a project, however you wanna correlate that. But just make a space. I have a space here. Mine already has content in it. I'm most likely gonna delete it all so we can do it from scratch together. But, yeah, make a space.

I don't really need to walk you through all this stuff, because we're gonna do it together when we start modeling content, and it's honestly really simple. It's a UI for a database. At the end of the day, a CMS is a UI for a database. It's a form builder for a database, the only caveat is everybody has a different schema, right?

It's like you allow someone to model a schema and all their schemas are different. So that's where it starts to get pretty difficult as far as on the implementation side, if you're making a headless CMS. But at the end of the day, it's a UI for a database, so.

Is contentful for you for commercial purposes, or? Yes, contentful is free for no matter what you do with it up to a certain limit. I mean, you could look at their pricing. Let's go look at it. Let's go see. I'll make sure, I am accurate with that. Looks like they have a free forever for developers and marketers building individual projects.

So yeah, looks like you can do whatever you want with it. You have the same license. You're just limited in capacity and users and things like that. But for our purpose, we won't even approach these limits, when building today. So not a big deal, but as you can tell they are focused on enterprise, it goes from here to here.

It's a call us real quick. [LAUGH] Escalated really quick. So they mostly just focused on enterprise, so they don't really care about this, right? So it's not really bothering them.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now