Dashboard Routes

[00:00:00]
>> Scott Moss: Okay, there's some talk here about examples with models, and this one's crazy, tab groups, and all different types of stuff. Let's just hop into it. So implementation, what we're gonna do is, we're gonna make some new slots. We're gonna make a slots for our, basically, if you remember when I showed you earlier, I had the dashboard, and when you went to it, there were three pieces on it on the app.

[00:00:25]
There was a list of events, all your RSVPs, and then account. Okay, each one of those was a slot. They were their own route, okay? We need to enable that. So what we're gonna do is we're gonna make a slot for events, we're gonna make a slot for RSVPs, and then we're gonna have our page, which is gonna be Children.

[00:00:46]
So the way I want you to think about this, if you look closely, if you look at this hierarchy of the folder system, I have @events folder with a page in it. I have @rsvps with a page in it. And then I have the page.tsx itself. So that means inside this layout here, I'm gonna have all three of those as arguments.

[00:01:06]
The page itself, that's children, rsvps, that's rsvps, the events, that's events. These are now arguments inside my layout. I can do whatever I want with them. I can put them wherever I want.
>> Scott Moss: So children is literally a slot that you don't have the name, it's the route that you're on, okay?

[00:01:30]
So what we're gonna do is we're gonna go to our layout, we're gonna do some stuff. I'll talk about this path name thing in a little bit, because we actually do talk about it a little later but I'll glance over here. The objective here is like, hey, if you're on the dashboard, we wanna show you this dashboard view with these slots, if you're not on the dashboard, then we'll just load the children, okay?

[00:01:49]
So let's do that, let's go to our layout on the route, or I'm sorry, should be the layout on the dashboard.
>> Scott Moss: All right, we gotta make it, let's do it. So, layout on the dashboard, layout.tsx.
>> Scott Moss: And we don't have to make this one a client for the route segments or the parallel routes to work, that is not a requirement.

[00:02:19]
The only reason I made this a client is cuz this is the only way to get the current path that you're on, is with this hook. And hooks only work on client components. You might be asking why they always get their route on the server side? There is no good way to do that without some drawbacks in Next.js.

[00:02:35]
Getting the current route on the server side, sure, I can access the request, I can access the headers and get the URL from the headers, I can go into my middleware and attach the next URL to it and get it from the header. But as soon as you often see those dynamic functions like headers and cookies, as we'll talk about later, you kinda break all the optimizations that Next.js gift to you for free.

[00:02:57]
So there's no good way of getting the URL on server side, you most likely have to do a client side. So that's why I have this. Now, I could keep this as a server component, get rid of this, go make a component that uses this hook. And have render props and then render my server component as children of the component that has this, and that might work, but again, that's a little too much work.

[00:03:28]
I'm not doing all that. So just to avoid the client component thing. So, let's do that, I'm gonna say, use Clients, this is our Dashboard.
>> Scott Moss: One thing to note is, when I first created this, I actually had the dashboard as a group. I didn't have it part of the URL segment, cuz I think it's gross to have slash dashboard and URL, it's kinda redundant.

[00:03:58]
But what I realized is that parallel routes don't work inside groups, they have to actually be part of URL segment. So if this dashboard was a route group like this, you would not be able to do parallel routes, or at least in my testing, I was not able to, until I made this actual route segment by getting rid of the parentheses.

[00:04:16]
So you might run into that, If you don't, let me know, so I can see how the hell you got past that, cuz I couldn't. Okay, so we have our children.
>> Scott Moss: We're going to make a folder called events, so I'm just gonna say events here. We're gonna have rsvps, so I'm gonna say that, okay?

[00:04:39]
I'm gonna use this use path name thing for now, just know that this is a string that returns the current route. That's literally it, it's a string that returns the current route. That's what it, it is nothing more than that. We'll talk more about it later. And then we're gonna return a component here, I have a component called Shell.

[00:05:01]
You can just import that from, make sure you import Shell from component Shell and not from Lucide react, which is the icon library. That'll give you an icon, you don't want that, you want this one. Why are there so many components called Shell? I don't know, but this is our app Shell, this is like, the sidebar plus the toolbar is the shell, and then wherever you put in between as children is the the body.

