Master Route Groups in Next.js | Create Custom Layouts for Webpages | Next.js Tutorial

foreign peace in this lesson we will learn how you can have different layout for your different web pages in your next.js based website let's take an example where you have a website and you want to have different layouts for your different web pages let's say you have a navigation bar on your home page and you don't want it to appear onto a different web page maybe a dashboard page so for this the concept of Road groups comes into play so let's get started so the first thing what I'm going to do is I'm going to create a new project with the help of command npx create next Dash app at the latest so we have a new package available so we will go with yes option let's name the app as route groups I will select yes for all of the options and no for the customized default import NES all right so our project is now created so the next thing what we will do is we will go ahead and move into our folder where we have the pages inside the source app so we have pages and the layout over here so first thing I will go into the page and I will remove all of these content from over here because these are the default content that you get whenever you create a new project I will simply add over here H1 this is the home page as we mentioned we will be going through different web pages and try to see how you can have different layout Styles so for that I will create two new folders and that will be for the dashboard and the other one will be for about this page so that will be also in our app directory so let's name it as about Dash us so now we have these two folders created I will quickly create paste dot TSX files for both of these folders so that we can have the landing pages for both of these links and for the dashboard page I am simply going to type in export default function and then the name of the page that is going to go dashboard in our case and then we are going to return H1 and this will be saying this is the dashboard page the same thing I will also do for the about this page as well so I will just name it as about us and over here also we should have it as about us now you can see over here that these two folders are actually created inside the source app folder which means that these two pages will also share the layout that is globally declared which is over here so over here I'm also going to import links so that I can have a navigation bar where I will be having the links for about us and the dashboard page so for that I will go here and create a navigation bar so this will be saying home navbar and then under this I will be having links so so first of all I will create division so that I have my links in different rows rather than each of them having in a single row so for that I will just create division over here and then after that I will create a link href is equals to slash and this will be for the home page and then I will create the same for about this and the dashboard page all right here we go so let's move into the folder that we just created with the name as route Dash groups they should have been groups sorry for that mistake so now we will do npm run Dev and let's go on to this link so that we can see what sort of website do we have now so over here you can see this is the website that it looks like I will just disable the import globals save it and here you can see we have a home navigation bar with the home about us and the dashboard page so these pages are working now what we actually want is to have a dashboard with a different navigation bar on that and also at the same time we don't want this home nav bar to be onto the dashboard page so let's see how you do that so for that what I would do is I will go to the dashboard page and first of all I will create over here a new file and name it as layout dot TSX now once you do that the next thing you have to do is you have to bring in the layout so for that what I will do is I will simply copy this root layout paste it over here and instead of naming it as root layout I will name it as dashboard layout and also I will import link over here and I will simply name this one over here as dashboard nav bar remove these two links from over here so that we can only go to the home page from the dashboard save it reload the page and now you see when you go to the dashboard you have got only the dashboard navigation bar and you can directly then go to the home page so this is one way of making it to work so now the reason why you're not seeing the home navigation bar onto the dashboard page is you have the HTML tags over here the HTML and the body tags so if I just remove this HTML in the body type from over here what you will see is let me just remove the HTML and the body type from over here and add a tag for division to end it out over here and start it out over here save it and now when you reload the page you will see that the dashboard page also have the home navigation bar so if you go to the about us page you go to the home page you will see the home navigation bar and when you go to the dashboard page you will see that you still have the home navigation bar and also the dashboard navigation bar over here as well so in order to remove that what you need to do is you need to make sure that you have the HTML and the body types over here and when you go to the dashboard page you will see that the home navigation bar has been removed now that is one way of doing that you can also do this with the help of the route groups so in the route groups in a particular group for all the web pages it will share the same layout so let's see how you can do that so for that you need to go to the app and you can create a new folder over here so let's name it as Dash now you will see over here that we are going to create a route group so in order to create a route group what you do is you type the name of the folder within the parenthesis and just hit enter so the name that you have entered in the parenthesis won't be appearing in your url link so let's see what do I mean by that so for that what I will do is now I am going to move the dashboard folder inside this Dash folder that I just created and and now see what I'm going to do is I'm going to say that I want to have this layout style for all of the pages that are inside the dashboard so I'm just going to move it over here now as you can see over here you have the dash folder which is actually the route group and it doesn't matter how many web pages do you have over there let's say you have a dashboard then you can have dashboard one two three and any other contactors Pages all those things so all of them will be sharing this layout file that you have just created which means that it won't have the home page layout appearing onto that particular route group and in the same way if you just see over here then you have the app folder and inside the app folder you have the about this page and then the layout dot TSX file so which means whatever folders or whatever web pages do you have in your main app folder those all will be sharing the nested layout for the home page or you can say that it will be sharing the master layout now that we have created the dash folder and I have the space dot TSS file inside the dashboard folder and this layout file so let's see let's close this first and rerun it again remember always whenever you change the layout of your web app you need to always rerun the project so for that I will just reload this page over here all right so if I go to the home page the about a space and if you go to the dashboard page so you can see this still works the same way so if I just go to the home you will see over here that this is the home page now one thing to notice over here is even though I have created this Dash route group it is a new folder by the way and you will see that the link is still the same and it does not appear this name Dash does not appear inside the URL this is because this is a different route group and you can have different layout styles for different route groups in your web application so I will just go to the home page for now and just to show you how the route groups actually work I will create a new folder inside this Dash and let's name it as dashboard 2. and I will quickly create a new file in here with the name is page.tsx I will just copy the content of this to over here and this is the dashboard two page and also name it as dashboard two just quickly save it out over here and now if I go to dashboard 2 you can see that we are on the dashboard too and if you notice we do not have the home page navigation bar on this dashboard to page reason being we have created a different route group and we have already declared that we do not want the home page navigation bar to appear onto our web pages that are inside this Dash route group so in summary if you want to have your multiple web pages and you do not want to share the root layout with all of those web pages so you can create different route groups and put them into the different folders so this is how e-commerce websites and all other websites are being made where you have a different layout structure for the main home pages and when you go on to the checkout Pages or when you go to the shopping cart and everything you have a different layout so with this I hope you have got an understanding of how route groups work in next yes and how you can implement it in your web application with the help of next year's thank you for watching don't forget to like subscribe and comment so that you do not miss out more informative videos like this

Channel: Code In Piece

Views: 24

Keywords: Next.js, Route Groups, Custom Layouts, Next.js Routing, Next.js tutorial, Web development tutorial, JavaScript Framework, React Framework, Next.js for beginners, Learn Next.js, Webpage Layouts, Web Development, Next.js Layouts, Advanced Next.js, route nextjs, router in react js, next js, layout nextjs 13, layout in next js, different layout in next.js, web development, layout nextjs13, dashboard in nextjs, navbar in nextjs, nav bar separate, separate navbar in nextjs

Id: LfJlhHnW3I8

Length: 11min 29sec (689 seconds)

Published: Mon Jul 03 2023