Intercepting Routes in NextJs 14

  Рет қаралды 20,756

Hamed Bahram

Hamed Bahram

Күн бұрын

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

Пікірлер: 99
@victoronofiok520
@victoronofiok520 6 ай бұрын
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
@hamedbahram 6 ай бұрын
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
@BlueCanoe-fr6hg
@BlueCanoe-fr6hg 14 күн бұрын
Clearest explanation I have found for this complex but very useful feature. Thank you.
@hamedbahram
@hamedbahram 14 күн бұрын
My pleasure! I'm glad you found it helpful.
@tatsumii1420
@tatsumii1420 6 ай бұрын
ive been waiting for intercepting routes it was confusing for me , u made it clear. Thank You Hamed
@hamedbahram
@hamedbahram 6 ай бұрын
You're welcome! Glad it was helpful!
@jay-cm
@jay-cm 5 ай бұрын
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
@hamedbahram 5 ай бұрын
Glad it was helpful!
@GearIntellixTV
@GearIntellixTV 3 ай бұрын
super clear explanation, now I understand how to used it and how it works. thank you for making this video!
@hamedbahram
@hamedbahram 3 ай бұрын
My pleasure! Glad it was helpful!
@user-mq2qb6ry1f
@user-mq2qb6ry1f Ай бұрын
This is the thing that having been looking for weeks
@hamedbahram
@hamedbahram Ай бұрын
Glad you found it!
@sebastiancastillo3560
@sebastiancastillo3560 6 ай бұрын
Incredible, as always!!🤩. I'm developing a accounting software with Nextjs 14, your videos are gold! wish me luck🖖🏻!
@hamedbahram
@hamedbahram 6 ай бұрын
Thanks! I'm glad to hear that!
@sufiblade
@sufiblade 6 ай бұрын
Good luck, I gave up halfway through development when I calculated hosting costs hehe
@sebastiancastillo3560
@sebastiancastillo3560 6 ай бұрын
@@sufiblade I can recommend Heroku and Postgres database using isolated schemas with Python and Django
@jay_wright_thats_right
@jay_wright_thats_right 6 ай бұрын
He's saying "parallel" routes, people. It's one of his tough words.
@hamedbahram
@hamedbahram 6 ай бұрын
That's right! It wasn't coming out right 😂
@MuhammadA.
@MuhammadA. Ай бұрын
Sir you ave very good explanation, keep it up, all advanced topics you explain them very clearly and easily
@hamedbahram
@hamedbahram Ай бұрын
Thank you, I'm glad you found it helpful.
@saeedakhshijan8159
@saeedakhshijan8159 6 ай бұрын
so cool, please share more videos for real world use cases. thank you 👌💖
@hamedbahram
@hamedbahram 6 ай бұрын
Sure thing!
@kapishsingh
@kapishsingh 6 ай бұрын
You are latterly very underrated but you know a lot my brother
@hamedbahram
@hamedbahram 6 ай бұрын
Thanks! I appreciate that.
@paulorobertosallesdossanto6616
@paulorobertosallesdossanto6616 2 ай бұрын
Congrats for sharing knowledge.
@hamedbahram
@hamedbahram 2 ай бұрын
It's my pleasure.
@jaymahakaal5354
@jaymahakaal5354 6 ай бұрын
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
@hamedbahram 6 ай бұрын
Thanks will do. I appreciate that.
@hassamsaeed4839
@hassamsaeed4839 2 ай бұрын
What an awesome explaination
@hamedbahram
@hamedbahram 2 ай бұрын
Thank you!
@saityasar3931
@saityasar3931 4 ай бұрын
this video realy understandable thank you for especially for hamed you are good mentore
@hamedbahram
@hamedbahram 4 ай бұрын
You are very welcome! Glad it was helpful.
@JuanmaNomad
@JuanmaNomad 2 ай бұрын
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
@hamedbahram 2 ай бұрын
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.
@babayaga6172
@babayaga6172 6 ай бұрын
Amazing tech content
@hamedbahram
@hamedbahram 6 ай бұрын
Thank you! I appreciate that.
@danielherrera9393
@danielherrera9393 4 ай бұрын
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
@hamedbahram 4 ай бұрын
Not sure! best is to clone down my code and compare to see what you're doing differently.
@serialKillerReborn
@serialKillerReborn 5 ай бұрын
Hi Hamed, I don't understand what you meant by Route segments and File System?
@hamedbahram
@hamedbahram 5 ай бұрын
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.
@tanaymainkar1650
@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
@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).
@kennyNn
@kennyNn 2 ай бұрын
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
@hamedbahram 2 ай бұрын
Thanks! no it can be a server components passed as the children to the modal.
@ahmedAbuElnaga13
@ahmedAbuElnaga13 29 күн бұрын
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
@hamedbahram 29 күн бұрын
Glad to hear that. That's a good question, let me try it out.
@ahmedAbuElnaga13
@ahmedAbuElnaga13 29 күн бұрын
@@hamedbahram thank you
@heysahilsingh
@heysahilsingh 6 ай бұрын
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
@hamedbahram 6 ай бұрын
Look into route groups where you can opt a page in and out of a shared layout.
@heysahilsingh
@heysahilsingh 6 ай бұрын
@@hamedbahram apologies, but I didn't get this.
@kapishsingh
@kapishsingh 6 ай бұрын
Loving The Videos
@hamedbahram
@hamedbahram 6 ай бұрын
Glad to hear that!
@thrainii7324
@thrainii7324 6 ай бұрын
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
@hamedbahram 6 ай бұрын
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
@thrainii7324 6 ай бұрын
@@hamedbahram Thank you
@27sosite73
@27sosite73 6 ай бұрын
thank you mate
@hamedbahram
@hamedbahram 6 ай бұрын
You're welcome!
@Abioze
@Abioze 4 ай бұрын
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
@hamedbahram 4 ай бұрын
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
@Abioze 4 ай бұрын
@@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
@hamedbahram 4 ай бұрын
@@Abioze Interesting 🤔 I have not tried that. Thanks for sharing.
@HasanainTusar
@HasanainTusar 3 ай бұрын
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
@hamedbahram 3 ай бұрын
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.
@zvinzv
@zvinzv 6 ай бұрын
Please make a video about your extensions in your Visual Studio code, such as font family. thank you For Your Time ❤
@hamedbahram
@hamedbahram 6 ай бұрын
Thanks for the idea!
@shahryartavakkoli
@shahryartavakkoli 6 ай бұрын
Dear Hamed could you please tell me what is your webcam?
@hamedbahram
@hamedbahram 6 ай бұрын
It's a Sony camera 📸
@chibuzoekwue
@chibuzoekwue 6 ай бұрын
Thanks so much
@hamedbahram
@hamedbahram 6 ай бұрын
Any time!
@zhiven7484
@zhiven7484 6 ай бұрын
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
@hamedbahram 6 ай бұрын
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
@zhiven7484 5 ай бұрын
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
@hamedbahram 5 ай бұрын
@@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
@zhiven7484 5 ай бұрын
Yes!! exactly, thank you very much for your help!@@hamedbahram
@zhiven7484
@zhiven7484 5 ай бұрын
Hi @hamedbahram, was the functionality implementable?
@anbuselvanrocky
@anbuselvanrocky 3 ай бұрын
If possible share your video setup. Like to see that.
@hamedbahram
@hamedbahram 3 ай бұрын
Maybe one day
@albin6126
@albin6126 14 күн бұрын
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
@hamedbahram 13 күн бұрын
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.
@codechange75
@codechange75 6 ай бұрын
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
@hamedbahram 6 ай бұрын
Watch this video → kzbin.info/www/bejne/q6O9YZyDqsycn6s
@babayaga6172
@babayaga6172 6 ай бұрын
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
@hamedbahram 6 ай бұрын
Sure! Thanks for the suggestions.
@DnyaneshLohar
@DnyaneshLohar 6 ай бұрын
Sir, can you make a single video on material-tailwind css framework for next js 14.
@hamedbahram
@hamedbahram 6 ай бұрын
I'll add that to my schedule. Thanks for the suggestion.
@user-cx7me2ep2v
@user-cx7me2ep2v 12 күн бұрын
is it possible to use it programmaticaly ????
@hamedbahram
@hamedbahram 12 күн бұрын
What do you mean by that?
@user-cx7me2ep2v
@user-cx7me2ep2v 8 күн бұрын
@@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
@heysahilsingh
@heysahilsingh 6 ай бұрын
The timing was quite something - right after I had finished thoroughly reading the Next.js Intercepting Routes documentation, this video suddenly popped up.
@hamedbahram
@hamedbahram 6 ай бұрын
Awesome! Glad it helped.
@codechange75
@codechange75 6 ай бұрын
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
@hamedbahram 6 ай бұрын
You mean the new next-auth version?
@codechange75
@codechange75 6 ай бұрын
@@hamedbahram yes there are many changes in github providers and other and also new error are occurs
@hulashmahto99
@hulashmahto99 6 ай бұрын
Setup nextjs 14 Google adsense
@hamedbahram
@hamedbahram 6 ай бұрын
Thanks for the idea. I'll have that in mind.
@olimpioadolfo7498
@olimpioadolfo7498 6 ай бұрын
Friend this is amazing content right there... 🤌🏻🤌🏻
@hamedbahram
@hamedbahram 6 ай бұрын
Thanks! I appreciate that.
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 186 М.
The new `useTransition` hook with 3 example usecases
20:38
Hamed Bahram
Рет қаралды 8 М.
Osman Kalyoncu Sonu Üzücü Saddest Videos Dream Engine 170 #shorts
00:27
Дибала против вратаря Легенды
00:33
Mr. Oleynik
Рет қаралды 3,3 МЛН
Can You Draw A PERFECTLY Dotted Line?
00:55
Stokes Twins
Рет қаралды 51 МЛН
Global State Management in NextJs 14 Using Zustand
51:17
Hamed Bahram
Рет қаралды 22 М.
NextJS Parallel Routes Explained with a Simple Example
14:04
Dave Gray
Рет қаралды 7 М.
Templates vs Layouts in NextJs 13
16:54
Hamed Bahram
Рет қаралды 13 М.
Nested Layouts in NextJs 13 Using Route Groups
13:33
Hamed Bahram
Рет қаралды 12 М.
Is Next.js better than Remix.run? | Next.js vs Remix in 2024
11:20
Jan Marshal
Рет қаралды 4,6 М.
The Linux Experience
31:00
Bog
Рет қаралды 322 М.
Main filter..
0:15
CikoYt
Рет қаралды 11 МЛН
Samsung S24 Ultra professional shooting kit #shorts
0:12
Photographer Army
Рет қаралды 31 МЛН
Телефон в воде 🤯
0:28
FATA MORGANA
Рет қаралды 1,2 МЛН
Какой ПК нужен для Escape From Tarkov?
0:48
CompShop Shorts
Рет қаралды 272 М.
Secret Wireless charger 😱 #shorts
0:28
Mr DegrEE
Рет қаралды 1,9 МЛН