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
→ www.hamedbahram.io/courses/ne...
👉🏼 Parallel routes in NextJs 14
→ • Parallel Routes in Nex...
👉🏼 Project source code (Github)
→ github.com/HamedBahram/next-i...
👉🏼 Project inspiration (vercel-labs/nextgram)
→ github.com/vercel-labs/nextgram
👉🏼 Work with me
→ www.hamedbahram.io/hire
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

[@victoronofiok520]

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.

[@hamedbahram]

You're welcome! Glad to help. I'll be creating more example use cases of this concepts. You can also watch this video → kzbin.info/www/bejne/nGe2dmBth7iUeKs

[@tatsumii1420]

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

[@hamedbahram]

You're welcome! Glad it was helpful!

[@BlueCanoe-fr6hg]

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

[@hamedbahram]

My pleasure! I'm glad you found it helpful.

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

[@hamedbahram]

Glad it was helpful!

[@sebastiancastillo3560]

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

[@hamedbahram]

Thanks! I'm glad to hear that!

[@sufiblade]

Good luck, I gave up halfway through development when I calculated hosting costs hehe

[@sebastiancastillo3560]

@@sufiblade I can recommend Heroku and Postgres database using isolated schemas with Python and Django

[@GearIntellixTV]

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

[@hamedbahram]

My pleasure! Glad it was helpful!

[@user-mq2qb6ry1f]

This is the thing that having been looking for weeks

[@hamedbahram]

Glad you found it!

[@jay_wright_thats_right]

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

[@hamedbahram]

That's right! It wasn't coming out right 😂

[@kapishsingh]

You are latterly very underrated but you know a lot my brother

[@hamedbahram]

Thanks! I appreciate that.

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

[@hamedbahram]

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.

[@saeedakhshijan8159]

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

[@hamedbahram]

Sure thing!

[@paulorobertosallesdossanto6616]

Congrats for sharing knowledge.

[@hamedbahram]

It's my pleasure.

[@MuhammadA.]

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

[@hamedbahram]

Thank you, I'm glad you found it helpful.

[@saityasar3931]

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

[@hamedbahram]

You are very welcome! Glad it was helpful.

[@hassamsaeed4839]

What an awesome explaination

[@hamedbahram]

Thank you!

[@ahmedAbuElnaga13]

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.

[@hamedbahram]

Glad to hear that. That's a good question, let me try it out.

[@ahmedAbuElnaga13]

@@hamedbahram thank you

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

[@hamedbahram]

Thanks! no it can be a server components passed as the children to the modal.

[@thrainii7324]

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?

[@hamedbahram]

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.

[@thrainii7324]

@@hamedbahram Thank you

[@danielherrera9393]

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!

[@hamedbahram]

Not sure! best is to clone down my code and compare to see what you're doing differently.

[@babayaga6172]

Amazing tech content

[@hamedbahram]

Thank you! I appreciate that.

[@tanaymainkar1650]

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

[@hamedbahram]

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).

[@jaymahakaal5354]

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

[@hamedbahram]

Thanks will do. I appreciate that.

[@kapishsingh]

Loving The Videos

[@hamedbahram]

Glad to hear that!

[@27sosite73]

thank you mate

[@hamedbahram]

You're welcome!

[@heysahilsingh]

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 ☺

[@hamedbahram]

Look into route groups where you can opt a page in and out of a shared layout.

[@heysahilsingh]

@@hamedbahram apologies, but I didn't get this.

[@zhiven7484]

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.

[@hamedbahram]

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

[@zhiven7484]

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!! ❤❤

[@hamedbahram]

@@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.

[@zhiven7484]

Yes!! exactly, thank you very much for your help!@@hamedbahram

[@zhiven7484]

Hi @hamedbahram, was the functionality implementable?

[@serialKillerReborn]

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

[@hamedbahram]

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.

[@chibuzoekwue]

Thanks so much

[@hamedbahram]

Any time!

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

[@hamedbahram]

I think that makes sense, because technically you're not on the intercepted page, you're still in the context of the previous page.

[@Abioze]

@@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)

[@hamedbahram]

@@Abioze Interesting 🤔 I have not tried that. Thanks for sharing.

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

[@hamedbahram]

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.

[@codechange75]

Sir, i want a video on route authentication in next js for admin and user because it is bit complicated compare to react routes

[@hamedbahram]

Watch this video → kzbin.info/www/bejne/q6O9YZyDqsycn6s

[@zvinzv]

Please make a video about your extensions in your Visual Studio code, such as font family. thank you For Your Time ❤

[@hamedbahram]

Thanks for the idea!

[@babayaga6172]

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

[@hamedbahram]

Sure! Thanks for the suggestions.

[@shahryartavakkoli]

Dear Hamed could you please tell me what is your webcam?

[@hamedbahram]

It's a Sony camera 📸

[@anbuselvanrocky]

If possible share your video setup. Like to see that.

[@hamedbahram]

Maybe one day

[@albin6126]

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

[@hamedbahram]

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.

[@DnyaneshLohar]

Sir, can you make a single video on material-tailwind css framework for next js 14.

[@hamedbahram]

I'll add that to my schedule. Thanks for the suggestion.

[@user-cx7me2ep2v]

is it possible to use it programmaticaly ????

[@hamedbahram]

What do you mean by that?

[@user-cx7me2ep2v]

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

[@codechange75]

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

[@hamedbahram]

You mean the new next-auth version?

[@codechange75]

@@hamedbahram yes there are many changes in github providers and other and also new error are occurs

[@heysahilsingh]

The timing was quite something - right after I had finished thoroughly reading the Next.js Intercepting Routes documentation, this video suddenly popped up.

[@hamedbahram]

Awesome! Glad it helped.

[@hulashmahto99]

Setup nextjs 14 Google adsense

[@hamedbahram]

Thanks for the idea. I'll have that in mind.

[@olimpioadolfo7498]

Friend this is amazing content right there... 🤌🏻🤌🏻

[@hamedbahram]

Thanks! I appreciate that.