Headless CMSs with Next.js

Course Setup

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 "Course Setup" 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 shows a preview of the website that will be used throughout the course and explains the approach he will take in building and integrating the CMS. He also provides instructions for setting up the project and gives an overview of the website's structure and content.


Transcript from the "Course Setup" Lesson

>> Scott Moss: First thing, let's just make sure everyone gets set up, I'm just gonna walk through it. So, everyone is on the same page, make sure you do an MPM install that, should install a bunch of things. Hopefully, that doesn't break for anybody, and then as far as like, to start, you can do MPM run dev.

So, if you run that, it's just gonna run the next dev that's gonna start it on the 3000. And you're gonna see what I just showed you. So, let me go back to my browser, you're gonna see this.
>> Scott Moss: Folks are asking where do you get the theme.

Which theme, my editor theme?
>> Student: No, the website.
>> Scott Moss: The website?
>> Student: Where did you end up buying it from?
>> Scott Moss: Yeah, where did I buy this from? It's Crew Whip, Crew Whip, I think that's how you pronounce it.
>> Student: Cruip.
>> Scott Moss: Cruip.com, there it is right there.

They have a bunch of stuff, I think, I have a subscription with them so I can just download whatever I want. But I think you could buy it one off if you want, they're actually really good. They have them in different languages, and typically, if you buy some of these, it's like, who wrote this?

I would never do it this way, but the person that wrote this wrote it in the way that like most like you should. They did it at the app directory, they did the all the different opinions that the community has adopted and all the different standards they follow the best practices.

I was pretty impressed. I thought I was gonna download it and just throw it all away, honestly, but I didn't really have to do anything other than strip out the hard coded content. So it's very, very useful. But let's just tour the app right quick, let's get a feel for it, right?

So, let's check out, let's see what we're gonna be doing. There's a lot going on here, right? We have these sections stacked on top of each other, like a traditional website. We got a hero, we got this scrolling carousel of ego, logos. We have, I guess you would call this like a feature section where when you click on this, the thing kinda changes over here.

So there's some correlation between these pieces of content. We have another feature section that has like this bento box UI that have some standardization around the shape of their content. You have a title, subtitle, CTA, all that type of stuff, you have your grid here of just your listing all your features, and that's just the homepage.

And it's still going, there's a pricing page too, so we have a lot of that. There's this change log here, which is, I guess you could think this is like, it's not like a block cuz they actually have something like that on here, we'll see that. This is more like an updates, I guess you just show a bunch of updates, but really obviously, it's to change the change log for this app.

A lot of startups are starting to put their change logs on their apps, which I think is really cool. So this one's really cool, you can see something like, someone on the content team coming here, or this is something a product manager might do. The product manager might log into the CMS when they do a new release, add a new update here.

So that's really cool, there's this customers page here that, this one acts very much like a blog. So they have like their customers that have their logos, and when you click on one, so if I click on Airbnb, it takes you to a post that talks about how Airbnb uses this technology.

So it's kinda like a blog post, so this kinda acts like a blog. So we can work with that, there's some interesting things going on there. We even have like, navigation, so just being able to have these links up here, have them in this order, navigating through these pages with these names.

We have a footer that has tons of navigations, there's a lot of content here. There's so much that you can enable someone other than yourself to be responsible for, and it's not just text, it goes well beyond just text as you're gonna see in this course. So, hopefully I can cover some of the more interesting things along with some of the commenting, so that's my goal.

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