Quick Next.js Review

[00:00:00]
>> So the first thing is, what I always like to do on advance courses is get a little refresher on what it is that we're talking about. Cuz I know some people come here, you might be like me where sometimes you're like, I'm just gonna jump into the advance things without looking at the intro.

[00:00:16]
Sometimes I might do that, sometimes I don't, so that's you. We're just gonna go over next.js very quick, as quickly as possible. Just in case you forgot, just in case you need a reminder, just in case some new things were added that you didn't know. We're just gonna walk through just creating a HelloWorld next as app and talk about the different conventions there as quickly as possible.

[00:00:35]
And then we're gonna move on to the good stuff. So what I recommend you do as I go through this course is, like I said, everything's gonna be in here on the website, but I recommend that you pay attention to what I'm doing on my screen. Because I'm gonna talk and go into more detail than what's currently on this website, this website is gonna have just like everything that you need, some explanations.

[00:00:59]
But, things come to mind as I'm talking, I might say them differently, I might show different examples that people ask questions on my screen in my code editor than what actually exists here on the website. So just pay attention more to me and then if you need to go back or if you need to copy something, then you can go to the website, and you can copy that.

[00:01:19]
Okay, cool, so what I'm gonna do is I'm going to open up a terminal here, I'm going to my code directory here. And I'm just going to create a new Next.js app, so I'm gonna use MDX. If you never used MDX before, it's basically like a CLI that allows you to use other CLIs without having to install them basically.

[00:01:41]
So I'm going to say MDX and then the name of the CLI that I want to use is called Create Next App. And then I can pass the argument for a name of app that I want this to be. So what do I wanna call this, I'll just call this app.

[00:01:54]
So I can do that, and you can see that, that's going to basically scaffold out a HelloWorld next js app for us with the latest versions of React, React DOM, and Next, and it's pretty simple. You can see it's telling me it's got all the scripts and stuff, so I'm just gonna CD into the app.

[00:02:13]
Open this up and kind of just, again, just a refresher, just a walk through what's happening in the next day as app, just in case you forgot. So let's talk about some of the conventions here, so Next.js is built on conventions, some of those biggest conventions are around this pages directory here.

[00:02:29]
So all the conventions are mostly file-based. So any file that you create in the pages directory, that's the equivalent of configuring a route on a router. Whereas the name of the file is gonna be the actual route inside of your actual app with some slight nuances. So for instance, underscore app, that's not going to create a route.

[00:02:51]
That's just a way for us to alter the routes app in our application index, just indicates the actual index of a certain path. So the route won't actually, be called index. But everything else is pretty, pretty much the way you expect it to be. And then, you'll have API, API here, is anything that's created here.

[00:03:12]
It's gonna actually create an API route on the back end, that we can access anywhere. And we're going to get to all of that, of course. And that's pretty much it. So then if we talk about the other conventions as far as fetching data inside of our applications.

[00:03:26]
Well, this is where next year's shines, and we're gonna get really into this later on this app, but basically, we have these server side hooks, you can call them or functions. So for instance, I can say, export function getStaticProps like this, right? And whatever our return here on the props property, this is what is gonna be injected into my component here as a prop, right?

[00:03:55]
So I can say Name as I called it Name, Yeah. So I'll have access to that here. So basically what that's doing is, this is doing a couple things is it till the next day is that I want this page to be generated at build time. And then I want it to basically have these props, this data be passed in statically and it does like some server sides caching and then rehydration on a front end with JSON to make that possible, but that's basically what that is.

[00:04:22]
So we're opting into that. And there's some other functions that we can use here that I've talked about in a previous course, and we'll obviously get to them here as well. But that's the gist of it. The other conventions here, the Next js allows us to do, is like the styling.

[00:04:36]
So we can use CSS modules here, which are just basically CSS files with a module and the name, and then we can import those components and basically that allows us to have like scoped CSS. So that's one way you can do styles, you can also do global styles that you add inside of your app.

[00:04:51]
You can import them there as well, that's another way you can do styles. And then of course, any other reacts flavor of styling that you've probably ever used, you can do that as well. So emotion, theme UI, there's so many I can't even list them. I mean, I feel like there's a new way to add CSS and react every single day.

[00:05:11]
But all those should pretty much work here as well. So and I think with Next.js, they add a support, cuz I believe before you couldn't import CSS files that were not modules anywhere other than the app. Whereas, I think with next year's 10, you can now import CSS files.

[00:05:29]
Not an app, which is very helpful, if you have a third-party library that you install for npm and that libraries requiring you to and like import some CSS and you don't want to import that CSS all the way on the root of your whole app. You only wanna import on this component where it's being used.

[00:05:44]
I think you could do that now, that's actually very nice. So really big feature, that's new since last time I taught the the intro course