>> 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.