Next.js 14 Tutorial - 32 - Parallel Intercepting Routes

📱 Follow Codevolution

Parallel Intercepting Routes

[chinemelumchuba-nwene]

For anyone struggling to understand this particular video, I hope this my explanation clears it up a bit for you:

The @modal parallel route is essential for enabling an overlay behavior when navigating within the photo-feed route. Here’s why it's needed and how it works:

Overlay Functionality: Without the @modal parallel route, clicking on a photo in the /photo-feed route to navigate to /photo-feed/[id] would replace the entire page content. The @modal route allows the new content (the photo modal) to overlay the existing photo-feed page rather than replacing it.

Simultaneous Rendering: Parallel routes like @modal and the main page (page.tsx of /photo-feed) are rendered simultaneously within the same layout (layout.tsx of /photo-feed). This simultaneous rendering enables both the main content and the modal to coexist on the screen.

Default State: By default, the @modal route’s default.jsx file returns an empty component. Therefore, initially, you don’t see anything from the @modal route until it intercepts a specific route like /photo-feed/[id]. When this interception occurs, the modal content is displayed as an overlay.

How it Works:
Initial Load: When you first navigate to /photo-feed, Next.js renders both the @modal route (which is empty by default) and the main page content within the layout.tsx file of /photo-feed.
Route Interception: When you click on a photo, navigating to /photo-feed/[id], the @modal route activates and displays the modal overlay without replacing the main photo-feed content.
This approach ensures a seamless user experience where the photo modal overlays the existing content, maintaining the context of the photo-feed page.

[akindipejohn]

Thank you for your videos. Your explanations are intentionally simple, easy to understand and straight to the point. Hope to see more of these, especially on data fetching and backend in next js. Thank you.

[shiretsu]

this is exactly why I like NextJS. In a previous project using a previous version, I manually created this functionality by manipulating the router behavior and URL. now it's built in!

[MSEIN]

I think this video is complicated. I did not expect it😅😅

[ainmosni]

why people complain so much for someone who giving free good shit. If you guys follow along this series there is no way you don't understand this one.
i have no complain with this vdo and love this.

[LeviAckerman-gyrj]

the modal component is insanely optimize nice job bro

[zhiven]

Very nice video in these concepts! Can't wait to learn more from you.

[clashingtv]

Basically the simplest explain of the video is - we intersept the parallel routing endpoint to show mini window and that intersepat so if you at constant stage it will show mini window until click on that segment or reload

[z.sayari]

Thank u sir , simple explanation of this complex content . very useful

[Tony-pqng]

fyi, instead of using (..)photo-feed/[id], you can use (.)[id]

[chrissmakoun]

It's a little bit complicated 😅 .I think we need a small project that contains all these patterns. Thank you.

[evenngmusic]

i wish i could watch all the videos asap

[leonzeng]

where is the demo code in the github. I hope to have several branch for some video demo. I check your github, it is 2 years ago.

[thomasarpin]

Be careful with <Link> components in parallel routes. Prefetch default behavior in this example is a cost efficience killer 😂

[SergioHernandez-lbhs]

I believe I missed something somewhere because I don't have the files shown here, the pictures, etc. Where can I find this information?

[arhanus]

thanks for the informative videos it's really helpful.

[SauravTiru]

So basically since the intercepted route is present inside the modal slot, and the modal is rendered in the layout.tsx, whenever next intercepts /photo-feed/id route, the model is rendered. Correct?

[gupta]

For some reason I'm getting "Application error: a client-side exception has occurred (see the browser console for more information)." when I try intercepting routes for photo-feed!
First I thought I messed up somewhere so I copied entire photo-feed folder and replaced with mine and still getting the same error! I'll appreciate any help that can resolve this, thanks

[tanaymainkar]

Hi Vishwas, can you explain what was the need of @modal parallel route

[venzkie]

Intercepting route is very useful especially in e-commerce website. However, I am still curious on how to override/disable intercepting route in some cases for example a separate link within the card that will fully display the default route.