[00:05:24]
So that's what we're putting here. And then what we wanna do is, if the path is dashboard, then we want to render the dashboard with the slots. If not, then just render the children, so not every page has that layout. We only want the main page, which in our case is /dashboard to have that.

[00:05:39]
So that's what we're gonna do. We're gonna say path = /dashboard.
>> Scott Moss: If so, we're gonna do some stuff, if not, we're just gonna say, cool beans, just render the children.
>> Scott Moss: The children here.
>> Scott Moss: And up here, what we're gonna do is, let's wrap everything in a div.

[00:06:10]
It's tailwind, so everything's a div, and you don't have to write all these divs, go ahead and copy that.
>> Scott Moss: Here we go.
>> Scott Moss: Okay, so we have all this if you tried to render it, it'll probably break because we don't have any of the route slots yet.

[00:06:33]
So let's go make those. So what we'll do is in our dashboard, we'll make a new folder, we'll say, events, inside of there we'll make a page.tsx, we'll make another folder in the dashboard, we'll call it rsvps, so @rsvps. Also put a page.tsx in there.
>> Scott Moss: Okay, let's just make some default pages, I'm just gonna make an events slot.

[00:07:09]
You can call whatever you want, the name is not important. I'll probably have a different name in the notes. And you just need to return something, so I'll just return events here, just so we can see it, I'll save that. I'm gonna go to rsvp, I'm gonna do the same thing.

[00:07:25]
I'm gonna rename all this to rsvps, like that, just putting some placeholder stuff in here. You put whatever you want, just something that shows up on the screen so we can actually see the slots.
>> Scott Moss: Okay, so let's go see if this does what we think it does.

[00:07:49]
Which should, if we go to dashboard, should show the app shell on the right, should be a page split up into three sections, one big one on the left, two on the right. If not, we broke something. We might have to make the default pages, but let's check it out.

[00:08:07]
We'll see. We might get away with it. So I'm already signed in, I'm sure someone's gonna go to /dashboard. If you're not, make sure you sign in or sign up. And yeah, there we go. So, there's my homepage, the sections are there, but I don't see the actual content of the slot slowly up.

[00:08:29]
So I would expect to see events here, I would expect to see this here. So, I don't know why that's not doing that. I might have to restart this since I just made some new folders. So, sometimes when you make new folders in Next.js or you delete folders, you have to rebuild it to catch it.

[00:08:50]
So I'm gonna try that. If not, we'll just keep building it and maybe it'll resolve itself once we actually add the things. That was it, I just needed a rebuild. So there you go, now we have independent pages as sections on one layout. You might be asking yourself, why the hell would I do this?

[00:09:13]
I can just do this myself, I can just go get the data, do some CSS, make a query for this, make a query for this one, make a query for this third one, and just put it on a page myself. Well, yeah, you can, but you have to think about everything that comes with that.

[00:09:27]
Okay, you got a loading state for this one. You got a loading state for this one. You got a loading state for this one. You have an error state for each one. You have a fallback. You have all these different things that you will have to write code for if you want a great experience.

[00:09:40]
By making each one of these a page, you don't have to do any of that, you get it for free because in Nextjs, as you'll see in a minute, all we have to do is just make a loading file or an error file. And Nextjs will handle that for us.

[00:09:53]
It'll show the loading when it needs to show, it'll show the error when it needs to show. You don't have to write any logic for that, and it all happens server-side, which is great for things like SEO, which for this example, doesn't matter. But, yeah, things like that.

[00:10:05]
So, yes, you could just do it yourself, but you can also make a web app without React. So [LAUGH] it doesn't mean you should do it. [LAUGH].
>> Student: So to clarify Next.js is mapping the folder named events and rsvp is to the prop events and rsvps in the layout component?

[00:10:25]
>> Scott Moss: Correct, they are the exact same names. If I change their folder names, I have to change them in the layout, and not the other way around.