Introduction to Next.js 13+, v2 Route Grouping

Transcript from the "Route Grouping" Lesson

[00:00:00]
>> So we left off doing some routing stuff, making dynamic routes and things like that for our site. This is really another cool feature that the latest version of Next.js has when it comes to routing that's called route grouping or grouping. Route grouping. Just call it route grouping was actually really cool.

[00:00:21] So basically let's say we wanted to create a Next app, but it was gonna be one app, and it was gonna be for our marketing site. So our website.com and all the stuff there. But also everything behind the authentication screen, everything behind a signing screen, so the dashboard as well, it's gonna be in the same app, which is actually something a lot of people will do Next.js.

[00:00:49] But you don't really wanna like change the URL segment. Maybe you want it to be your website.com/about, you got another one for a slash pricing. You got another one for a slash blog, within for the dashboard. You don't really wanna mount it on slash dashboard. If you just wanted to go like to slash some slug or something like that, right?

[00:01:11] How would you do that while keeping those things kind of separate as far as like layout and things like that. Well, that's what route grouping is. So route grouping allows us to do something like this. So we can go into the app directory, and we can make a new folder.

[00:01:26] And we can do something like parentheses. So you can say parentheses and we could do something like I don't know marketing site here like this and then I can go into marketing and then I can make a new folder into marketing. I'll call this I don't know, I'll just call this one home.

[00:01:47] This doesn't really make sense but it's called home. And then inside of home I'll say page.tsx. So I can do that. Export, default function, marketing, home like this. And this is just an example, so you don't have to follow along here trying to show you something. So, if we're looking at this and we understand how folders and names work in Next.js.

[00:02:14] Parentheses aside, this should make a route for slash marketing slash home. That's what this should make. So let's see if we actually get that. So if we go to slash marketing slash home we get a four. So we actually didn't get that and that's because this is a group route and the difference between putting parentheses around something and not is that it's just ignored in the router.

[00:02:43] So the router's just gonna ignore that marketing, and the real route is just gonna be /app/home, or I'm sorry, /home, cuz app is just a folder here. So it'll just be /home like that and then we get the marketing page. So this is great. When we get to talking about these things right here called layouts and stuff like that you'll understand why you want something like this.

[00:03:08] But it's just a great way to separate your app out based off of different functionalities like that without affecting the URL if you choose not to. So you don't have to keep mounting so many different segments on the URL because you have all these different paths in your app, you can just like just ignore this part.

[00:03:26] But it needs to be grouped because they share a layout. They share the styles, they share these whatever, I wanna put them together but I don't want the URL to be affected by that. So that's route grouping is actually quite powerful.
>> Questions good?
>> Yes.
>> What controls or protections are in there for collisions in this case because theoretically, I could now set up a folder called home, just in the root of the app directory.

[00:03:53] And now there's confusion about which home did you mean.
>> Exactly. So if we did this, we put home in here. Let's just say this is the route one. And then we go back here and we say this is the nested one. So, if I run this, you can see I get the nested one.

[00:04:15] And the reason is cuz that was the first one. So the first one's gonna win here, so yeah, you have to be very careful about how you handle those collisions. So in their documentation they recommend like, yeah, just be careful. Because yeah, you will run into this. It's just like any other route or if you did this in express the same thing will happen you have, if you did app dot get slash and express three different times.

[00:04:38] The first one is gonna hit because that's the first one that was registered. So it's the same way. So you just have to be careful about that. And it's not as obvious cuz it could be like, you got to take an account like this is not in the URL, so you have to think about that.

[00:04:53] Okay, cool. So what we wanna do now is just kind of set up the routes for our app that we're making. And especially just like I said, something like a patients about yourself, maybe you have your blog, you have a way for people to contact you, there's a form, and that's basically it.

[00:05:09] So let's set up the routes for that. So we need our homepage, we need a blog page, we need a blog post page, and then we just need a contact page. So let's set those up. So we probably have most of those already. I'm gonna get rid of the about here.

[00:05:23] I have my blog, I have my blog page, I have my BlogPost page here, and then the last one is gonna be the contact and then index. So we have index, I just need to make a contact one. So I'm gonna make a new folder, I'm gonna call it contact, like that.

[00:05:42] And then what file do I need to put in here?
>> Page.
>> Page, exactly. It's gotta make a page. Page.tsx do that. And this is the contact and well, we'll fill that out later. It's not so important. JSX is not so important, that's just react. Cool. Okay.

[00:06:12] Yeah, if you refresh too fast you'll get that error. All right. So we got that,got out route set up you can always go back here if you want to check them out but again it's just the index blog blog slug title whatever you want to call it and then a contact page.