Next.js 14 Tutorial - 32 - Parallel Intercepting Routes

[@chinemelumchuba-nwene1503]

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.

[@thefreemonk6938]

Thank you bro. I understood the video but still your comment will be really helpful to other people.

[@paschalokafor9043]

Could he have used @modal/(.)[id]/page.tsx

[@kumar7259-b4u]

Thanks bro, it was struggling with it

[@natcurti]

Amazing explanation, thank u so much

[@AvikNayak_]

it's amazing how some people can explain with so much clarity.

[@akindipejohn2595]

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!

[@MSEIN2303]

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

[@zhiven7484]

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

[@LeviAckerman-gy4rj]

the modal component is insanely optimize nice job bro

[@clashingtv2527]

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

[@ainmosni4319]

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.

[@chrissmakoun]

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

[@z.sayari]

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

[@leonzeng4139]

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.

[@Tony-pq4ng]

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

[@dareal81]

This is exactly how I did it as well

[@evenngmusic8868]

i wish i could watch all the videos asap

[@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?

[@SergioHernandez-lb1hs]

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

[@gupta5882]

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

[@Gabriel-kl6bt]

It's not working for me this one. I receive some errors "Uncaught TypeError: initialTree is not iterable" and "The above error occurred in the component" when I click on an image.

[@Emmanuel-pq5gs]

Heyy, we’re you able to fix the error ?? I’m currently facing the same error and been trying to fix it but to no avail

[@zaim-wg9dq]

Make sure you setup layout.tsx file in photo-feed directory

[@jorgebello1298]

I had the same problem.I fixed it adding error.tsx at the same level of layout.tsx and It works.

[@thomasarpin9129]

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

[@dhruvmehta2951]

Application error: a client-side exception has occurred (see the browser console for more information). Can anyone help me with this error?

[@castrox605]

I have problem when clicking the picture and it is not show the Modal as expected. Does anyone make it runnable?

[@MisterDibitybopty]

Make sure you have the layout file in photo-feed

[@arhanus7963]

thanks for the informative videos it's really helpful.

[@muratasarslan2359]

Wonderful 🙏

[@zulqadarabbas7567]

when I create (..)photo-feed/[id]. It doesnt allow me to type /

[@marcosaugustoschultzwutke6670]

You need to create the [id] folder inside (..)photo-feed. The page.tsx file must be created inside the [id] folder.

[@marcosaugustoschultzwutke6670]

But I inform you that the code is incomplete and an error occurs when invoking {props.modal} on the layout.tsx page.

[@adibirta]

In Tutorial 32, it appears that 'photo-feed' is not one level above the '@modal' slot, but rather two levels above. However, if the first level above were designated as the slot '@modal', would it then directly correspond to 'photo-feed' as the first level? BIG LIKE!!👍

[@martinmiz]

It is (..)photo-feed/[id] The [id] is another folder inside the (..)photo-feed. VS code just shows them on the same level if there's only one folder below, so you might think it's only one overall folder.

[@tanaymainkar1650]

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

[@chinemelumchuba-nwene1503]

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. I hope this clears this up for you

[@venzkie89]

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.

[@famildoor]

if we use back button of browser the intercepting route page won't render anymore ! why ? what's the solution ? ( eg : after going to photo-feed/4 press f5 and then back button of the browser , then the modal never works :) )

[@KkrDs97]

use can use the router to handle the back like this const router = useRouter(); const handleOpenChange = () => { router.back(); }; and pass that to the modal for onopenChange

[@AmanChauhan-s9t]

if your intercepting route is not working properly, then please delete the .next folder and run server again.

[@aliyevruslan936]

forces you to have width and height. How did you get away with not having width and height?

[@AslanMammadov-w9o]

I am a bit confused. My understanding is that when we navigate, we display the page with the specified [id] as a modal, but as a regular page after reloading. However, I'm puzzled because despite the route changing and not repeating the photo mapping, we're still able to see other cards. Should i just accept this and keep in mind or there is any logic explanation?

[@SuyashRajput-ro2ki]

We can see that the @modal is a parallel route which is used in the layout.jsx But it does not contain a page.jsx file. Thats why when you render the page with cards of all the images no parallel route code for the @modal is being used But when you navigate to the specific product details by clicking on any of them the intercepting route defined gets hit, the layout get provided with appropriate code defined inside the intercepting route which is basically the popup image.

[@SuyashRajput-ro2ki]

Now as you asked for the photo mapping You can see that the layout contains two components -> children - which is responsible for rendering the grid of photos And the other modals - which is responsible for the pop up image

[@AslanMammadov-w9o]

@@SuyashRajput-ro2ki Now i can say that i have a complete understanding of this pattern. Thank you !

