Nested Layouts in NextJs 13 Using Route Groups

in this lesson we're going to talk about route groups and why you would want to use them in your app router as we learned in the previous lesson anytime that we create a new folder inside of our app folder it is going to create a new URL segment inside of our domain or URL path so we had the about mapping to the about segment we had the team this is from our example previously which was nested inside of the about which then created this team segment now you can prevent this mapping by marking this folder as a route group therefore that folder would be opt out of your segment and it's not going to actually be mapped or affect your url now this would allow you to organize your project files and Route segments into logical groups for example you have all the routes for your marketing stuff in one group or in one folder you would have everything that belongs to shop or maybe authentications in different groups so the first use case is just organizing the routes inside the app folder in different groups now how would you create a route group or how would you mark a folder as a route group you would just have to wrap the name of that folder in parentheses now as you realize this is the example that we had we had a nested route of Team inside of the about now we're going to reorganize this in this uh lesson by creating a new folder called company and we are wrapping this with parenthesis so if you're marking this as a route group and putting the aboutson team actually side by side as sibling Pages inside of this route group now as I mentioned this when you mark a folder as a route group you you're going to take it out of the router or you're going to opt it out of being mapped to specific segments in your url so as you can see this company doesn't affect our URL it's actually pointing to the same root of my app which is affected by our app the page and layout inside of our app and this about page now inside of this route group is going to be then directly mapped to forward slash about segment inside of our URL now team is no longer nested inside of the about it's just we brought it out as a sip link inside of this route group and now it's going to be mapped to forward slash team as its own segment so as you can see this route group does not affect our URL path and it really doesn't matter what you name this because it's not affecting any segment it's just at this point for organization purposes so I'm going to put all the pages that's about the company that this website belongs to like the about page the team page the contact us page careers page I can just organize all of those pages inside of this route group now I can have another route group for again authentications so I can put in my sign in sign out error Pages for auth inside of that route group and organize my routes and project files inside of the app router now the other use case that we're going to see together is that you can actually share layout between these route groups so if I bring in this layout file that I have over here and put it at the same level as these other files what we have done here is we've created the layout inside of a route group and by doing that we are opting all of these pages that are inside of this route group to this layout so that's the second use case for Route groups you can opt in different pages in and out of layouts without affecting the URL now that's the important part because you could opt pages in and out of layouts by creating different segments and those segments or those folders are going to affect the URL but with route groups you can opt in any page that you have let's say we have a contact page that's currently living inside of the app out of this route group but I want to bring that contact page to also use this layout all I need to do is to bring it inside this route group this is going to make that contact page actually share and use this layout but it does not affect the URL you would still access that contact page at four slash contact because when inside of this route group this route group does not affect the URL so I want to emphasize that the point here is to create a nested layout without affecting the URL now similar to this same concept you can create two different layouts so if you have you know different route groups inside your application and you want to have entirely different route layouts so the outermost root layout that you have inside the app you want it to be different between different route groups you could do that too all you need to do is to delete that outermost root layout that you have from inside the app and put root layouts inside of your route groups then you have to create multiple root layouts one for the company maybe one for the auth pages and whatnot now that's a less common use case but but the use of Route groups you now know that you can create different routes layouts let's not jump into the code and actually put this into action so inside of our project up until this point as you remember we had this about page inside of it we nested the team page and inside of this about we had this layout which was affecting the about page and also the team page which is nested inside of the layout now if I go to our application here all I did over here is to just create this nice border or about layout over here so we can visualize what's happening so as you can see this is about for slash team it is sharing this about layout and if I go to the about page itself this text changes which is the actual page for the about if I go to the about page it's just rendering the about and it's about layout is this layout that we have that lives inside of the about and again as a refresher it was just a section over here that's now rendering this about on the border and then we have this children prop because you do need to have a children prop inside of your layout and that's actually where the children layouts and the child pages are going to be plugged in okay now let's turn this into the concept that we just saw together so I'm going to create a new folder I'm going to name this company and I'm going to wrap the name with parenthesis so I create a route group which is now opted out of or my URL segment so I'm going to bring in this team inside of this company I'm going to also bring in this layout inside of the company and I'm going to also bring in the about directly inside of the company so let's just see what happened here I have now this company route group I have the about page with the page inside of it I have the team segment with the page inside of it and I have this layout which is directly underneath this company route group which then allows these two pages to share this layout the layout is the same layout or about layouts or company layout maybe we can rename these two now company layout so it's shared between all the pages that somehow relate to our company we have a contact page over here so let's just bring in that company into our company route group now again the contact segment with a page over here now going back to our application nothing should change we still are accessing the about page with that same about layout and if I now go ahead and access the team page just remember the team is no longer nested inside the about it's just living at the root if I go back now the team inside of this company route group is leaving at four slash team it's no longer nested inside the about so you're going to go forward slash team we're still sharing this about layout and then we have this team over here too maybe I can change the name here to be company layout as well so we can see this company layout is shared now if I now also go to my contact page I should also see this company layout which is the outermost layout that's now shared between all of the pages and segments that live inside of this route group and then the contact page is just the child page that's plugged into this layout now to make this a bit fancier I have created a new component let me just refresh the page so I'm bringing in a site navigation over to this company layout as you can see here this is going to be shared with any page that's inside this route group we have this site navigation we can go to the about and this is the segment on the right hand side is going to be the actual page about going to go to the team page you're going to go to the contact page as you can see these segments on the right hand side are individually controlled by these Pages for example in the about we're just showing about contact we're just showing the contact now the left hand side navigation or section is coming from our shared layout which is inside of our route groups which is again shared between all the pages that live inside of this route group we have this navigation over here and then down in the bottom we're just plugging in the different pages that we get inside of this main tag so they can all share this same layout now as you can see layouts are a native feature that comes very easy inside the app router now if you wanted to create something similar in the Nexus 12 or in the pages router it was possible but you would have had to compose so many different components to be able to create such a thing but the most important benefit in the app router is not even how easy it is to create layouts or that it's a native feature but what's important here as I mentioned in the previous lessons is that now when you are navigating between different pages that now share this layout the actual thing that's going to be re-rendered is this page so that header which is your root layout or this shared layout inside your route group is not going to be refetched it's not going to be re-rendered the actual segment of your page that's changing is going to be re-rendered and even for these segments that do change the router is going to try to do a soft navigation so it's going to look inside the client-side cache to see if this link was prefetched or if it was visited before and if so it's going to use that payload from the cache instead of going back to the server because at the end of the day all of these components and pages are react server components and react server component comments only run and render on the server which means if this partial rendering wasn't happening on every page navigation it would have to go back to the server render our Pages layouts and components and then bring dhtml back here but with the use of this new router the client-side cache we're able to do a soft navigation we were able to restore the result of our react server component in client side so anytime that we are navigating instead of going back to the server we're just going to use that cache which makes this transition year instant between these different pages which are all server components and are supposed to be rendered on the server they are rendered on the server but because we're using links over here and the links are visible inside the viewport uh these routes are prefetched in the background before we actually visit them so once we click on them it's just a near instant transition now other than organizing our pages and segments inside of logical groups or folders I want to emphasize that you can opt pages in and out of layouts by just bringing them inside a route group or not so for example this contact page before was outside you could still access it from forward slash contact but by bringing it into this route group it's now sharing this layout that's shared between this specific route group that's a wrap for this lesson folks we covered route groups and how you can use them to organize your projects segments and files or create nested layouts or shared layouts without affecting the URL in the next lesson we're going to talk about suspense loading UI error boundaries and more so see in the next lesson

Channel: Hamed Bahram

Views: 12,516

Keywords:

Id: Go4rL15gYTs

Length: 13min 33sec (813 seconds)

Published: Sat Jul 08 2023