Static Routing

[00:00:00]
>> Okay, so now that we got that out of the way, let's talk about the routing basics. So, Next.js, like I said, is a React-based framework. But also, like I said, React doesn't have any routing associated with it at all. You kind of go find your own. Who here has built a React app where they had to like go find their own router for React?

[00:00:20]
Right, what'd you end up using?
>> React router.
>> React router. Yeah, anyone had any other luck with any other frameworks or any other libraries for routing?
>> Abusing anchor tags. Of course just using anchor tags, yeah.
>> Abusing.
>> Yeah, abusing it, yeah. I think there's another one called, like, Reach Router.

[00:00:37]
I'm not sure how popular that one is, but I think it's also made from the same people who made React Router as well. I don't know. But even that alone is just enough to be like, now I got to go research all these routing libraries and see which one's the best and the most updated and then learn that thing.

[00:00:51]
Well, Next.js as a framework is really just about combining a bunch of conventions that do things for you automatically, where it's supposed to feel magical. Some people like that magical feeling. Some people don't like that magical feeling. I personally like the magical feeling when I know what it's doing and I know what the alternative is.

[00:01:10]
So one of the magical things that they do is that they just hook up the router for you. So you don't have to go figure out and download or even configure a router. You just make files and folders and it's done. So how does that work? Well, it's all based off the file system and the structure inside of our app directory.

[00:01:26]
So basically every single folder that you make in the app directory is going to correspond to a different segment in your router for your app. So an example would be if we had, /app and then we had /dashboard and then /settings that's going to make a route for our website.com /dashboard /settings.

[00:01:46]
And then to actually create a page that loads up on that segment, all we have to do is create a page component. So page.js or page.jsx or page.tsx, just a page, it has to be called page. If you use the previous version of Next, this wasn't the case.

[00:02:02]
So if you use the pages directory, any file that you made in a folder was going to be that route. So that's not the case here. In this case, you actually specifically have to call it page in order for it to be a page in that segment. So let's check that out.

[00:02:20]
We already have one. If you look in the app directory, there's a page right on the root. So seeing how this page file is on the root, that means its path is just slash. So this will be the homepage, right? And we couldn't make another page tsx or jsx or js in this folder because we couldn't have two home pages and we couldn't have two files with the same names here.

[00:02:40]
So you kind of got to think through how you're working through those conflicts. But let's say we want to make a another route here. So let's make a new folder. And we'll call it, let's call it docs because we're going to have a docs section where we talk about the docs for our API.

[00:02:59]
So I can say docs and then I can go in here then I can say page.tsx. And all I have to do is just export a component that returns some jsx, right? So I'm just going to say const DocsPage. And I'm just going to make sure that's a default export.

[00:03:21]
All right, and then inside of here, I'm just going to return, not here. Oops, inside of here, I'm just gonna return a div that just says DocsPage. All right, so now we have our DocsPage. And now without having to stop or start anything, I can go right into the browser.

[00:03:40]
I can go into our app. I can say docs, and I get my docs page And that's all I had to do to make a new route, very simple, very easy. Didn't have to research a router, didn't have to learn the router, I didn't have to install the router, set it up.

[00:03:58]
I just made a new file, a new folder or a new file, that was it, it was free. Any questions on that?
>> Can I just see the code for that real quick?
>> Yeah, absolutely. So I made a new folder called docs on the root of the app folder, and then I made a page.tsx in that, and it's just a component that returns a div.

[00:04:18]
>> Is there a labeling convention for capitalizing the docs page?
>> Yeah, for the for the most part, you want to probably capitalize any component that's a page, I would say that's usually the convention. And in fact, if you have a component that like using for like UI and you don't like capitalize it, and you try to bring it in, you will get an error from React saying like, all right, this is not a real component.

[00:04:42]
So because it can't tell if it's an element or component. But in the case of this, it's just a convention. I don't think obviously Next.js doesn't care about it. So but yeah, you'll see that most of the time of just being like capitalizing your components. And in fact, in my case, I capitalize pretty much every component that I have just because I don't want to run into any issues from something like Next.js or some future version of React.

[00:05:06]
Also I'm very lazy. And sometimes I make components the same name as elements. And all elements are lowercase. So I could just avoid that collision by just making mine uppercase like a component called image. Well, you don't want to lowercase image component cuz in what about the image tag that is also img.

[00:05:23]
So, yeah, I just uppercase everything Any other questions? Cool, yeah, and so that's pretty much how you would make a route. It's basically free, but it does get more advanced than that. So with the newest version of Next.js, we have really cool features in the routing that allows allow us to do some exciting stuff.

[00:05:52]
One of the things is something called route grouping. So let's just demonstrate what route grouping is. So you can, it's better just to demonstrate than to talk about it because it's kinda cool. So route grouping is basically a way for you to combine a bunch of routes that live in a similar place.