[@williamsgobi3184]

Thank you for this video, it was awesome! However, we are creating a website and trying to use parallel and intercept routes. On our home path ('/'), we have some @parallelRoutes paths. In this case, we can't use parallel intercept routes. Do you have a solution? The problem occurs when we create any routes with @parallelRoutes on the home path; if we remove all @parallelRoutes, the other routes work fine.

[@anggaadypratama3711]

the problem is i can't pass a props from main page so i need to recall data

[@charlesalbert5834]

I don't know man, am I the only one getting an application error after clicking any of the images? The expected result would be the modal to be activated but it's causing an error. I am able to access the individual images through the image IDs from the browser though. If any one has faced this before what could be the issue, my assumption would be on the photo-feed intercepting route

[@pura_kotte]

I faced the same error and fixed it by deleting the .next directory. This will be automatically regenerated on the next run

[@jorgebello1298]

I had the same problem.I fixed it adding error.tsx at the same level of layout.tsx and It works.

[@SajalBiswas-v3g]

Thank you so much🤗🤗

[@kenirwin5538]

What part of the code is supposed to pass props.modal to the layout? I know that prop.children is implicitly using the return value from photo-feed/page.tsx, but I don't know where props.modal is coming from, and apparently neither does my app: I keep getting a 404 error that comes from the layout.tsx file. If I take out the {props.modal} in line 11, the error goes away.

[@chinemelumchuba-nwene1503]

Within the @modal directory, create a default.tsx file that returns an empty component. Something like this export default function Default() { return null; }

[@juliovicenteperez7172]

Thank You very much! You are the best!

[@oleksandrvoichyshyn7486]

Hi! Thank you for the video! Could you explain, why default.tsx exist in @modal folder?

[@SuyashRajput-ro2ki]

I think when you visit the product/[id] route by entering the url in the browser( or say you refresh the page )since the @model parallel route does not contain a route folder for the route [id] and ut is being used inside the layout folder it should be provided with a default.tsx I think the code inside the default.tsx will just be a empty component

[@arrasyrizqitaher3895]

Thanks for the tutorials! As a new user I got to learn many about next.js. Anyway, can I get the source code from this one? I've tried it and its error. I think I've missed couple things

[@martinmiz]

Check the description of the video. But if you don't quite understand the tutorial, it's better you go back a few videos behind other than checking for answers in the GitHub repo. That will help you more.

[@abdulwahabsiddiqui1003]

sir plz help me : plz could you tell how to link custom jquery files in next js 14 .i link my custom jquery files whcih is present in my publick folder and i link in layout,js but some time its link fine and some time i reload the page then its not link 🤕🤕

[@isaacdruin]

Hello, I am here to help. Stop using jquery.

[@shineLouisShine]

😊

[@sebababi333]

Hello Vishwas, you forgot to include the Photo-Feed in the Github repository

[@kenirwin5538]

All of the lessons up until this one have been pretty clear, but this one tried to do too much with too little explanation. It required so much supporting code that the only way to follow along was to copy and paste the code instead of learning to write the code. And then once I copied and pasted, I got a bunch of errors.

[@erhancemkorkmaz9731]

i did not find to source code on githube, where can i find it ?

[@cguser]

same question, how do I find those source code for modal and photo feed

[@lawsonmichael2595]

Is there still more tutorials for this series?

[@2u841r]

Thank you

[@BruceWayne-kw6xm]

why aren't you posting more videos?? is the series completed?

[@amrithsudarshan2062]

This one is really confused. please share the github repo url ,its really hard to find that . anyway, thanks for your video

[@miftahulhabib6810]

it's on his github repo

[@kikevanegazz325]

I don't understand the need for a parallel route here. I thought the intercepted route alone will do the trick.

[@saisuryatejachavatapalli]

Please complete remaining videos for Next.js 14

[@ねこ-p1b7o]

And we haven't even gotten to client side server side things yet...

[@joantsyn7578]

Sup👍er class!

[@shinnthantminn9758]

wait for more next14

[@Dreamain1102]

Is it final for next js ?

[@prafulkatlana3439]

@codeevolution

[@shineLouisShine]

Probably not. 1. There are more concepts to learn. 2. He usually wraps up his series with a wrapping up sentence.

[@mmaikechi]

your tutorial is great til you started to skip to the ready made code to save time :(

[@hosseinaflaki3342]

please send my the source code

[@miftahulhabib6810]

it's on his github repo

[@PratikKumarVishwakarma-sb4ue]

hindi me bana deta bhai plz

[@z-onealdo6131]

The most terrible explanation I have ever seen

[@ejazalam6512]

32 videos still routes

[@ridhamsavaliya556]

i can do this in react very easily by making any modal dont need any of this complex shit