Dynamic Content & Static Routes

[00:00:00]
>> More about the tech stack. Like I said, reason nextjs 10. We're using node js 10 plus. So if you don't have 10 plus, just if you're not using nvm or into manage your node versions, I highly recommend doing that and making sure you're on at least 10.

[00:00:14]
I think this might work on eight. But 10 plus, I think is where you wanna go. I'm pretty sure I'm on 12, so yeah, we also are going to use the MongoDB. Hold up. Don't worry, if you don't have MongoDB on your computer, you don't have to install it.

[00:00:29]
I'm gonna show you how to use a hosted solution. But if you do have it on your computer, it might save you some time. But when we get to deployment, you'll have to use a hosted one anyway. So there's no avoiding it unless you just don't wanna walk through the deploying part.

[00:00:44]
Which I get that, who wants to set up environment variables where I get it? But yeah, that's basically what we're gonna be doing. And that's pretty much it. I mentioned in here, like I said, we're not gonna be doing the UI stuff. If you wanna intro to react and how to do all that stuff, Brian who's a really great instructor here.

[00:01:03]
A friend of masters and works at Microsoft has a course on intro to react that covers a lot of that stuff. We will not be covering JSX and react in this course. We're just gonna breeze through that. We're gonna focus on next JS and production. So if you're here to learn react, you should go look at this one.

[00:01:18]
But hey, stay sharp. Try to follow along. If you can't, you might learn some stuff. Okay, cool. Let's move on to our real first lesson. And then from there we'll have a little break and kind of soak on what we just learned. So the first thing I wanna do is kinda talk about something that I'm really passionate about and slightly biased.

[00:01:42]
Because I'm the CEO of a company that basically solves this problem. I wanna talk about dynamic content. Okay, so I wanna talk about how content is data and I felt it was really important to make a separate page just about this because next as and pretty much every server side render framework, it's kind of built on this concept.

[00:02:03]
And if you don't really buy into this concept, it's, I think you're missing half the value of what these frameworks offer you. So just buying into this concept really just changes how you think. And it changes what you think is possible. And apps that you're making, like things that you didn't think were possible are not going to be possible.

[00:02:19]
Okay, so I want you to think about how content is data. So what I'm basically talking about is, imagine you made a react app. And I don't know you had at the time you made the React app. You guys already had a million users in a database because you already had a view app that was serving them you're switching over to react.

[00:02:37]
There's there's no way you're not gonna make a react out that hard codes. All your millions of users data an app? I mean, how is that even possible? Like you can't even do it, you have to pull it down from API. It's dynamic. That's the whole point of an app.

[00:02:49]
Well, your content should be thought of the same way. Right, your content is data. It just the users that that data belongs to is actually the users on your team. Maybe even yourself, but it is data. It should also be dynamic. It should never be hard coded. And I think that's something that we just overlook.

[00:03:06]
Because as engineers working on front end frameworks and JavaScript, we just haven't had the tools to actually think about it that way. We just been forced to hard code strings. Inside of JSX, I think if you had to do 18 in or localization, then maybe you were forced to, like take it out to like do those translations, but other than that you almost never took out like hard coded content in your JSX.

[00:03:31]
That was it. That was like as far as you went, maybe you build your own CMS. I don't know but you really got to think about content being dynamic. The more you can make dynamic in your app. The especially on the team, the more the more productive that everyone's going to be, the more they're gonna like you.

[00:03:50]
And the less work that you don't wanna do. You won't be on the hook for work. You don't wanna do basically you're right, you're not going to get a call to come fix this typo, this punctuation error or move this here that because you made a dynamic, so you're really, just helping a lot of people out.

[00:04:05]
Making things dynamic isn't gonna replace your job, pulling a user's profile down from the database does it replace your job so you shouldn't make everything dynamic. So in order to do that there's these things out there called headless CMS says we won't be using a headless CMS in today's course because there's just so many of those CMSs.

[00:04:25]
And obviously with me being a CEO of one of the CMSs. I just felt like it was just too biased to put one in there. Especially if it's mine. So we won't be actually using one but I wanted to make sure I modeled the course in a way that it doesn't really matter if we're using one or not because the way that I'm gonna show you how to interact with the CMS is gonna work for any CMS that you use doesn't matter which one it is.

[00:04:44]
They're all gonna work the same. So we're gonna be good, but basically a headless CMS is a CMS that doesn't really care about what app you're on. It doesn't know what app you have. It just gives you content either via an API or Git. That's it and then it has like a GUI associated with it for the non technical people.

