Next.js parallel routes are awesome (if they worked correctly)

so I was working my way down the next JS docs to try to learn more about the app router and I ended up trying out the parallel routes which is actually a really cool feature I want to make a video about this and kind of demo it to you all and explain it um but then I started running into strange bugs by following the docs like it doesn't seem like these docks are either updated or there's a bug in the app router and that kind of led me down a path of like is this stuff even like ready for production to be honest like a lot of stuff seems like it works but when you read through the docs and you try stuff and it just doesn't work you kind of like dude what's going on here but let me just share with you anyway because I do think this is a pretty cool feature and it is useful so over here we have a page that has a left Center and right let's look at the code real quick so how I have this set up is I have a Pokemon page here okay and inside of this Pokemon directory we have a left and a right folder right you have these at symbols and that's how you can Define parallel route so what this allows you to do is if you look at your layout notice that you now have access to props.left and props.write so the name of this member or this property on your props object is actually going to be the name of the folder here and you can use this to have nested rails kind of load into your page dynamically and according to the docs they're both supposed to be like behind the suspense and they're supposed to load individually and stream it individually but let me show you what happens um when I refresh the page let's just go and refresh notice that it says loading stuff for all three things all right if you look at this it seems like it's working pretty good but it's not supposed to say loading stuff on all three of those because I actually have individual loaders right here right loading let's just say loading left over here this should say loading right and then the main loader just say loading stuff okay so let's just say loading stuff loading left loading right like like I showed it just says loading stuff for all this and I went back to the docs I'm like reading through this I'm like am I just doing something wrong and then they even show you a picture saying that if you have at whatever loading that loader is going to show right here but that's definitely not how this is working in whatever release of next I'm on I think I'm on like 13.4.4 so then I went to you know the repo that has 1.8 000 open issues and I was kind of reading through doing some searching and I found this one parallel routes do not apply individual loading TSX that's described in documentation so I read through here basically the exact same issue where they're saying that the docs say it should work but then you do it and it doesn't work I believe one of the maintainers kind of gave a hack solution that you can do by adding route groups which is another thing we can kind of talk about later in another video but basically the fix for this right now which kind of sucks like I wish we didn't have to add this hack into a production ready approach to something um let's just go ahead and add in route groups so we can say hack okay and by the way call me out in the comments if there's actually like a you know a better solution for this and another thing is when I do those route groups like my entire thing just breaks like I have to restart my server or else like it just doesn't ever load I don't know why this happens so yet another bug with the next app router let's just restart the entire server as you can tell I'm just kind of frustrated because I spent time trying to figure out why the documentation wasn't working and uh it's just a bug so now it says loading left in the center loading stuff over here and loading right over here which works this is exactly what it's supposed to do and this is a cool feature I like this and now if you notice on the left I have a special loader and inside of the page it has a promise that resolves after two seconds and then it actually shows the content on the right panel it has a timeout of four seconds generates a random number and displays that in the in the Dom sorry that was kind of hidden by my head there's a promise that waits for four seconds and then on the main page we just wait for a second so that's how I'm kind of like adding in that fake delay that you can see but if this feature is actually like working perfectly fine like this is a really cool approach to basically using parallel routes to like load in different things definitely definitely awesome I've kind of like this I think this is a really cool way to like set up your application if you scroll down further in the docs they talk about how you can use this for like modals and stuff like that another thing I'm kind of confused about is I would think that if I were to add a an another folder here called another and add a page into that I would think that I would have access to do Pokemon slash another right does that make sense but maybe I'm not understanding this I mean I gotta read some more stuff but if you do another here it just 404 is not found it just can't find that path which makes me kind of even wonder like is this a bug or is this like me not understanding how the router works because over here if you have other slash another like this will work I do other slash another that works fine so like maybe it's because we have this parallel router going on um you can't just have like a nested route like this because it doesn't know where to inject left and right but I would think that children would just inject this page here I'm gonna wrap this video up I don't want to complain too much about next JS um I try not to complain about software that people are working on and I'm sure they're trying to fix this behind the scenes it's just frustrating that um us developers end up having to deal with this stuff when you're told that this stuff is production ready anyway go check it out leave a comment if you guys have found other bugs that have kind of tripped you up and like always have a good day and happy coding

Channel: Web Dev Cody

Views: 4,765

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: g5V6koptSXs

Length: 5min 51sec (351 seconds)

Published: Fri Jun 09 2023