Static vs Dynamic Routes and Layouts

[00:00:00]
>> Scott Moss: So what we're gonna do is start setting up some of these routes and things like that, so I'm gonna hop into the next lesson that talks about those routes and we're gonna start making them. So before we jump into it, let's just talk a little bit about like static dynamic layouts, I promise we're gonna get to the code, I know people are like, write some code, get this app done.

[00:00:25]
Static routes are pretty much what you think they are, these are routes that have static information and they don't change, so Next JS by default will pre render these and just send back HTML. So these are indexed static websites that never change, and then we have dynamic routes, these are routes that typically have parameters in them.

[00:00:47]
So the way you can annotate a dynamic route in Next JS is you can use inside the directory for that route, and I'll just kind of show you you can do something like this. So let's say I wanna make a route that's dynamic, so inside of the app folder, let's say I have a folder called users and I wanna show user profile, so I'll make a new folder in here called id, like that.

[00:01:13]
And then inside of there I have to put a page, so this is a dynamic route, so this is gonna create a route for user, that user's id, and then that's the route, whatever is on this page, that's what's gonna render. So this is a dynamic route, whereas a static route would just be like settings, and then I would go in here and I would say page, and now that's a static route.

[00:01:41]
That's always gonna be settings, it's always going to be static, at least as far as like what the route is concerned about the data could be dynamic, we'll talk about that later, but the page itself is static. So that's the difference dynamic static, pretty simple, there's some more advanced things like catch all routes, so you can do like the dot, dot, dot spread opera spread syntax followed by the parameter name.

[00:02:01]
And this will catch every route, so in this example, if I have app docs with this spread of topic, that means I will match any sub-path of docs, so it doesn't matter how nested it goes, I'm just gonna match match that, right? If I want that to be inclusive and also include or I guess it's either inclusive or optional, however you wanna describe it, and also catch docs, then I can just put two brackets around it and then It'll do the same thing.

[00:02:27]
So this would catch this, but it will also just catch Slash docs as well, this is really great for like content type websites where I think Vercel's documentation website does exactly this, right. If you kind of look at the structure of their URLs, it's like slash Docs app, which I'm guessing it's app router, and then they have like all these sub topics and stuff here.

[00:02:55]
I would imagine they just probably put a spread here that matches all this because each one of these doesn't matter which topic I click on, it's the exact same page, it's just different content, right. It's literally the same page, the layout, everything's exactly the same, so I would imagine they just did a spread operator there and then they dynamically.

[00:03:13]
Well they definitely did pre rendering with like get static params but the spread operator allows them to just make one route in their app for all those pages versus having to make multiple every. Instead of having to manually make a route for each one of those topics inside their file structure which will be bad, alrighty, layouts only thing you need to know about layouts is that they're what you would have used layouts for in React anyway.

[00:03:39]
They're just built into Next js, they are components that wrap pages and they never change, it's pretty simple if you want a layout, in fact we already have one here. Its job is to in this case, this is the root layout, so it's kind of like the index HTML as well, its job is just to render its children which are it's routes, that's all the layout does.

[00:04:01]
And everything in here never re renders no matter what, it's always gonna be here. Which is great because if you change routes all the time and you had some navigation elements on the page that you didn't want to change because they should just stay there. You wanna put that in a layout, if that navigation item re rendered on every route change, that would be annoying and possibly a performance hit depending on what you're doing that navigation layout.

[00:04:24]
So you wanna put things like navigation things like that inside of a layout, set up global styles like I'm doing here, things like that, and then yeah, you can have as many layouts as you want. You put a layout in a folder and then each route will look to its closest ancestor to determine what layout to use, so in this case you have to have a root layout for the whole app.

[00:04:50]
And then if I wanted just the users for folder to have a specific layout, I can put a layout on this folder, if I wanted settings to have a specific layout, I can put a layout on this folder. And they also inherit so the layout inside the settings, and the users will also be embedded inside the layout in the root so they get nested, if you want the layout to change, then swap out layout with a template.

[00:05:10]
It's the exact same thing as a layout except for it changes on every route, so this is great, if your layout has like animations in it or client site state that has to be changed, then yeah, you probably want to use a template instead. Last two things we got route groups, route groups are cool because you can do stuff like this, so let's say, let me just get rid of these right quick, let's say I want to.

[00:05:37]
I'm making an app and actually this is what we're gonna do, we're gonna have an app where there's like a marketing side which are like static pages. And then we're gonna have like a dashboard side that's an actual app, I wanna separate them to have different layouts, but I don't want the URL to reflect that.

[00:05:51]
So for instance, I don't want the URL to say marketing and then have all the marketing pages, that would be gross maybe I don't want the URL to have app or dashboard in it. So what you can do is you can make a route group, so if I make a new folder here, put it in parentheses and say marketing and then I can do whatever I want in here.

[00:06:11]
So in this case I'll make a new folder or yeah, say a new folder and we'll call it like, this is the about page, what this is gonna do is it's gonna create a route called slash about, not marketing about but just slash about. But by putting it in this marketing group, I can put a layout in here and now everything in this marketing group would share this layout without the consequence of the URL also having the word marketing in it.

[00:06:40]
That's all this is, so it's just like creating another sub route, but it doesn't actually show up in the URL, it's just for the case of I need these routes to share a common layout. But I don't wanna change the URL structure, so that's what a route group is, it's really great for that.

[00:06:58]
Does that layout also inherit the root layout. Yeah, layouts always inherit other layouts, there really is, the only way to get around that is, so if you have. Right now I have a root layout, I could get rid of this root layout and make another route group and put a layout in there and then technically I don't have one root layout anymore.

[00:07:25]
Now I have in root layouts and depending on what route I go to, it'll use that, but other than that, yeah, at some point it's always gonna inherit from its nearest ancestor. So if you use the route groups, you don't need necessarily the root layout in the app directory.

[00:07:40]
Right, exactly, because right now I don't have an index page, so I could make an index page right here on the app. But because this is technically not part of the URL, I could put the index page in here and this is technically the index page of my website right now because this does not exist in the URL.

[00:07:57]
So it's still just slash, this is still just slash, so in that case I could just put the layout in here and not have it here and it would be just fine. But as soon as I try to go to, if I had another route out here, it'd be like, wait, I don't have a layout, and then it will break because the layout would have been in a marketing group.

[00:08:16]
And yeah, the last thing before we make these routes is the link component, we'll use this one's pretty self explanatory, don't use anchor tag, use link component, what does this do? Same thing as anchor tag, except it prefetches and it does client side routing, client side routing. If you've ever used any router framework you've had something like this, same thing, it just does prefetching, so use this, it comes from Next js.