[00:05:04]
And that's where they get to go edit stuff. You can think of it as like a form, they get a form or they get to edit content, they hit a button. And then you can pull that content down in your app. That's it. It's just data. It's really just data.

[00:05:16]
And that's what a headless CMS is. So we're gonna be working with our own CMS that we built into our app basically. And one bold prediction I want to say here is I think by the end of 2021. If you, if, when starting an app, you don't include a CMS.

[00:05:32]
I think it's going to, could be considered a bad practice, because if technology is like next day yes. And all these other frameworks start going further than they are now and making all these features that make it like obvious to use a CMS, it's gonna be that. So, I highly recommend just getting into that mindset.

[00:05:51]
Have CMS and frameworks like next.js and stuff like that. Any questions? Nope, okay, all right. And we'll move on to this one and after this, we'll take a break. Okay, so I wanna talk about static routes and content. So this is a mouthful, but we're gonna start [COUGH] And this first lesson we're going to work on.

[00:06:17]
[COUGH] Excuse me. Okay. We're gonna talk about dynamic content on a static route for a static page right. So, three different things. So just picture that our content is gonna be dynamic. The route is static, and the page is also static. So that's what we're gonna work on.

[00:06:35]
So if we go look at our app, we will only have like one of those pages and that's kind of gonna be the the sign up page or I'm sorry, the index page. We're gonna work on the index page. Right now this page if we look at it.

[00:06:45]
It really, I mean, they did a good attempt of trying to not heart code their content. They didn't hard code other than her JSX, they actually passing it down as a prop. But the prop comes from default props. So, half step is still hard coded. It's just not in your JSX.

[00:07:05]
We don't want this. We want this content to come from our CMS. So anyone on our team can edit this. So that's what we're gonna do. We're gonna make this content dynamic. Even though this page is static, even though this route is static, as in, there's no parameters in this route, and dynamic static page as in, it's going to be rendered statically by next day.

[00:07:27]
Yes. And we're not actually doing. Anything dynamic in here, there's no hooks to make API calls or there's no client side, any of that stuff. It's completely static. You can serve this from a CDN. But we still want the content to be dynamic, right. And that's where the beauty of next JS comes in.

[00:07:42]
So let's start with that. So we head back over to our notes here is basically gonna start with get static props, right. So if you haven't heard of get static props, I just talked about it on the, refresher. Basically what we're gonna do is we're just gonna come down here and we're gonna export a function called get static props.

[00:08:09]
Like this good stuff prompts, if I can type, there we go. Get rid of that R, cool. And then what we're gonna do is we're going to return some data from our CMS. Like I said, I created like a little small mini CMS here. Let's go look at it.

[00:08:25]
[LAUGH] It's actually very complicated. It was the hardest part of the entire app to make this file that spits out JSON. That's our CMS. So that's it. It's just a file that has JSON in it. And we're gonna use this as our CMS. And again, this works exactly like any CMS.

[00:08:44]
At the end of the day, you're getting back some JSON. It doesn't really matter where it comes from. And you'll see why /next.js doesn't care or actually doesn't even know where it comes from. So we'll be using this as our CMS. So I'm going to import that at the top here.

[00:08:57]
So we can import from wanna say content like that, and then I wanna get the home part from content like that. And then down here, I wanna return some props. For and I wanna call it, what are the props that it's looking for, it's looking for a prop called content, so that's what I'm gonna call it and we'll return content down here and I'm gonna set that to home.published.

[00:09:24]
We're gonna do published values from our CMS for now, we're gonna talk about drafts later and how you can look at drafts and things like that. But for now, we're just gonna return published. So I'm gonna save that. And then now if I go back, I shouldn't see that really bad tagline and body anymore.

[00:09:42]
I should see some real content on our site. So let's go do that. Let's refresh this thing. And then there you go. We got some nice content on our site. I mean, obviously, this was pretty trivial was pulling from a JSON file. What I want you to understand is, there's really no difference.

[00:09:58]
Imagine if this was an async function, okay? Imagine this is async and this was a call to like cms.get like my homepage right. This works exactly the same. It's still gonna work exactly the same. It doesn't matter what CMS you come from, this still works exactly the same, right.

[00:10:17]
So like next.js doesn't care where it comes from inside of git static props. So that's why I didn't want us to actually go through and sign up and use the CMS. We're just gonna use JSON, it works the same.