Resources & Next Steps

[00:00:00]
>> Scott Moss: As far as some of the most used cases that I wanted to cover when it comes to headless CMS with Next.js, we covered them. There's a lot more for us to do just going through this page, but they're mostly the same. We talked about iterating over lists, we talked about relational types and how to query those things, everything's kind of mostly the same.

[00:00:23]
What really starts to change is just, and this is why it was really hard for you to create notes for this course. It's like, it's how you think about it and how your relationship is with the people in your team that are gonna be adding to the content.

[00:00:35]
Because there's nothing stopping you from putting every single thing you see as far as like text, assets, even layout positioning, and even things like color inside of headless CMS. But at that point, you're basically building a website builder from forms. So, that's not the best interface. If someone said, hey, you can build this website by using forms or not like, [LAUGH] what's on?

[00:01:06]
What wrong would you do? You probably say not. So, it's like this tug and pull situation, so you start to see people doing some of those on-site things. So what I wanna talk about now is just kind of take a tour through some of the other CMSs out there, and how they do some different features that I think you might find useful.

[00:01:29]
So that way, if you're gonna go forward from this and pick a CMS to try to figure out what you wanna work on, at least you've heard some of my opinions if you find them valuable. Because, I mean, I'm pretty, I'm not as deep in this space, I was since I'm not working on how to CMS, but I usually I do stay up to date on a lot of the things.

[00:01:44]
So the one that I do wanna dive into is Builder.io, I think I talked a little bit about it before. But this one's pretty cool, this one, so I talked about open source, I talked about closed source. This one is closed source, but it's like it sits somewhere in the middle between just a website builder.

[00:02:03]
To me, I think of it as a headless website builder, because you can actually use a headless CMS with it, even though it does also have a headless CMS component. It's everything, which can be good or bad. But it's pretty cool. This one, basically, you see, they have a graphic that I wanted to show, let me see if they have it.

[00:02:25]
It's not on this page. Yeah, I'm being AB tested. But they have a graphic where it kinda shows you like kinda where it sits, but as you can see in this demo right here, you can pull up on your site just like this in this app that they have.

[00:02:41]
You can look at everything from heat maps that they showed you, to editing inventory, to getting down to the code. It's pretty complex. And I think it's gonna be for those people who, it's basically like building your own web flow, it's the best way I can describe t.

[00:02:58]
So if you wanna build your own web flow, go use Builder, that's what it is. so to me, that's kinda like a technically inclined design person, I guess. So it's a different market, but this is what pushing that limit of we don't wanna edit on the form to, this is where it goes.

[00:03:17]
So that's Builder, they also do a lot of AI stuff, and they move really quickly. I know the Builder team there, Mishko, the guy who created Angler, is the CTO there now. And they're just a very, very strong team, I respect a lot of stuff that they do.

[00:03:33]
And what they're doing with the AI, I haven't tried it out yet, but what I can say is that they move really fast. And it's probably worth a try, at least just to see what's possible. So Builder is really cool. Another one that you might wanna check out is called Prismic.

[00:03:49]
Only reason I'm bringing this one up is cuz I've used it in the past and I thought it was quite simple, but they have this interesting concept called, let me see if I can show you. It's called a Slice Machine. So, a Slice Machine, let me see if I can get this right.

[00:04:06]
A Slice Machine is basically like taking a section of your website, it's basically like, you have components on your app, now you have components and content as well. They match one for one. So it's like, I have like, if we go back to our website, if we go back here, you can think of a Slice is like this thing, this might be a Slice.

[00:04:33]
This might be a Slice, this whole bento box UI in the subtitle is a Slice. So you can make these slices, and that way, the people who are designing content can drag and drop and pick the slices and do whatever they want. And because they're bound to some component that has a visual output, they can show them that in a preview much, much better.

[00:04:52]
You can even take a screenshot of it, so they can see a screenshot of what it would look like. In Prismic, they used to have a hosted editor, kind of like what Contentful has, that is now called their legacy editor. And the only reason I know that, cuz I was gonna use this for the course, I was like, I think Prismic is like the most simplest, basic, headless CMS out there, which is great for this course.

[00:05:11]
But then I realized like, no, you gotta download a thing now, and you gotta do all these things now. And it's like sanity now. So, check it out, it's kinda cool, I guess. I haven't tried it out, but it looks cool. So, you got that, I talked about sanity already, so I'm not gonna talk too much more about it.

[00:05:30]
Here is a Storyblock, yeah, Storyblock, okay. I can't remember if they were still around or not. So, Storyblock is kind of cool, I think they were one of the first visual headless CMS builders out there. They were definitely one of the first ones. I know that because they came to market after my product came to market, I remember them coming to market and they were like, yeah, we're gonna do this visual thing.

