I was literally searching for this concept last week (not on youtube) and I had no idea it had to do with "intercepting routes", so I don't even know how? bro, I'm confused and excited at the same time. Would love to understand the cycle. Hamed you're blessed, thanks for this upload.
You're welcome! Glad to help. I'll be creating more example use cases of this concepts. You can also watch this video → ua-cam.com/video/f6SE-7RSaBI/v-deo.html
Yes and yes :) You can customize the overlay and animation to the modal. Find the modal component in the source code and update it in the way you want.
Great video, it was very helpful! I have a question: I created product intercepting routes, but inside the product details page, if I try to change the language or add query parameters, it triggers the modal even though I'm already on the product details page.
Great video, but I'm curious Do I need to make the photo component a client component to be able to use it inside the modal component, since the modal component is a client component
I have a question, imagine you have a route segment with a sidebar and an article on a route called '/dashboard'. Now, if you go to '/dashboard/456', you still want the sidebar but with a different article. But, if you go to '/dashboard/456/settings', you want a completely different page without the sidebar and the article. How to achieve this in NextJs? Any help would be appreciated ☺
Thank you for this incredible training, I understood very well how we should use it. The only question that comes to my mind is in what situations should we use this feature?
When you want to render the content of a different route from the current layout. For example you can have a login modal that render the content of your dedicated `/login` route. I'll be creating more example use cases of this concept soon.
The `default.tsx` is for when NextJs can't find the matching segment in your slot and is different from the `page.tsx`. It also behaves different in client-side navigation (soft) vs a hard navigation (page reload).
Now I am understand the concept.But I want to know that when I click on the image then modal opens and also update the url , if i force to reload my page then i can visit the link.but need to know how can i visit that link without force reload and at the same time the modal should work if I click a button or some text of the card?I mean there will be two button one will open the modal and other will open the link.
Thank you for this videos. But how change the metadatas when the route is intercepted ? When i use generateMetadata inside my modal page, next ignore them.
@@hamedbahram Thanks for your answer. I make some test, and it works when we intercept the page from the root of the app (app directory) but it's not working when we're on child folder (ex: photos)
URL or route segment: part of the URL path delimited by slashes e.g `/about`. And file-system based routing means routes are defined (or represented) by files and folders in our project.
Can u please make a video about api security in nextjs like csrf tokens or securing your apps from scraping and localization if content comes from cms, Thanks for your consideration
Fantastic Video!! I have a question, if you are in photo 1, you can click photo 2 and navigate to photo 2, if to implement for closing modal functionality, how would you achieve? Closing the modal would need to clear all the previous photos related path.
You can create a catch-all route to dismiss the modal when navigating to a different route. Read more here → nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal
Hi @@hamedbahram , I tried the catch-all, but it didn't seem to work. The expected behavior: from '/' , navigate to photo/1, then navigate to photo/2 in photo/1, and closing the modal in photo 2 would take me back to / . How would I achieve this. I really appreciate if you can help!! ❤❤
@@zhiven7484 I see. I guess you're trying to create an image gallery so you can loop through different images in the modal and go back to the `/photos` page once you close the modal? Let me try it out.
why do we have to do this while we can have a client side modal and pass the image as prop and show model and if we click a button on the modal it navigate to the full page view of image
This allows you to show the content of a route, a segment, a full page without switching the context, it goes beyond showing an image in a modal, this'll include fetching data on the server for the intercepted route, loading UI and error boundaries.
@@hamedbahram in the case i have a private page and i verify if user is connected and if not i make redirection. is it possible to use intercepting? route because actualy it doesn't work for me it only work when i use Link from nextjs
Hello sir,next-auth generate an error with github provider with prisma in typescript make a video on it because it new version occur the error I tried it in 2 days but not done.new version get error
The timing was quite something - right after I had finished thoroughly reading the Next.js Intercepting Routes documentation, this video suddenly popped up.
I was literally searching for this concept last week (not on youtube) and I had no idea it had to do with "intercepting routes", so I don't even know how? bro, I'm confused and excited at the same time. Would love to understand the cycle. Hamed you're blessed, thanks for this upload.
You're welcome! Glad to help. I'll be creating more example use cases of this concepts. You can also watch this video → ua-cam.com/video/f6SE-7RSaBI/v-deo.html
Clearest explanation I have found for this complex but very useful feature. Thank you.
My pleasure! I'm glad you found it helpful.
Finally someone who can explain this perfectly. Thanks for the video!
Glad it was helpful.
ive been waiting for intercepting routes it was confusing for me , u made it clear.
Thank You Hamed
You're welcome! Glad it was helpful!
This was just what I was looking for but I didn't know the name of the feature. I really appreciate your clear explanations.
Glad it was helpful!
hamed kheyli karat khafane vaghean lezat mibaram az video had omdivaram hamishe movafagh bashi
Eraadat 🫡
super clear explanation, now I understand how to used it and how it works.
thank you for making this video!
My pleasure! Glad it was helpful!
Great video! Thank you for the explanation. Two questions! The overlay is customizable? And can I add an entrance/exit animation to the modal? Thanks
Yes and yes :) You can customize the overlay and animation to the modal. Find the modal component in the source code and update it in the way you want.
Oh! So this what they meant in the docs, now i got it. Thanks a lot Hamed.
Glad to hear you found it helpful!
Sir you ave very good explanation, keep it up, all advanced topics you explain them very clearly and easily
Thank you, I'm glad you found it helpful.
Incredible, as always!!🤩.
I'm developing a accounting software with Nextjs 14, your videos are gold! wish me luck🖖🏻!
Thanks! I'm glad to hear that!
Good luck, I gave up halfway through development when I calculated hosting costs hehe
@@sufiblade I can recommend Heroku and Postgres database using isolated schemas with Python and Django
You are latterly very underrated but you know a lot my brother
Thanks! I appreciate that.
Thanks for this video!! i'm also using headless ui but the modal animation doesn't work when the modal is show up, any idea why? Thanks for your help!
Not sure! best is to clone down my code and compare to see what you're doing differently.
This is the thing that having been looking for weeks
Glad you found it!
Brilliant Again and Again ❤❤❤
Thank you!
Great video, it was very helpful!
I have a question: I created product intercepting routes, but inside the product details page, if I try to change the language or add query parameters, it triggers the modal even though I'm already on the product details page.
Glad to hear that. That's a good question, let me try it out.
@@hamedbahram thank you
Great video, but I'm curious
Do I need to make the photo component a client component to be able to use it inside the modal component, since the modal component is a client component
Thanks! no it can be a server components passed as the children to the modal.
I have a question, imagine you have a route segment with a sidebar and an article on a route called '/dashboard'. Now, if you go to '/dashboard/456', you still want the sidebar but with a different article. But, if you go to '/dashboard/456/settings', you want a completely different page without the sidebar and the article.
How to achieve this in NextJs? Any help would be appreciated ☺
Look into route groups where you can opt a page in and out of a shared layout.
@@hamedbahram apologies, but I didn't get this.
Thank you for this incredible training, I understood very well how we should use it. The only question that comes to my mind is in what situations should we use this feature?
When you want to render the content of a different route from the current layout. For example you can have a login modal that render the content of your dedicated `/login` route. I'll be creating more example use cases of this concept soon.
@@hamedbahram Thank you
so cool, please share more videos for real world use cases. thank you 👌💖
Sure thing!
Hi Hamed, Is there really a need of page.tsx in parallel route slots , like you created in @team. Can't we directly have default.tsx
The `default.tsx` is for when NextJs can't find the matching segment in your slot and is different from the `page.tsx`. It also behaves different in client-side navigation (soft) vs a hard navigation (page reload).
this video realy understandable thank you for especially for hamed you are good mentore
You are very welcome! Glad it was helpful.
heyy thank you hamed please cover all depth nextjs topics from docs... Your nextjs course is gonna be the best on youtube in the end combine all
Thanks will do. I appreciate that.
Now I am understand the concept.But I want to know that when I click on the image then modal opens and also update the url , if i force to reload my page then i can visit the link.but need to know how can i visit that link without force reload and at the same time the modal should work if I click a button or some text of the card?I mean there will be two button one will open the modal and other will open the link.
You don't need an intercepting route for that. You can have a button that opens a regular modal and a link that goes to that page.
Thank you for this videos. But how change the metadatas when the route is intercepted ? When i use generateMetadata inside my modal page, next ignore them.
I think that makes sense, because technically you're not on the intercepted page, you're still in the context of the previous page.
@@hamedbahram Thanks for your answer. I make some test, and it works when we intercept the page from the root of the app (app directory) but it's not working when we're on child folder (ex: photos)
@@Abioze Interesting 🤔 I have not tried that. Thanks for sharing.
What an awesome explaination
Thank you!
Hi Hamed, I don't understand what you meant by Route segments and File System?
URL or route segment: part of the URL path delimited by slashes e.g `/about`. And file-system based routing means routes are defined (or represented) by files and folders in our project.
If possible share your video setup. Like to see that.
Maybe one day
Can u please make a video about api security in nextjs like csrf tokens or securing your apps from scraping and localization if content comes from cms, Thanks for your consideration
Sure! Thanks for the suggestions.
Congrats for sharing knowledge.
It's my pleasure.
Loving The Videos
Glad to hear that!
He's saying "parallel" routes, people. It's one of his tough words.
That's right! It wasn't coming out right 😂
why do you use (..)photos instead of (.)photos? it isn't in the same level?
Good question! I'd have to look at the project structure to recall that.
Sir, can you make a single video on material-tailwind css framework for next js 14.
I'll add that to my schedule. Thanks for the suggestion.
Fantastic Video!!
I have a question, if you are in photo 1, you can click photo 2 and navigate to photo 2, if to implement for closing modal functionality, how would you achieve? Closing the modal would need to clear all the previous photos related path.
You can create a catch-all route to dismiss the modal when navigating to a different route. Read more here → nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal
Hi @@hamedbahram , I tried the catch-all, but it didn't seem to work. The expected behavior: from '/' , navigate to photo/1, then navigate to photo/2 in photo/1, and closing the modal in photo 2 would take me back to / . How would I achieve this. I really appreciate if you can help!! ❤❤
@@zhiven7484 I see. I guess you're trying to create an image gallery so you can loop through different images in the modal and go back to the `/photos` page once you close the modal? Let me try it out.
Yes!! exactly, thank you very much for your help!@@hamedbahram
Hi @hamedbahram, was the functionality implementable?
Sir, i want a video on route authentication in next js for admin and user because it is bit complicated compare to react routes
Watch this video → ua-cam.com/video/urZ0iMugiiI/v-deo.html
Dear Hamed could you please tell me what is your webcam?
It's a Sony camera 📸
why do we have to do this while we can have a client side modal and pass the image as prop and show model and if we click a button on the modal it navigate to the full page view of image
This allows you to show the content of a route, a segment, a full page without switching the context, it goes beyond showing an image in a modal, this'll include fetching data on the server for the intercepted route, loading UI and error boundaries.
Please make a video about your extensions in your Visual Studio code, such as font family. thank you For Your Time ❤
Thanks for the idea!
Didn't we needed to make a Default file for root i.e children ?is it not necessary?
Not really.
thank you so much!!!
My pleasure!
Amazing tech content
Thank you! I appreciate that.
thank you mate
You're welcome!
is it possible to use it programmaticaly ????
What do you mean by that?
@@hamedbahram in the case i have a private page and i verify if user is connected and if not i make redirection. is it possible to use intercepting? route because actualy it doesn't work for me it only work when i use Link from nextjs
Thanks so much
Any time!
Hello sir,next-auth generate an error with github provider with prisma in typescript make a video on it because it new version occur the error I tried it in 2 days but not done.new version get error
You mean the new next-auth version?
@@hamedbahram yes there are many changes in github providers and other and also new error are occurs
The timing was quite something - right after I had finished thoroughly reading the Next.js Intercepting Routes documentation, this video suddenly popped up.
Awesome! Glad it helped.
Thanks a lot Hamed! Explained really well. . But the concept itself feels very over engineered.
Yes, you are right, it is an advanced routing technique.
Setup nextjs 14 Google adsense
Thanks for the idea. I'll have that in mind.
Chào bạn chúc ngày mới vui vẻ và bình an cảm ơn đã chia sẻ vi deo mình cùng nhau đồng hành nha ban mình đã đkk ban🎉🎉🎉🎉🎉
Thank you! I'm glad you found it helpful.
Friend this is amazing content right there... 🤌🏻🤌🏻
Thanks! I appreciate that.