Default Routes

[00:00:00]
>> Scott Moss: Yeah, let's just make our default route. So like I said, for the default route, I typically just do a null. And again, we don't have a setup that was gonna trigger an error in which the default route would be necessary. The reason you would need a default route for the most use cases I've seen is because these slots can actually have nested routes as well.

[00:00:19]
I could put it routes in the slots. And if this events slot, let's say, had a route that the rsvp slot did not have, when that URL gets triggered, it's also going to, let's say I have a route called /dashboard/, I don't know, stats. So inside of events, I had a stats folder with a page in it.

[00:00:42]
But in rsvp, I didn't have a stats folder. So whenever I go to /stats, nothing gets triggered for rsvp, so you get a 404 cuz it doesn't exist. So instead, I'll put a default there for the rsvp, which in this case would show, null, it'll show nothing. Maybe you would show something or maybe you'll just remove it in your layout if you check the path name, but that's an example of where you would wanna default.

[00:01:05]
Again, also on the heart refresh, but for us, because they're all on the same path, it doesn't matter. Even a heart refresh, not really gonna do anything. I'm doing a Cmd + Shift + R to clear the cache and refresh, which we will be using a lot today if you're using Chrome, we'll be triggering that.

[00:01:25]
So let's make our defaults just to be safe. So that just means we need a default for our three slots. Our first slot is this page, that's children. It's an unnamed slot, but it is a slot. So let's make a default file here. I'll say default.tsx, and I was gonna say, HomeDefault.

[00:01:54]
>> Scott Moss: And I'm just gonna return null,
>> Scott Moss: And I'll copy that. So HomeDefault just returns null. Same thing for rsvps, default.tsx, paste that in there. Change Home to Rsvps. There we go. That's a null. And then same thing for events.
>> Scott Moss: Okay, so now we have our defaults, we're good.

[00:02:35]
>> Scott Moss: Right now, it's really not that interesting until we get some real data on here. So let's work through that because that's when I think all the can of worms, this starts to come out. And for the most part, I've watched a lot of people talk about this topic and teach, and this is the part where I see there's most of the questions, but also most of the confusion.

[00:02:57]
I think there's a lot of people, and no discredit to them. There are a lot of people that if you just follow the docs and you try to teach it, and the docs themselves don't have good patterns or examples, neither will you. So I think that's why you see a lot of people if you go Google how does caching index.js app directory work?

[00:03:15]
You're not gonna get anything good, in my opinion, or anything accurate or semi-accurate. So, cuz a lot of people who are building with it are probably just busy building with it and not teaching it. So, but I build a lot with it, and I have some pretty strong opinions and some gotchas.

[00:03:31]
So happy to talk about it. But any questions on this?
>> Student: Can you explain the default aspect again? When does Next.js use the default?
>> Scott Moss: That's a great question. According to the docs, the default file is used to render a fallback within parallel routes when Next.js cannot recover a slot's active state after a full page load.

[00:03:55]
So during soft navigation, which I said is client side navigation when you use the link, when that happens, Next.js does keep track of the active state. You can think of that as the subpage or the slot, or the route for each slot. In this case, that would be like we only have one, so it'll be page, but some slots have other routes in them, right?

[00:04:16]
You can have something else in here that has a page. So Next.js is keeping track of which one of these routes is the active route for this slot, right? We don't have any nested routes on our slot, so we don't actually run into this issue. What the default file does is it will load this default here when it cannot figure out what other route inside your slot needs to be rendered on a full refresh, because the tracking mechanism is client side, it's a cache.

[00:04:54]
So when you refresh, it goes away, so it forgot. So that's what a full heart reload would do. So that's what the default will be for in the case of that example. The other example is, yeah, this is the other example I was talking about. So and this example would be, you can see, let me bold this up.

[00:05:14]
You can see here that they have a slot called team. It has a subroute called settings, right? There's a sibling slot called analytics, it does not have settings. So if I were to go to /settings, that will load this slot and this slot's page. Because these are parallel, they have to run the same.

[00:05:35]
They do the same thing, that's why it's called parallel. It's going to attempt to do a /settings on this slot. There isn't one, so it'll 404, it'll break. So you set a default as in, if there isn't one, this is the one that you load. So that's what this would be for.

[00:05:52]
We don't have this example cuz we don't have any nested folders in our parallel slots. I couldn't think of a use case, it's kinda crazy, but yeah.
>> Student: So that nested slot that you had, that would be its own page. But I'm curious to, say, you had another folder called settings, I guess that was outside of that slot.

[00:06:18]
I mean, as you wanna do that in that case or with that kind of interfere with this kind of layout or kind of configuration you have for the routing?
>> Scott Moss: If you had another folder called settings outside of this example, that should be fine. In fact,
>> Scott Moss: I think they probably meant to put that here.

[00:06:38]
I don't even know how this is working without a settings folder out here. Well, okay, there's a default here. Okay, yeah, you would want that because- Okay. This is not part of the route segment. So in this case, if you went to settings, there would be no page.

[00:06:55]
It would only show this, this root default for children. And then it would show this default for analytics, and then it will show this page for settings, all inside this layout. But if you had a settings folder here, then instead of showing this default, it would show the settings page for the children in a layout.

[00:07:15]
And then it would show the settings page for the team slot in the layout, and then it would show the default page for the analytics slot in the layout.
>> Student: Got it, okay, that makes more sense.
>> Scott Moss: Yeah.
>> Student: Thank you.
>> Scott Moss: Yep.
>> Student: So parallel routes basically allow you to render multiple pages within your layout?

[00:07:37]
>> Scott Moss: Yep, multiple pages within your layout, that act exactly like pages, they follow the same rules as pages. They just don't have any route segments.