When Did NextJS Routing Become so Advanced??!

These 2 advanced routing features have been added in NextJS 13. Knowing how to properly use intercepting and parallel routes TOGETHER makes for nice use cases and an improved UX.

-- my links

[Saltertv]

Looks like a great way to over-engineer my app! Informative video as usual :)

[nirjoyhasanantor]

Thanks for creating video in this topic love your videos

[harshjaiswal]

This might be useful for SEO in case of product listing pages where you want the users to have a look at the product in a modal from within the listing page because you dont want them to leave the page but at the same time you also want to have dedicated pages for each product for search engines to crawl

[iAmTheWagon]

Amazing. I’ve been waiting for anyone to make a video on this. I haven’t been able to figure out how to get intercepting to work with [slug] SSG routes. For example I have a page of products that are dynamically created from an api call and statically generated at build time. I want a modal to open when the products are clicked instead of navigating to a separate page and still have the ability to link to the product.

Excited to see the full tutorial. I hope this will be addressed. 🙏

[Darren-ukih]

Thanks for shedding some more light on how this all works with the new routing. This actually how Prodcthunt works when you click on a product from the home page, which IMO makes sense UX wise in that usecase. This can possibly even fit an e-commerce usecase. AFAIK trying to implement this using the "pages' directory required way more setup/code/hacking to achieve and I remember this being a requested feature in some GH issue from the community. The concept/pattern may take some time to grok but instead of it looking at it as "over-engineering", I think we should look at it as just another way to give better experiences to end users (UX) or stakeholders (SEO/analytics, etc). At the end of the day it's just a tool and like with any other tool its there if you ever need it. Just glad Josh was able to simplify this with some diagrams, thanks, cheers!

[raymondmichael]

Your drawings helps a lot to get the bigger picture;
I’m waiting for the long video 😊

Greetings from Tanzania 🇹🇿

[tolotrarabefaly]

Thank you so much for explaining these concepts. I've actually stumbled upon those concepts in the documentation, yet I really couldn't get the point of using them. Now, with the advanced use case you showed, those things start to make sense to me now.

[MDKhan-wwtp]

You are my guide you work like a charm what we ask you just like answer it i have never seen a man like you Love your videos

[codewithmirko]

I had the same thing in an ecommerce app i did in react a while ago! If i remember i was just using a different component for the modal login with the same code of the actual login page! Very interesting concept! Definitly need to play with it to grasp it better though! So far this next 13 looks really good imo as far as dx goes! 😊 Thx a lot for all these videos, really helpful amd clear despite the tricky concepts explained 💪

[deniserodriguez]

You explained that so much better than the documentation. There’s just too many gaps in the examples they provide. Thank you!

[Douwab]

Really cool video like always! If I could change only one little thing, I would have liked to see the source code of the actual example after seeing it. I am pretty sure I understood all of it but just to have a mental image of what it looks like concretely, would have been better for me! Otherwise I love the flow of the video, going from general introduction, to more detailed into an actual example. Now let's try this in a test project! :D

[mharley]

Josh, great vid. Would love to see an actual coding demo of this concept

[naveedalirehmani]

I am experiencing this particular error. In my case, I was able to intercept a route and render a modal. However, the browser says this page does not exist when I hard refresh. Directly accessing the page via a link tag works, but a hard refresh results in a not found error. this is only happening when I implement the intercepting logic.

[nwylynko]

Got this setup for my startup a couple weeks ago, it works well, and in my opinion is a good user experience. DX isn’t perfect as hot reload does a full hard reload a lot so goes to the page and doesn’t stay on the modal, but that’s minor. The file system for it is the worst, I think the modal should be co-located with the actual page, but that has issues too.

[vibray]

Amazing way to break it down, it really helped. Thanks!

[joseeavr]

Is there any open-source project that applies this concept?
Thank you Josh you are one of the best developers in this community. Keep it up bro

[ProtectedClassTest]

A perfect example of javascript going full circle, were back on AngularJS days.

[tarasdashkevych]

Interesting topic. Thank you for sharing it and showing how to use it 👍

[kylemoran]

This is interesting. Not really sure how useful it'd be for day-to-day apps outside of signin. Maybe some more examples of this would help me understand. Also curious about how this preforms vs the usual modal methods + code size. Lots of questions, cool video!

[amershboul]

your content in amazing man !! keep going