Learn Next.js Parallel Routes In 16 Minutes

the app router in nextjs made routing more simple in some regards but also more complicated by some of the new features that it added and one of those new more complicated features is parallel routing now this is an incredibly important feature for you to understand to really take your applications to the next level because it allows you to add extra performance by doing parallel streaming it also allows you to really easily render things dynamically or conditionally which is great for something like authentication so if you're unfamiliar with parallel routing it's definitely something you're going to want to learn if you want to master nextjs welcome back to web def simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and if you want to really take your nextjs skills to the next level I highly recommend checking out my complete nextjs course it's going to be linked down below it's part of my reactjs course so just check out the link down below it's going to be the premium package of my reactjs course that includes the entire nextjs course now in this video I'm going to be talking about parallel routing and I first want to talk about how it actually solves particular problems for example right now let's say that I have this dashboard page which has just a nav at the top inside of my layout I'm rendering out my child page which just as a really simple H2 that says dashboard and then I'm also rendering out a user section and an article section and each of these sections has their own delay as you can see the users is a 3se second delay articles is 5 seconds and then my dashboard is 2 seconds so when I refresh my page you see I get these three different loading State showing up the first loading state for my dashboard is my loading. TSX file while for my users and my article it's using the suspense boundary to load my information and this works perfectly fine I'm able to load all these routes in parallel which means after 2 seconds this one loads then 3 seconds this one and finally after 5 Seconds my articles loads now for really simple Pages this is probably going to be fine but as your pages get more complex and you want to parallel stream multiple different complex things to your page there's going to be a much better way to do that and that's with parallel routing so instead of having these components directly inside my layout I can actually extract them out into their own folders and they can work just like a a normal page where I have my own loading State my own page my own error State and so on so I get all the power of having this route as its own page while keeping it embedded into a different page to do that all you need to do is inside of the folder that you're currently in so in my case dashboard create a brand new folder and you start this folder with the at symbol this allows you to say that you want to have parallel routes you render so in my case I'm going to have an at users route and inside of here I'm going to create a page. TSX and all this page. TSX is going to do is just take this user's component and bring it directly into here and we'll export that as our default function just like that and I'll call this my users page there we go and I'll make sure I'll get that weight function imported as well then what I want to do is I want to go into my layout and do the exact same thing for my article section so I'm just going to copy this down I'm going to call this at articles and inside articles I'm just going to change my weight to 5 seconds and this will say articles and this will be my articles page so now I've essentially created two different parallel groups that I've created I have my articles group and my users group and then I have my normal page group as well so inside my layout instead of importing these components like this I can remove all that remove this remove this weight entirely and all this suspense related code and instead what I can do is where I'm getting my children being passed in every single at group that you have is also going to be passed in so I have an at articles and I have an at users and you'll even see I get auto complete from typescript because nextjs is smart enough to look at these folders and know that they are actually there so then what I can do is I can add in my articles I can type that as a react node and my users and I can type that as a react node as well give that a quick save and all I need to do is just render out those sections so users articles just like that and now if I add in a loading state for these I'll actually be able to get that loading and the great thing about this is I can just create a new file called loading. TSX export a default function we'll call this loading users and in here I'll just return an H2 that says loading users and I'll do the exact same thing for my articles I'll just copy this file over and just change users to articles there we go so now if I give all these Pages a quick save and I go to my layout you can see that my layout is drastically cleaned up but when I refresh my page over here you're noticing that I'm getting the exact same results that I had before but the really great thing about this compared to what I had before is everything is much more componentized because now I have this articles folder where everything related to my articles takes place I can even add in here for example an error. TSX page and I can add in my own error boundaries so this must be a client component and I'll just export default function error articles there we go and in here for now I'm just going to return an H2 that says error just to make it as simple as humanly possible so now for some reason this actually throws an error so let's just come in here throw a new error on this page and I give this a quick save and a refresh after that 5-second delay you're going to notice it's going to throw an error and it's actually going to show me the text error error instead which is super great so again it's super compartmentalized I have everything related to articles inside of this one single folder everything related to users in this one folder and everything related to my main dashboard section inside of this main folder here so everything has its own place which means that if your code is complicated it's much easier to figure out what's going on in each section but this isn't like super groundbreaking because technically I could have done all of this the other way with everything in my layout file and so on and it wouldn't have been terrible especially with simple code like this what makes this really power ful though is how you can take this even another step further let's say for example I only want to render the article section of my page some of the time what I can do is inside of my layout let's say I have a variable inside of here that just says const render articles let's set that equal to false so I only want to render my articles sometimes well I can just come in here if render articles is true then I'll render out my articles otherwise I'm just going to render out nothing so we can just do this really really simple like that so I'm going to render out my articles if this variable is true otherwise I won't so when I do a refresh you notice my article section is not rendered at all while if this was true and I do a refresh you'll notice that my article section is being rendered so this is a great way to conditionally render things which is really useful for example with logging in users let's say for example that this dashboard is something that you must be logged in in order to access well what I can do is I can just have a variable is logged in you would get this from your database or something like that and by default let's set that to false so here we're going to render out everything just like we normally would but I'm going to wrap things in and is loged in so if I am not logged in so if I'm not logged in instead of returning all of this information down here let's say I'm going to bring in a login page instead so I'm going to return login page or we'll just call it login and I'm actually going to create a new parallel route for that so at login just like that let's create a brand new page. TSX let's export default function login page and this will just return an H2 that says login page just like that there we go so now here I can actually get that login and I can make sure I type that as a react node there we go so now if I'm not logged in I'm showing my login page otherwise I'm showing this page down here can actually remove those brackets just like that so now here give this a quick refresh and you notice right now it's not showing anything that's because sometimes when you're dealing with parallel Roots you do need to actually restart your server so let me just give my server a quick restart and then we'll refresh our page and we should see we are being redirected to the login page whenever we're not logged in but if my login is set to true for example I've logged in my user you can now see it's rendering out all of the normal content on the page so this is again a really powerful use case for this particular parallel routing now the next thing I want to talk about with parallel routing is actually really cool but by far the most complicated part and that's how you deal with routes inside of your parallel routing let's say for example I want to be able to go to SL dasboard SL settings and I want to be able to configure settings for each of these different sections my dashboard my users and my article articles well this is really easy to do first of all I'm going to remove all this login related stuff just so we have a little bit less complexity so all that login code has been completely removed we're just back to what we normally had before and again I'm just going to restart my server just in case I have any problems going on inside of it so we're just going to restart our server and give that a quick refresh you can see everything is working just like it was before now what I want to do is I want to add in that new settings route so I'm going to create a folder call it settings and inside here I'm just going to create a page. TSX and I'm going to just export a function from here let's just copy all of this code I'm going to make this incredibly simple no waiting or anything like that this is just going to say dashboard settings there we go and this is the dashboard settings page so now if I go to SL dashboard settings immediately we're going to get a 404 error and the reason for that is because what happens when you have parallel routes is it's not only going to try to render your normal route in that settings folder but also is trying to render out my at users parallel route and my at articles parallel route so I would need to create a folder inside of both of these with a settings so we can create a settings folder in both of these and both of these will need their own page so inside of here I'll create a page. TSX paste that down clean this up a little bit so we have my articles settings there we go articles settings and I'm just going to copy that and I'm going to paste that down for the users one as well and just change this to say users there we go so now if I give that a refresh that should hopefully work and again we might need to restart our server just because of the complexity here sometimes it makes you do this and let's just give that a quick refresh and as you can see it looks like that worked so now we have our dashboard settings we have our user settings and we have our article settings now in my layout in this section for some links I'm just going to actually add in some links so we're going to have a link that goes to my slash dashboard just like that to close that off dashboard and then we're just going to copy that link down to go to the settings as well as well there we go so now we have two links so we can go to our dashboard page which is going to load our dashboard and we have our dashboard settings page if we can go over to our settings just like this now you may notice that everything is not rendering properly one thing that we may need to do is actually make all of these different functions async so let's just come over here we're going to make all of these async functions to hopefully see if that actually fixes the problem that we're running into here it might also just be a problem with nextjs not being super happy with all this in development mode but you can see we have our settings page and our dashboard page and it's still not quite working as we expect and I believe it's just a problem with nextjs in development mode to test this we can npm run build to build out our project and then we can just start this so after this we can say npm start and that's going to start up essentially the production version of our application to see if these problems only exist inside of development again some of these more Niche features in nextjs are a little bit buggy in development so here we're on the actual production version when I click settings you can see that works and when I go over to my dashboard here it work works so everything looks like it is working in the production version which is great so let's just go back to development so we can actually look at this as we're working on it so we'll run the development version I'll just give this a quick refresh this is loading up the development version of the page you can see we get all of our different loading text running we'll wait for all that to finish just to make sure all of this is working as expected and then we'll jump over to the settings and I'll just do a refresh here to get that to actually show up now let's say for example that we didn't have a settings page for every single section cuz when we have a settings page for every section it obviously works fine but let's say our articles don't have a settings page so inside here we're just going to delete this settings page entirely now immediately when we do that and we refresh we're going to get a 404 error because this page essentially does not exist I also looks like I need to restart my server so I'm just going to restart that development server and then we'll do that again we'll just refresh this section over here and you can see that we're getting a 404 page immediately and that's because there is no settings section for this article what you can do instead is you can create a default. TSX file this is going to run essentially any time that it cannot find a file for that route so in our case there is no page for our settings route so it's going to R render whatever is in here so we're going to say export default function and this is going to be called articles default page and this is just going to return in H2 that says articles default there we go and we'll make that async just in case that helps with the actual development server so if we just give this a quick refresh here you can now see down here it says article default because it's rendering whatever that default page is so essentially if I go to that settings page do a hard refresh so I'm coming to the settings page fresh nowhere else just directly to this link you can see it renders that default version this does work slightly differently though when you actually come to this page from another page so for example if I came from my dashboard page to my settings page it would work differently so let's bump ourselves into production to test that so we'll say npm run build and then we'll actually start up the production version because that allows this to work we'll go over to the dashboard section so we'll come over here to our dashboard just like that and once our page actually starts up in just a second you can see we can refresh this and you can see it says dashboard users articles and now when we move to the settings page you can see we get the dashboard settings and the user settings but our article stays exactly the same so if you're moving from one parallel routing route to another parallel routing route and the new route you're going to doesn't have a page for a specific section such as our articles what it'll do is it'll render out the old page that was already there so it's just rendering this normal page right here until we go to a route that it has a page for the only time that the default is showing is if you go to this page directly and not navigating through next so for example I just refreshed my page you can now see it's rendering out that default version instead and that's because I'm navigating directly to this page instead of using the linking inside of next now if you don't like this Behavior where it's actually showing you not the default version so like when I go from dashboard to settings you can see it doesn't show me that default version if you don't like that behavior and you always want it to show a specific file when you don't have a route defined what you could do is inside of our articles here we could create a catch all route so essentially just just putting the two dots before our name of our page this is just going to be our catch all we can call it whatever we want it really doesn't matter and then inside of here we can essentially create a page that is going to look just like this default so I'm going to paste this default in here this is going to be our catch all page and this will say catch all just like that and we're just going to call this page. TSX so now what's going to happen is essentially anytime we go to a URL that is dashboards slash anything and it doesn't care how many levels nested that is it's going to go into this catch allall so let's just close of this real quick we'll restart ourselves in development so we can actually see these new changes that we've just made and I'm going to go to my dashboard page and we're actually getting an error that's just because I forgot to add in a period here there needs to be three periods for the catchall routes now let's actually run that in development that was just my bad give that a quick refresh and you'll see it'll load our dashboard page just fine everything is loading perfectly fine now if I go over to this settings page you can see that I have both this default and this catch allall in place so you can see when I click on settings and refresh it you'll see it's actually loading the catch all version instead and that's because by default inside an xjs the catchall route is always going to take precedence over this default page so essentially the reason you would want to use this catchall is if you want to render the default every single time no matter what even when you're navigating around so we can essentially just remove this default we don't need it and if we just run this as a production so we can build our site and then npm run start we can see exactly how this works for navigating between different pages as well because unlike in the default version where it renders the old version when you navate to a page that it doesn't exist for this one is going to render the same page no matter what so here you can see we have dashboard it says dashboard users articles when I click on settings you can see immediately we get that catch all route and if we hard navigate to this page we also get the catch all route so that's kind of the difference between default versus a catch all route they both serve very similar purposes but they work a little bit different in practice now if you enjoyed this video you're definitely going to love my complete nextjs course I'm going to have it linked down in the description below like I said it's part of my reactjs course so it's not only going to help you MCH react everything that you need to know testing and so on but it's also going to make sure you master nextjs both the app router and the pages router because they are both covered in the course so if you want to take your next JS skills to the next level I highly recommend checking out that course it'll be linked down in the description below and it is the react simplified premium package with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 68,087

Keywords: webdevsimplified, next.js, nextjs, next js, next.js react, next react, next.js parallel routes, parallel routes, nextjs parallel routes, next js parallel routes

Id: wi8kF8UniUI

Length: 16min 17sec (977 seconds)

Published: Tue Jan 02 2024