[00:06:12]
Imagine you have a dashboard that has a very specific layout. It has navigation on the left, some navigation on the top and then the content, right? And then within a dashboard, there's 30 pages, right? Okay, they all have a very similar layout. So you kind of want them grouped underneath the same segment.

[00:06:32]
But let's say you don't want to put /dashboard in your URL. You don't want all those routes that live in the dashboard to have to have /dashboard in the URL. You don't want the URL to be affected by them being grouped together. Because what you would normally do is you would just make a new folder and call it dashboard, right?

[00:06:47]
And then you would just put all your stuff in here, and that's totally fine. But this would make our website.com/dashboard/ the rest of our routes. I don't want that. But I do want them to be grouped together and have that common layout. And we'll talk about layouts later.

[00:07:01]
So what I can do is I can actually just wrap this in a parentheses like this. And now I get the same benefit of any route that I put in here that's gonna have the exact same layout shared across them, but it won't affect the URL. So let's give it a shot.

[00:07:21]
So the one thing that you have to think about when you do these route groupings is because this segment is not going to be part of the URL. That means if I go in and I make a page.tsx in here, what is the actual route for this page?

[00:07:37]
If this is ignored in the URL, so then what would be the route for this page? Anyone wanna guess?
>> Home is the index.
>> It would just be home but I already have one, right? So now I have a collision, right? And this is something you have to think about.

[00:07:50]
Because this is ignored, this will be home now. But I already have a home. So which one is gonna render? Whichever one Next.js resolves to. Actually, I think it will actually just throw an error. Let's see. DashboardPage, I think Next.js is smart enough to be like, yeah, you have a conflict there.

[00:08:12]
Either way, you're not going to get the behavior that you expect it if you do this. So you just have to think about it when you do these route groupings. So let's save that. And then let's go to just home and you can see it resolved to the one that was on the route, right?

[00:08:30]
It just went there instead of trying to go here. Now, if I try to go to /dashboard, we get a 404, right? Because this segment doesn't exist in the URL. So you can't even go to this page. It's like you just made a page for nothing. So to avoid that, typically what you'll have inside of a folder that's grouped, or other folders to create real segments, right?

[00:08:55]
So you might have dashboard here, but then inside of dashboard you might have something like an actual folder with no parenthesis on it, it's like settings, right? And then settings might have a page inside of it, like so. And now I can change this from DashboardPage to SettingsPage, And now I should be able to route to /settings and then get this page, right?

[00:09:25]
So now if I go to /settings, I'm on the settings page. Okay, so again, why would we want to do this? Well, it has something to do with layouts. I'm going to briefly talk about layouts, but we have a whole thing where we talk about layouts. But basically, layouts are, if you've ever built any app in React, you've probably made some of these.

[00:09:45]
This is like, I have some common UI that I want all of these pages to share. So I'm going to wrap them around these pages. That's basically what layouts is. But you don't have to do it yourself. All you have to do is just make a layout file.

[00:09:57]
So if I go into the dashboard folder and make a layout there, every single page that's on the level or below will share that layout. And that's why you would do group folders, is that, I want everything in this folder to have the exact same layout without affecting the URL.

[00:10:13]
If I do want it to affect the URL, then I would just get rid of the parentheses. That's basically it. That's route grouping.
>> If there's a layout and a page file inside of a
>> A folder.
>> A group, yeah, it'll render the page and then render the layout inside of that.

[00:10:32]
>> Exactly, if there's a layout next to a page, the page gets rendered in the layout always. Every page on the same level or below a layout gets rendered in that layout. And we will talk more about layouts cuz you can also nest layouts and it gets pretty crazy.

[00:10:50]
But yeah, that's, that. Any questions on that? Okay, cool. So let's make the routes for our app. So for our app, we're going to have, I mean, here's kind of the layout here. We're going to have basically our dashboard, which is going to be route grouped. So we're not gonna have it be part of the URL.

[00:11:13]
Don't worry about this API thing. We'll talk about that a little bit. And then we have this docs folder here with some crazy thing. We'll talk about that crazy thing in a minute. So let's kinda set that up right now. So we already have our dashboard. And inside of our dashboard, we need a todos folder where we have our page.

[00:11:30]
So let's do that. So I'm gonna change the settings from settings. I'm gonna rename it to todos. I don't know why I copid that whole thing. I gotta write it all over again. Dashboard, okay, why did it show it like that? That was weird. It should just stop showing me the shortcut and just show me the whole thing.

[00:11:51]
Let's call this todos. There we go. Okay, there we go. And then we have our page in there. And then our doc, we have our page in there. So, so far so good. We have everything that we need. We're able to route to /todos. We're able to route to docs.

[00:12:07]
And we're able to route to the page. So we can just verify all of that. I'm going to go to home, should be able to route there. Should be able to route to /todos which just say settings and then we should be able to route to /docs, which says docs.