Parallel Routes in NextJs 14

in this video we're going to talk about parallel routes in NEX js14 in the app router now parallel routing allows you to simultaneously render multiple pages in the same layout actually also in the same segment so what does this mean let me actually go through this example here then we're going to look at some diagrams together now here for example we're simultaneously rendering the team and the analytics page this is from the documentation so kudos to the team for preparing this nice diagrams on the documentation I'm going to include the link in the description if you wanted to have a further reading on the docs but nonetheless uh as you can see here inside of our homepage we are rendering two different pages one be the team and one BD analytics all using the same layout and the same segment so they're all living at our homepage let's also contrast this with how uh or backtrack to how nextjs actually works so look at this diagram uh generally speaking you would expose a segment publicly by including a page. jsx inside a folder so for example here inside my app router I have this outermost layout this is my root layout I have my page. jsx this is representing my homepage so this is representing the for slash here and then if I want to have different segments I'm going to include folders like account and if I put a page. jsx inside of this folder it is going to make this segment publicly accessible or this page. jsx is responsible for rendering the UI for this specific segment now again to backtrack this is what I mean by segment anything that comes after your domain it is the path and if and uh these segments are delimited by this for slash so these are two different segments account and settings and then you have the path which is followed uh by your domain or it is what follows the domain now each of these segments are represented by a folder and then you would include the UI by exporting a page. jsx from them okay now if you want to actually render multiple pages on the same segment using the same layout you're going to use um the par routes the way you would do it is that instead of having the folder name just be a regular F folder name like your account you're going to um create slots or add this add sign uh in the beginning of the folder name which makes this a slot uh which then is not going to affect the URL it is going to point at the same URL H uh as the segment before it or the higher level segment and then you can export a page.js x from it uh to actually render UI for for this a specific slot so here in this example we have the app router or the app directory these are the outermost layout and Page pointing to our homepage now I have two slots one is the at team and the other one is at dashboard and I am exporting page. jsx from both of them these are again uh different pages different UI for these two slots but both of these two slots are also mapped to or homepage map 2 or for slash so they're not creating a new segment inside of our path now going back to this diagram the way that this now works is if you look at here to our root layout the receive the props typically in an xjs app You' see children here and this is going to be your pages and nested layouts passed into this layout now on top of the children prop we're going to also get this slots so Props do team and props do analytics these are two different pages that they're all provided to your higher level layout as props now it's good to know that children is also actually an implicit slot so let me just show you what I mean come down in this convention uh quick note here that the children prop is also an implicit slot that does not need to be mapped to a folder what does this mean well app page.js or jsx is equivalent to app for/ children if you can see here it's as if this at children was already there it's a slot called at children which is responsible for rendering whatever you pass in as a children to this component but you can expand this by also passing in other named slot by providing folders and creating an AD Sign uh on top of them we're going to jump into the code and actually see this in action so don't worry if it doesn't make sense now maybe when we write code you would understand we're going to build an application um like this one where we have this main page which says parallel route and then we have the team page and the dashboard page actually rendered side by side so these are three different pages that are just shown inside of our homepage we're going to then expand it to also have a settings page which is also inside of this um specific slot there so let's continue on with our notes here and then we're going to jump into the code now you might uh wonder why would you want to use these different pages at the same segment you can definitely accomplish this by having your own server components um this just makes it easier for you to have different slots to have different or separate your code for the UI for these different pages maybe when you are having highly Dynamic sections in an app uh such as a dashboard or feeds on a social site you can have different pages different components responsible for rendering different segments of your page and the good thing about it is that it allows you to render independent error and loading States for each of these routes so just like any other folder uh you can have loading. jsx or error. jsx inside of this folder to then render loading UI or error boundaries for each of these slots so it makes your code separate and manageable in that sense it also allows you to conditionally render slots based on certain conditions for example you can have an O login model or if you're on the dashboard and the user is logged in they can see the dashboard if they're not they can see the login page if they're logged in and if they are an admin they can see a different page so you can have conditional renderers or conditional pages on the same segment on the same layout without having to push them to a different page to see that specific um section of your site now the Convention as we talked about is to create folders with the at sign in the beginning and just like I said slots are not route segments so they do not affect the URL structure therefore in this case at sign team for/ members would be accessible at for/ members again as an example here we have this file structure that defines two explicit slots analytics and teams you can see inside the app router we have the analytics the team and then page. j6 from each one of the slots and they're all accessible at for slash or our homepage now again our layout or the root layout is in this example is going to receive this children analytics and team slots on top of the children so you can render them side by side and again this children is just an implicit slot that you don't have to map it it's just mapped automatically for you now before jumping into the code I also want to talk about this unmatched routes now in this example that you can see here we have the uh Team slot we have the analytics slot uh but inside of our team we have this settings folder which is a folder and not a slot so this is going to create a for/ settings segment but the analytics segment or analytics slot doesn't have that settings so when we are at our homepage um all of these team and analytics slots are going to be passed into the layout and rendered side by side with our homepage but but when we move to for slash settings this guy this a slot has a page has a UI to render but the other two don't now this is where this default doj comes into play and when you move to for/ settings what nextjs is going to render depends on whether or not you have the default. JS files for the other segments and your root segment as you can see down here and also it depends on whether it's a hard reload meaning that somebody just punch in this URL to visit it for this first time to go to for slash settings or they're refreshing the page or is it the soft navigation using next link to go to for SL settings if it is the soft navigation using the link the only thing that's going to get changed is this segment so this slot is going to render the UI for the settings segment the analytics and the homepage seg segments or sections are going to remain the same so the only thing changing is that settings but if you hard reload nextjs will try to render the default JS first if they do have anything and if there is no default JS for other slots inside of this segment it's going to render a 404 again we're going to see this in action let me also show you this in the diagram here so in this example I have the team slot and the that dasboard slot and inside of my team I have the about segment with a page inside of it so this is mapped to about but when we want to go to the about the dashboard doesn't have this about segment our homepage is just homepage so it's mapping to 4 slash doesn't have the about so it's going to 404 if we reload this page to 4 slab but if you just soft navigate to about uh the homepage and this dashboard section Remains the Same so they're the previously they they would just maintain their previously active State and the only thing changing is this UI here for this for slab section or segment U again you can have default. Js here to render a default when nextjs is not able to find the specific slot or the active slot for this specific segment so let's just jump right into the code and see this in action maybe makes more sense then we see it in the code so I started with a brand new nextjs app that's using TP script and Telvin and the only thing that I have done is to add this Heathers component we're going to come back to it later on and a delay function in my lip folder to delay um a promise if when we wanted to add loading UI to this different segments and Slots we're going to use this function now inside of my app router let's just start from the roots layout now inside here I'm just rendering this children inside of this section and then my main page which is actually rendering this parallel routes div over here it's just rendering this a square with some paddings and background colors and this is my uh homepage or the children that I'm passing in to my root layout now I'm using this delay function to delay this render uh by a th000 milliseconds or 1 second this is useful when we are actually adding loading UI to see this in action but this this is where you would Implement your data fetching I'm just trying to simulate an asynchronous task of data fetching by this delay function so let's just start by creating our first slot so we're going to include a folder called at sign at team and inside of it I'm going to include a page. TSX let me just copy some code so inside of here I have this team page and all I'm doing is the a similar kind of square box with a team on it okay so let's also create another slot not inside of this but inside the app folder I'm going to call this dashboard and then I'm going to include a page. TSX inside of it let me copy some code so again here we rendering the dashboard a div that says dashboard so we have created two different slots let me just make this a bit bigger I have two different slots right inside of the app router and I have included the page. TSX in each of them responsible for rendering their UI uh for this specific slot now let's go back to our root layout and actually get these two slots here so where we have the children we're now going to get the team slot as well as the dashboard okay and then let's also type them here so this is going to be a team it's again a react node and dashboard then me just bring in these two slots side by side the children so I have that section that renders the children up top and then I'm going to bring the team and dashboard in a separate section down here in a flex container to show them side by side so let's refresh the page here you can see the team and the dashboard page being rendered simultaneously or in parallel inside of our homepage now as I mentioned the benefit here is that we can have separate codes that are responsible for fetching their own independent data that we are trying to simulate with this delay functions uh but we can also have loading UI or error boundaries per this slot so let's just go ahead and add some uh loading UI to our app I'm going to start by adding a loading. TSX to our main uh app folder this is just going to be that same box but having some animation happening down here and now this uh loading is now acting as the loading UI for all of this slots as you could see we had it up top but these are we're also using this loading UI but we can have their own specific loading uis here so let me create a loading UI for our team TSX and let me just copy some code so now we have a different or a specific loading UI for our team slot we can do the same thing for the dashboard by creating a loading. TSX inside of this folder and then now we're going to have a specific loading UI for our dashboard as you can see here uh they take some time if you pay attention if I refresh we're going to get that and then this guy is loading after 3 seconds and that guy is loading after 5 Seconds seconds so this is just to show that these are independent pages that can fet their own specific data they can have their own loading UI and arrow boundaries as separate components and separate pages that allows you to render them simultaneously side by side or conditionally one or the other depending on your use case now the last thing that I want to talk about is the use of the default JS or when one of these slots or one of these parallel routes actually has a segment in inside of it so let's say inside of this dashboard we have a segment called settings and inside of it we can define a page. TSX let's say we just have a div that says settings and this is again simulating some data furing inside of our settings page now to be able to show a soft navigation when we want to go to this specific segment for/ settings that's actually bringing that header component that we had uh earlier on to our our root layout so let's go to the app to the root layout and now here up top I want to just bring in this header component that I have created which is basically uh links so let's go to this Heather component so we know what we're doing here now inside of this Heather component I'm just rendering next links to home and for slash settings okay so now if I go ahead to for SL settings and I'm clicking on the settings the only thing that changes here is this specific dashboard slot that had that segment inside of it now these two even though they do not have this a specific segment inside of them they're just going to render or match the current URL or render their previously active state so nothing happens if you just do a site soft navigation this segment that actually has this slot that actually has the segment is going to render that segment now this is different if I now refresh the page which is a Reload or a hard navigation so let's see what happens if I'm on the for/ settings and I try to refresh I'm going to get a 404 this is because nextjs cannot find the default. JS files for this two specific slot and inside of our homepage so let's go ahead and for this team actually create a default. TSX let's copy some code here so all we're doing is that now this time instead of team I say default team and we also need a default. JS inside of the outermost app router so again default. TSX again here instead of the parallel route I just say the default main page so now let me just close all of this if I go back to home and refresh my app here so in the beginning what we are seeing here is the main page the team section and the dashboard section this is the homepage if I now navigate to for/ settings the only thing that changes is the settings segment inside of this slot but now while I'm on the settings page if I go ahead and refresh the page we still see the 404 which shouldn't be the case now for some reason this doesn't work the way that it is supposed to work on local development so when you're running your local server the way that this hot module reload or the caching Works actually interferes with this default. TSX inside of your root layout but when you deploy your application this actually works so this is the deployed version of this same project now if I'm on the homepage I can see the par route the team and the dashboard Pages side by side if I soft navigate to the settings this is the only thing that changes again what renders from nextjs depends on your folder structure and how you're navigating to this for slash settings now while on the for slash settings if I now refresh the page so do a hard reload you can see the default default for my main page and the default team is rendered these are picked up from the default. JS and because I have those two files it is not showing me a 404 whereas if I didn't have this default. JS inside of my slots or inside the app router inside the outermost root layout it is going to show you a 404 but because I do have the default now added to my project it shows the default for these two segments and the setting which is the segment that already exist inside of our dashboard slot for this one now if you go back now that you have this result cached if you go back to the homepage it shows the regular Pages if you go to the settings it now defaults to this default team page here and then renders that settings so again it works side by side with the cache so therefore depending on how you're navigating to this page different stuff is going to get rendered and that's a wrap for parel routes in the app router in NEX js14 the allow you to render multiple Pages simultaneously at the same segment and using the same layout now in a future video I'll also cover intercepting routes which is another nextjs Advanced routing technique or concept and then hopefully we're going to combine them together to create cool uis like models using p routes and intercepting routes now if you have any questions like always hit me up in the comments and I'll see you in the next one bye-bye

Channel: Hamed Bahram

Views: 17,374

Keywords:

Id: f6SE-7RSaBI

Length: 21min 27sec (1287 seconds)

Published: Sat Dec 16 2023