Next.js App Router Multiple Root Layouts: Explained With Examples

[Music] hello people welcome back to another video from the nexj series I hope you enjoyed learning about layouts Pages error and handling other nexj use cases so far in this video we are going to talk about a special case about layout having multiple layouts in your application but why why do you need multiple layouts let's take an example the page that you see on your screen is a regular nexas application it means that it has a layout that's where header and footer comes into picture and between header and footer you have a page sandwiched and the content of the page is very simple it's having a text called This is homepage and a link to another page which is a marketing page now if I click on this link go to marketing it goes to marketing page what you see over here the header and footer remain intact it means that they never get rendered however the content about the marketing page has come and sit over there instead of the homepage now if you go back to home the the same thing happen you go back to homepage now imagine a situation where in the marketing page you don't need this header and footer this is another app but similar looking I have same header and footer and the homepage but if I click on the marketing page pay attention here the header and footer is gone it's using a completely different layout but if I come back to homepage again it's going back with the homepage layout you need a completely different layout how are you going to achieve that actually there are several ways you can achieve that but what I'm going to teach you in this video probably the best way to achieve it because I see the same mention in the next day's documentation as well so we are going to learn how to use multiple root layouts in your application to solve cases like that where different corner of your application need different kind of layouting sounds interesting I'm sure it is so if you like this video I don't have to tell you please like and share this video and please subscribe to theas script because once you do that it really motivates me to do better thank you guys need your support okay let's get started with the coding let's get started with the same UI so the UI the first version of the UI where the homepage and the marketing page is sharing the same layout and you know how to code this one but if you're new to it please follow along my past videos where I have explain this layouting and all these things very very in detail all right but we'll first see the code of it like how to achieve this in a glance and then we'll change the code in a way so that homepage and the marketing page will share a different layout okay let's do that and follow that let's go to vs code I'm in VSS code right now and what I'm sharing over here is the code that is running and I have showed the output just now there are two components one is header a very simple react component just a div with a style where background is black text is White having some sort of padding and things like that and having a text called header that's it very simple then similarly you have another footer component same kind of thing a div and a footer and a bunch of class names that's it done now you know that if there is a page .js and layout. JS at the root level of your application it means inside the app folder that defines your initial route which is slash correct we have learned that in the series itself so I have a page.js file again a simple react component which is having a text called This is homepage and the link the next link for navigating between Pages which says go to marketing and having a route to slash marketing now if I have to go to a new route in this case is a static route / marketing what I have to do I have to create a folder called marketing inside the app folder that's exactly I have done and inside that there should be page. jsx file or page. TSX file in case you using typescript and there you will write the definition of the page the definition for for my page is again a simple thing it is just talking about a text call Welcome to marketing page and having a link back to homepage that's why it is going to slash the hrdf is to slash so this is the reason if I go back to my UI again this is this is a header this is a footer inside that this is the homepage and a marketing link click on that same layout is being shared between these two pages and you have the welcome to marketing page is another page now let's take a look into the layout. JS file which we got at the root level here is the root level layout. JS file and right now we only have one layout. JS file right it has header and footer that just got imported and we have used header and fter over here the children that used to get passed to this root layout by default we are just making the header and footer surrounding to it so top will be header then your page comes and then your footer comes you know with the explanation that we have received in the previous videos from this series like how these Pages get injected into the layout and they kind of sit over here so it means anything static that you want to be around these Pages you can actually put in your layout that's the reason we are putting header and footer over here and this is a layout being shared by this page.js file which is a the root label and also the page. jsx file which is under marketing it is very clear I hope now how are you going to create different kind of layouts or different layout stuff for different pages now the first thing it might occur to you and I don't see it is wrong is like let's create another layout. JS file how about that so under marketing we'll go ahead new file and create another layer layout. JS file and what are you going to put inside this layout. JS file it will be another simple react component which will take the children and in this case we won't be giving the header and footer because in this layout we are not looking for header and footer at all so the component will be something like this exactly say I'm importing the font the global. CSS in metadata I'm just saying it as marketing page instead of homepage and a description of it and then it takes the children and we have a HTML body just like before and instead of main you would have noticed in the root layout we had a main I have just given a div just to make a differentiation because if you give a main that height even though you have given the H screen it won't really stretch till the end but if you give a div it will actually stretch till the end just to make a differentiation I have just given a div instead of a main that we have seen in this previous layout here it was Main and now I have given div rest of the things are quite same okay now another thing to notice over here quickly is like I am using a separate layout for this so that means this particular page should be soled from this layout and here I don't have any header I don't have any footer neither I have imported them but the header and footer was there in the layout. JS which is the root level and I had imported them and I had also used them over here what do you think about this approach is this thing going to work let's go ahead and see all right so I see that header this is a homepage go to marketing and the footer as it is now I click on go to marketing now header and footer has been removed that is great so this is working but what will happen if I go back to homepage again if I click on it do you see what happened it become blank now let me go to inspect console and I have bunch of Errors over here I'll clear everything I'll refresh it I'll get this thing back I'll go to marketing again I get some error I'll read about them I come back to home and the page become blank so it is not really behaving the way it should behave even though I have used a separate layout for this page and I am getting error like HTML cannot be appended inside main it's an warning is it is it is probably semantically not correct and there are a bunch of warning that I'm getting over here now if I go to the layout JS of marketing it sounds like this guy is still getting embeded inside the parent layout that's why that warning was coming that inside main you cannot have an HTML when I was in the marketing page so it means it is somehow still using the parent layout in a sense and I can prove that why because if I come here and just remove this HTML and body from my sub layout the layout that I have used for marketing I'll just remove this I'll just remove this so right now the layout is having only one div to return from here and the div is having the children that means the marketing page if I pass it's only having the marketing page what do you think will be the outcome now will everything work let's see so I have this homepage header footer and the marketing link if I click on this man I still have header and footer even though the marketing layout doesn't have header and footer I am still getting header and footer only thing got changed is like in the homepage the footer was coming at the top and in the marketing page it is coming at the down that's just because I have used div here instead of Main in the page level but layout level is still not working as I'm expecting I'm expecting that at the marketing page I won't see the header and footer and that's the reason my layout JS under marketing is exactly like this so it is not working this is where we have to use something called route grouping if we use route grouping that's the place where we will be able to handle multiple root layouts in our application we can have one root layout for the homepage we can have one root layout for our marketing page and things like that so there are two thumb rules here one thumb rule the first one is you have to use something called route grouping we are going to see that the second thumb rule is you should not have a top level layout over there so it means that I cannot have this particular layout. JS over here that's one rule and then I have to use route grouping now I'm going to modify this code in a way that it should give us the desired results let's do that in our previous videos we have discussed what is Route grouping and we can group with a folder that has a parenthesis surrounding to its name you remember so inside app I'm going to create two route groups one a new folder let's call it as home and second one I'll call it as Commerce now one thing to remember again or to recall is like when you are creating a folder with the parenthesis that particular folder never comes into account for your routing it means that there will be any route called slash Commerce or slome this is to group your routes and layouts together all right so this is what we have learned before as well so I have a Commerce I have a home now now what I'm going to do inside Commerce I am going to move this marketing folder straight away I'm moving this okay this is a refactoring that I'm doing over here yes move so I have pages and layouts inside Commerce inside marketing and then I'm going to move again this layout. JS file inside the Commerce yes move so now the structure is I have a route grouping inside that I have a route called marketing and this is a route because it doesn't have any parenthesis around it and it has a page. jsx file inside that or JS file inside that so it is it means is that under app there is something called marketing so there is slash marketing is available and slash marketing will be served from this layout. JS file we have just now created you are all good with me right same thing for home what I'm going to do this layout and page.js file whatever was there outside I'm going to drag them inside this route group yes move please so now inside home which is again not a route you have to remember because it has parenthesis it's just a route grouping but what is Route it is directly under app so if I see here app Home Route grouping and page.js if I neglect home so this page.js rightly inside app so it means it's at the top level page so this page.js which is at the top level page means serve on slash route will be having this layout and this marketing page which is under Commerce grouping will be serve from this layout this is how you can actually segregate your application layout if your application needs different layout for different pages at the root level I don't have any page I don't have any layout whatever the route I create inside Commerce all will be now sharing this same layout. JS now if I need another layout for my bookstore I'll be creating another folder called store inside that I will have a book store as a route and for that store parenthesis I'll have a new layout. Js that's how you segregate different portion of your of your application with different kind of layout as we move around the pages you have to remember to make sure that some of these references are working well before it was do/ global. CSS as we have moved one page inside it has to be do/ global. CSS and in the other layout also it has to be do/ global. CS which is already there all right so with all this talk and with all these things let's go and see whether it is really working or not so this is our header homepage footer go to market marting wow no header no footer come back to home it's working so this is how you should do things a quick recap if you want multiple root layouts in your application you have to create route grouping with the parenthesis in the route grouping you can create individual layout and in that grouping whatever the pages you have create they all share the same layout okay the second rule over here top level you should not have a layout you should remove it and the top level page also you should be handling using the route grouping that's exactly what we have done over here we have removed the page and layout from the top we have a top level grouping called home inside that we have made the page and layout so it means that this page.js file will serve the Slash the top level route from this layout and under Commerce another route grouping we'll be using this layout so whatever Pages we create inside this Commerce all will be served by this layout all will be using this layout and inside that I can create how many number number of pages I want I have created a marketing for/ marketing and that is what is using layout if I need one more I'll be creating another rout grouping inside that I'll create its own layout and inside that I can create its own pages I hope this makes complete sense to you and you learn something new if so please let me know with comments please share this video so that others can come to know please join tabas script Discord the channel link is there in the description of this video see you over there and don't forget to subscribe to Tas script because once you do that it gives you lot of motivation to teach you better thank you very much take care of yourself

Channel: tapaScript by Tapas Adhikary

Views: 5,590

Keywords: next js, next.js tutorial, next js tutorial, Next.js app router, next.js layout, next js layout component, next js 14, next.js tutorial for beginners, next.js 14, Next.js multiple layouts, Next.js hide header footer, Next.js root layout, Next.js multiple root layouts, Next.js route group, Next.js route grouping, learn next js, learn next

Id: X9_XqeqWBR0

Length: 14min 32sec (872 seconds)

Published: Thu Mar 07 2024