Next.js 14 Tutorial - 32 - Parallel Intercepting Routes
Вставка
- Опубліковано 20 гру 2023
- 📘 Frontend Interview Course - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support Paypal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
Next.js 14
Next.js Tutorial
Next.js 14 Tutorial
Next.js Tutorial for Beginners
Parallel Intercepting Routes
Parallel Intercepting Routes in Next.js
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.
Thank you bro. I understood the video but still your comment will be really helpful to other people.
Could he have used @modal/(.)[id]/page.tsx
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.
Very nice video in these concepts! Can't wait to learn more from you.
thanks for the informative videos it's really helpful.
Thank You very much! You are the best!
i wish i could watch all the videos asap
Thank you so much🤗🤗
I think this video is complicated. I did not expect it😅😅
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.
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.
I believe I missed something somewhere because I don't have the files shown here, the pictures, etc. Where can I find this information?
It's a little bit complicated 😅 .I think we need a small project that contains all these patterns. Thank you.
Is there still more tutorials for this series?
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.
Be careful with components in parallel routes. Prefetch default behavior in this example is a cost efficience killer 😂
Sup👍er class!
forces you to have width and height. How did you get away with not having width and height?
Please complete remaining videos for Next.js 14
Hi! Thank you for the video!
Could you explain, why default.tsx exist in @modal folder?
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
Hi Vishwas , can you explain what was the need of @modal parallel route
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
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.
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!!👍
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.
Hello Vishwas, you forgot to include the Photo-Feed in the Github repository
fyi, instead of using (..)photo-feed/[id], you can use (.)[id]
wait for more next14
why aren't you posting more videos?? is the series completed?
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.
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
Make sure you setup layout.tsx file in photo-feed directory
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?
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.
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
@@SuyashRajput-ro2ki Now i can say that i have a complete understanding of this pattern. Thank you !
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
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.
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
🤕🤕
Hello,
I am here to help.
Stop using jquery.
😊
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
I faced the same error and fixed it by deleting the .next directory. This will be automatically regenerated on the next run
I have problem when clicking the picture and it is not show the Modal as expected. Does anyone make it runnable?
Make sure you have the layout file in photo-feed
when I create (..)photo-feed/[id]. It doesnt allow me to type /
You need to create the [id] folder inside (..)photo-feed. The page.tsx file must be created inside the [id] folder.
But I inform you that the code is incomplete and an error occurs when invoking {props.modal} on the layout.tsx page.
i did not find to source code on githube, where can i find it ?
same question, how do I find those source code for modal and photo feed
This one is really confused. please share the github repo url ,its really hard to find that . anyway, thanks for your video
it's on his github repo
Is it final for next js ?
@codeevolution
Probably not.
1. There are more concepts to learn.
2. He usually wraps up his series with a wrapping up sentence.
And we haven't even gotten to client side server side things yet...
32 videos still routes
your tutorial is great til you started to skip to the ready made code to save time :(
please send my the source code
it's on his github repo
The most terrible explanation I have ever seen
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.
Within the @modal directory, create a default.tsx file that returns an empty component. Something like this
export default function Default() {
return null;
}
I don't understand the need for a parallel route here. I thought the intercepted route alone will do the trick.