[00:05:59]
And I was like, I don't know if that's the way, and that's because we were still thinking we were selling to developers. And I'm like, developers don't want a visual editor, they just wanna fill out forms and use the API. But the people who are creating the content and experiencing the content need this, this kinda helps them.

[00:06:15]
So, can't tell if it's good or bad, I can just tell you that they did it for a while, seems useful, you can check it out. But yeah, that one's really good. And then I would say, this one is less of a CMS and more of a competitor web flow for sure.

[00:06:31]
But if you haven't checked out Framer in a while, Framer is no longer just an animation library, it is now a full blown website builder. And honestly, it's quite impressive. It's probably the only website builder that I've used, I'm like, all right, I'm still never gonna use this, but [LAUGH] I was really impressed.

[00:06:52]
Like, the code that it outputs and how it does it, and the fact that you can go in and edit things really simple, the app works really good. But the biggest feature is that, I can go get a Figma design right now, give it to Framer, and then within two seconds it's a website, I'll just click Publish.

[00:07:09]
So I can publish a Figma design and it turns it into a website immediately, which is to me, is really impressive. So, it's really cool, they have this really cool, where is it at? Templates, where are their templates? I know they have some.
>> Scott Moss: Let's see. Framer, literally, okay, why would they not be on their website?

[00:07:35]
That's crazy. They have a lot of them, they got some really cool looking website, a lot of designers make a living off selling Framer templates. This one looks absolutely insane. What, who made this?
>> Scott Moss: I don't know. This one's really good, though. It's really great for people who do React, cuz it's all React-based, the output of it.

[00:07:56]
There's a desktop app, it works in the web, it's basically like Figma. If Figma allows you to make a website, that's Framer, that's the best way I can describe it. It's pretty cool. Whereas Webflow is geared towards more designers, Framer is geared towards engineers who don't know how to design.

[00:08:17]
>> Scott Moss: And there are a lot of other ones out there for sure, but I think those are the only ones that I think, off the top of my head, that I can think of that you might wanna check out. And then from there, when we talk about production, since we didn't really get to that because it really isn't that much different other than the cash revalidating that I talked about.

[00:08:40]
You just need to make sure a lot of these CMSs have different URLs that they use in production than they do, not production. So make sure you use the right URLs. And then, you should try to avoid having to rebuild your app when something changes. So take advantage of web plugs, take advantage of revalidating, take advantage of all those things so you're not rebuilding your site.

[00:08:59]
like, this isn't 2016 gas feed anymore, so you don't need to do that. Hopefully you're not doing that. And then the other thing I get a question about with headless CMS is, can I use headless CMS outside of a static site? Can I use it on a mobile app?

[00:09:15]
Can I use it behind a login, like on the dashboard? Sure, you can use the headless CMS anywhere. A headless CMS is basically a repository for data that your colleagues create, right? It's still data, right? When we think of data, we think of the data that a user creates, but what about the data that your team creates?

[00:09:32]
That's what a headless CMS is for, so you have a lot of data that your team creates, and if it belongs on the screen in one of your apps, then you might feel free to use the headless CMS. So yes, you can totally use it. There's been cases where we've done that before, where we'll put things in the headless CMS that get rendered somewhere in the app.

[00:09:51]
And those might be the text that might show up on a own boarding flow cuz maybe we want someone who's not technical to manage that onboarding flow and what it says. So that's a great use case. It might be like, if you show a modal that pops up when someone signs up for the first time and it greets them, maybe that's something you wanna put in the headless CMS.

[00:10:12]
So that can be changed by someone who's not technical. So there's things like that where there's a lot of crossover that you might wanna do that. On the mobile app, kind of the same thing, there's different scenarios where maybe you wanna change some things. I've actually used the headless CMS to change the layout of a mobile app, so I didn't have to go to the app store.

[00:10:30]
And I didn't feel like setting up a backend, so I just use a headless CMS. That was really cool, so you can do stuff like that. So it isn't just for putting text on a website, there's a lot of different use cases for this. And then now the fact that everything, you can get an LLM with just an API call, an LLM is basically something that can take unstructured data, like output of a rich text, take something like that and make sense of it.

[00:10:59]
You might even find it useful to hit the API for a headless CMS server side and do some type of analysis there as well using the LLM. So I bet there's tons of different use cases there that people are still gonna figure out in the future. So it's not just putting text on a screen, that's just where all the money is.

[00:11:17]
That's the biggest need. But if you already have one and you're using one, you're not limited to just that, you can pretty much do whatever you want. So, think a little bit outside the box there.