Introduction

[00:00:00]
>> Scott Moss: How's it going everybody? Welcome to Headless CMS with Next.js, I'm super excited about teaching this course. If you haven't taken a course with me, let me give you a little background about myself. My name is Scott Moss, I'm gonna be your instructor. I've been an engineer for over 10 years now, I've worked at companies like Netflix, early startups, and even created some startups of my own that I'll talk about soon.

[00:00:22]
Currently, I'm making another startup in AI right now after being inspired, after taking so many AI pitches as a VC. And today I'm gonna teach you about how to use a headless CMS in Next.js. So, little small nugget, but one of the first startups that I ever created was headless CMS back in 2015, 2016.

[00:00:43]
So I'm pretty deep in the space from many different angles, whether it's creating one, trying to sell one, creating integrations for one, using one in my projects, and now teaching about headless CMS. So I have a lot of different perspectives that I would love to share with you.

[00:00:57]
I think one of the best ways to use a headless CMS is to just use it on a site that you already have, because realistically, that's what's gonna happen in the wild. You're already gonna have a website that's done and you're gonna need to integrate some part of that to be dynamic.

[00:01:11]
So that's what we're gonna do in this course. So here you can see it's this nice fancy website that I spent about ten minutes making, cuz that's about how long it took to sign up at my credit card and buy this and download. And what we're gonna do is we're gonna take some of these static elements here and convert them to be dynamic using a headless CMS, which is the whole point.

[00:01:32]
I think for the most part that, reflects what's gonna happen in real life. It's gonna be very hard for you to build a website from scratch while also trying to make content dynamic. It's like writing a database schema for an app you know nothing about. So I think realistically, that's typically how it's gonna go.

[00:01:51]
So for today, I have a repo for you all, that way we can start with the same app that I just walked through. And basically, the repo is pretty bare bones when it comes to dynamic content, but it's a fully built out website. And you can take a look around but it's just a standard Next.js website that use the app directory.

[00:02:10]
There's some things in there that you don't need to touch for the most part, we're just gonna be replacing a lot of those different static pieces of content. As far as course notes, we don't really have any course notes because a lot of this is gonna be like thought process and discussion and philosophy around how you design content models.

[00:02:31]
How do you get someone on your team who's not technical to use it, and what are the trade offs? So we're just gonna talk about it and walk through it ourselves, and that way you can kinda understand from your own perspective what some of those constraints might be.

[00:02:44]
Go ahead and pull that down. And if you're on the main branch, that's the complete version, don't run that branch. Check out to the step/0 branch, that's what we'll be starting. That's the fresh website that you just saw that I purchased and downloaded. So, it's not using the CMS, it's using some CLI thing, but all the content is pretty much static in that website.

[00:03:09]
So that's the version you wanna be on. The reason I went with this approach is because from my experience, for the most part, people use headless CMS to a website they already have. There are occasions where people start a new website and they're thinking about headless CMS, but what I realized in that scenario is that they don't actually know how to use the headless CMS.

[00:03:36]
They don't know what to do with it yet, because they don't have a structure for their website. At minimum, you most likely need a design from your designers, so you know what the content places and layouts and blocks are going to be, and maybe you can do a headless CMS from there.

[00:03:48]
But if you don't even have that, it's gonna be quite difficult. So, I didn't think building something from scratch and then adding a CMS along the way was the actual practical way that most people do it, it's usually this. They have some website in production and now they wanna manage some or all of the content in production.

[00:04:06]
So then they go through and progressively add certain things that they wanna change out. Maybe they start with an experiment for AB testing on a hero, and then they move on to, we wanna add a testimonial section where people can add testimonials and it progressively. It goes that way.

[00:04:21]
So that's how we're gonna do it, because for the most part that's what I've seen a lot of folks do. Size requirements, because it's Next.js, you just need Node.js. So make sure you have node.js V20 at the minimal, I haven't tested it on anything other than V20. I've tested with bun, it works with bun, but I highly recommend just using node because I have a package json in there, and if you want the same versions of the dependencies that I have, then you want to use npm.

[00:04:50]
So make sure you use npm, it does run with bun, just install with npm. You can run with bun if you want. As far as knowledge prerequisites, what you would need to know to take this course, you don't really need to know that much about Next.js. So if you've taken an intro course and have never done anything else, you're probably fine, we're not gonna be diving into crazy Next.js stuff.

[00:05:12]
That was an intermediate course that I just taught. If you wanna know more about that, go take that course. We actually got into the weeds of a lot of different things, Llke caching and stuff like that. And we'll talk a little bit about caching and stuff, but not in too much detail here.

[00:05:25]
The focus is definitely CMS, so a little bit of experience with Next.js, definitely some experience with Node.js. If you never use Node or anything like that, that could be a blocker, highly recommend taking a Node.js course that we have here as well, if you wanna do that before you get started.

[00:05:40]
Disclaimer, we will be using some GraphQL here, but you do not need to know GraphQL to use it, it's abstracted away so simple that if you know what JSON is, you know what we're doing. So, you do not need to know GraphQL to actually use this, but yeah, we will be using some GraphQL, you just don't need to know it.

[00:05:59]
So I'm not even gonna say that's a prerequisite.