Intercepting Routes in NextJs 14

This video will look at intercepting routes in NextJs 14. Intercepting routes allow you to display the content of a different route without switching contexts. We’ll combine this with parallel routes to create a photo gallery with a preview modal.

👉🏼 The Ultimate NextJs 14 Course

👉🏼 Parallel routes in NextJs 14

👉🏼 Project source code (Github)

👉🏼 Project inspiration (vercel-labs/nextgram)

👉🏼 Work with me

Chapters
0:00 Intro
1:40 Concept
9:16 Project setup
12:30 Add photos page
13:10 Add dynamic route
14:15 Add Intercepting route
16:55 Dismissing the modal
18:40 Add parallel route
24:25 Recap

[victoronofiok]

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.

[BlueCanoe-frhg]

Clearest explanation I have found for this complex but very useful feature. Thank you.

[tatsumii]

ive been waiting for intercepting routes it was confusing for me, u made it clear.
Thank You Hamed <3

[jay-cm]

This was just what I was looking for but I didn't know the name of the feature. I really appreciate your clear explanations.

[persianwolf]

hamed kheyli karat khafane vaghean lezat mibaram az video had omdivaram hamishe movafagh bashi

[GearIntellixTV]

super clear explanation, now I understand how to used it and how it works.
thank you for making this video!

[sebastiancastillo]

Incredible, as always!!🤩.
I'm developing a accounting software with Nextjs 14, your videos are gold! wish me luck🖖🏻!

[jay_wright_thats_right]

He's saying "parallel" routes, people. It's one of his tough words.

[mqqbryf]

This is the thing that having been looking for weeks

[MuhammadA.]

Sir you ave very good explanation, keep it up, all advanced topics you explain them very clearly and easily

[danielherrera]

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!

[JuanmaNomad]

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

[tanaymainkar]

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

[saeedakhshijan]

so cool, please share more videos for real world use cases. thank you 👌💖

[HasanainTusar]

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.

[ahmedAbuElnaga]

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.

[kennyNn]

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

[saityasar]

this video realy understandable thank you for especially for hamed you are good mentore

[serialKillerReborn]

Hi Hamed, I don't understand what you meant by Route segments and File System?

[Abioze]

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.