This video will look at parallel routes in NextJs 14. Parallel routes allow you to render multiple pages at the same route segment using the same layout simultaneously.
👉🏼 Intercepting routes in NextJs 14
→ • Intercepting Routes in...
👉🏼 The Ultimate NextJs 14 Course
→ www.hamedbahram.io/courses/ne...
👉🏼 Project source code (Github)
→ github.com/HamedBahram/next-p...
👉🏼 Work with me
→ www.hamedbahram.io/hire
Chapters
0:00 Intro
11:30 Project setup
12:40 Adding named slots
14:30 Adding loading UI
16:20 Adding default UI
20:53 Recap
Your provided a clear and practical approach to using parallel routing, one of the confusing nextjs concepts. Thanks Hamed. You've always been my savior. you always are ❤
I'm glad to hear that. Thanks.
Very well explained. Thank You, Hamed!
My pleasure. Glad it was helpful!
it was quite new content about parallel routing which i never seen before. thanks to simplify and share it.
My pleasure. Glad you found it helpful.
Thanks for the clear information!
My pleasure!
Your learning approach is really good. Got a clear concept about parallel routing. Thank you.
Glad it was helpful!
very well explained especially the soft navigation, I was struggling with that
Glad it was helpful!
this was a great video and great explanation many thanks!
Glad to hear that!
Your videos is among the best out there! Can't think of any one else this good at explaning.. maybe Jack Harrington. You two, best two persons to explain things. Keep up this truly awesome content!
Thanks! I appreciate that. Glad you find the videos helpful.
I like this video. thank you so much!
Glad you liked it!
Man You explained it beautifully.. i will remember this for ever... thanks a lot .. please cover data fetching in next js next
I'm glad to hear that! Thanks.
Thanks your a practical content
Glad it was helpful!
sir thank you so much for this video. this was the confusing topic.
Glad to hear it was helpful.
Now you are a mind reader too Thanks 👍.
😅 There you have it.
A tricky subject tackled well, thanks A small criticism, I only have a small laptop screen; at the start of the tutorial, half the screen was taken up by a shot of you explaining the concepts and this made it hard to see the important other half which showed the file structure etc.
Thanks for the feedback! I'll have that in mind.
First time watching one of your videos and they are amazing. Excited to check out your courses. I have one question though, I am having trouble understanding why you would ever want to have a folder structure (segments) within a slot. Seems odd to me to have to maintain 2 versions of every other sections just to deal with hard navigation. What would be the use case?
Thank you! I appreciate that. I agree, the route segment inside a slot may not have many use cases other than showing the segment (e.g `/settings`) in context of the parallel sections. I have demonstrated one use case in the video linked below where we have an intercepting route inside of a `@modal` parallel route. → kzhead.info/sun/ha-sqreqq4mnnXk/bejne.html
I still have a hard time understanding why I would use this instead of different components. Especially now when they can be streamed in independently of each other? This is my only problem with Next, there are so many ways to achieve roughly the same things and no clear best practices… if anyone has a best practice for me when it comes to these Parallel Routes, please help out. 🙏🏻
I'll build on the use cases of parallel routes in the next video where I combine it with intercepting routes. But on its own here are a couple of advantages using parallel routes: - Separate your concerns into different slots with dedicated loading UI and error boundaries without affecting the URL. - Rendering to different UIs depending on soft vs hard navigation. saving vs switching context. - Rendering dynamic and static data on the same view.
@@hamedbahram Is there any of that which can’t be achieved with regular server and client components?
@@dawid_dahl A lot of what a framework offers can be achieved manually with custom solutions, but the point of using a framework is so you don't have to build it yourself. These type of out-of-the-box features enable even smaller dev teams to build complex UIs.
@@hamedbahram I noticed that you didn’t directly answer the question. Can I take that to mean that the three points you mention can indeed be achieved with server and client components? I’m not trying to put you on the spot (super grateful for these videos they’ve helped me a lot) rather I’m just trying to understand. I’m using Next 14 at work to build a production app right now and if parallel routes are an amazing new pattern I should teach the team I need to find out.
@@dawid_dahlthese are rather new concepts and difficult to decide if it’s really useful or just complicating things. I also think pretty much same could be achieved by nicely structured components as you said. However it seems like there are certain features that makes parallel routes interesting. What I see from examples are: - paralel routes are smaller module versions of layout.tsx. Instead of caching and storing everything except “children” in layout.tsx, it allows to cache and serve only a small chunks without refetching - allows concurrent requests rather than waiting each awaitable requests (each paralel route request called simultanously) - error and loading files for each chunk instead of crashing/loading entire page - self organized structure In my opinion the best use case for this would be a client dashboard or homepage with several modules. But of course I’d appreciate any input in case I’m missing something. On the other hand we should approach this with caution. particulaly I didn’t like that 404 error on dev. Since Next 14 release, thing have been hectic and Next team is pulling it together slowly. I’m sure they’ll fix those issues soon. Edit: Well, I guess I missed that you have to use paralel routes inside layout.tsx directly. For a moment, I thought it's possible to pass it into another page (server component) but apparently it's not possible. Therefore, I cannot even imagine how you can incorporate them into your design layout or decide which page will display it. Considering the complexity, it's far from being useful for me.
Nice
Thanks!
I only understand one advantage about parallel routes, it is intercepting routes, without them I dont see differences between parallel routes and lazy loading components.
Parallel routes allow you to render multiple pages simultaneously.
Is there a way to show the Team page instead of Default Team page without having the same code in both page.tsx and default.tsx of the team slot ? Thank you for this amazing explanation and guide.
I can't think of a way other than exporting the same component from both pages. But keep in mind that on soft navigation the content of the team slot doesn't change and it's only during reload or hard navigation that the default is rendered.
Please do a video on intercepting routes.
Coming up next :)
Great video on a tricky concept. Seems like many use cases would have the default be the same as each page. Can we just import and export the function from our `page.tsx` in our `default.tsx` to accomplish this behavior?
Good question, yes that would accomplish the same behaviour if the default is the same as the original page.
A great lesson with a beautiful theme. Would you mind telling me the name of this VSC theme? Thank you in advance.
Thanks! The theme is called "Dark+ with Italics"
Also make a video on intercepting routes ☺
Coming up next :)
Luckily, I watched your video and now I know the reason why it didn't work when I tried it before.
Absolutely! Thanks for tuning in.
Hi @Hamed Bahram well explain Paralledl Routes, But I have a question how can we handle parallel route with condition for example I develop an application which have multiple users role for example super admin, admin, user, agent then how I can render the layout according to there role?
Glad to hear that. Yes you can use conditional render for that. See here → nextjs.org/docs/app/building-your-application/routing/parallel-routes#conditional-routes
@@hamedbahram thankyou so much
I have a quick question. I've implemented cookies and JWT authentication in my NestJS backend. Now I'm working on the Next.js frontend, and I have a server component that sends a request to the backend (Nest) to get protected data. However, I'm receiving an "unauthorized" message from the backend in the server component. Note: I'm using HTTPS-only cookies and ngrok for HTTPS in development. How to solve this? means how i can configure next js How i can forwards the secure cookies from Server compoents to the nest js backend that are comming from the browser
You can use the `headers` and `cookies` function from `next/headers` to forward the headers to your nest backend.
First of all now I completely understand parallel routes. But I have one question that If I directly go to settings routes and I still want to show Parallel Routes and Team section instead of default page.What will be the approach for this.
Glad to hear that. I'm not sure if I understand your question correctly, but you can export the same component from the defaults.
what i can do to show '''parallel routes' and 'team' instead of 'default main page' and 'default team' when i hard refresh on settings segment.
Export the same page components from the defaults.
I'm not really understanding a need of default pages. Is it maybe preventing security issues?
The default is the UI for reloads and hard navigations to the segment.
in NextJs 14.1 the local 404 problem is fixed now!
Fantastic 🎉
Sir,please you can make a video on admin or normal user routes protection with node js because its confusing compare to react routes
I want it in next js frontend and node backed
You need to check the role of the user and if the role is admin you return the page if not you return denied or redirect (up to you based on your needs).
Sure, I'll have that in mind for future videos.
Thanks for contributing to the question Dejan!
the best way to do is using middleware (ssr approach), check from there, then return 403 for forbidden access or 404 for page not found
With Suspense you can trigger a "re-render" with the key prop to display the loading screen again. How can you do this with Parallel Routes?
Try adding a template to your parallel slots.
I will give it shot today. Thank you! @@hamedbahram
Parrel route is a cool thing but where I use this .that I have confused. can you give some production test case for this ?
I'm going build on more complex use cases in future videos. Stay tuned
Is it possible to make a dynamic parallel route?
You can have parallel pages inside of a dynamic route.
please answer how to get the pathname as "emplopyee/[id]/edit" like this, cause i wanna give the pathnames a unique name to identify in the layout. (Or) can you explain how can we keep the navbar fr some pages and exclude for some pages based on pathnames only in next js app router.
@hamedbahram please anser this, I search for this solution, i found it on pages router but i failed for app router.... please make this ASAP
In server components you can use the `params` prop passed to the page component by NextJs, in client components you can use the `usePathname` hook to access it. To render different layouts including/excluding the navbar look into Route groups.
@@hamedbahram that can help thank you Hamed
@@hamedbahram and a small confusion in next js pages router - (router.asPath: "/farm/66016e78bc87d1994aebe41b") and (router.pathname: "/farm/[farm_id]") is this but in app router using pathname only returns this one /farm/66016e78bc87d1994aebe41b then is there any option to get '/farm/[farm_id]' like this, i have much dependency with it. Useful soluation can help me
@hamedbahram hey man please answer this
olá, como fazer o reload do apartir de um evento de click por exemplo?
I wish I knew and could respond in Portuguese! Can you expand on what you mean by reloading from a click event?
in a scenario where we use "Parallel" the user will click on a button that updates the data only from that "Parallel", how to reload the data only from Parallel with the button?@@hamedbahram
Hamed, could we say that Parallel Route do the equivalent of a useCallback hook?
I'm not sure if I understand the question as I don't see the similarities between parallel routes and the `useCallback` hook! Can you expand on this...
My bad, I thought the goal of parallel route was to avoid rendering all the page when only a part on the content(state) is changed for performance reason. But after watching your video once again, It becomes obvious that the usage of this concept is different from useCallback which is use especially for performance reason...Thank you for all your contents in NextJs dude, you help improving my skills....@@hamedbahram
@@m__link6499 my pleasure!
instead on default team ,I want to show the the team on refresh . how I can achieve this ?
Write a common component and export it from both `page.tsx` and `default.tsx`
Thanks
why the home also need default? its not a slot but a page right?
The default on the home renders when hard navigating to the `/settings` without that it'll 404.
Dear Mr Hamed, how i can redirects external url path in next js, please create new video for this🥹
Do you mean redirecting to an external URL?
yes sir@@hamedbahram
Sir Kindly create separate Nextjs Tutorials folder .. Further please make projects nextjs using typescript fullstack .. otherwise you are very good Teacher .. God bless you ❤❤
Thanks for the suggestions.
Why nobody is saying about bugs? router.refresh() causes full page freeze; you don't have a chance to choose "normal" route over intercepting/parallel route; you can't use route groups with parallel routes; server action with redirect() or revalidatePath() are not compatible with parallel routes in many cases and so on.
Thanks for sharing your feedback.
@@hamedbahram Sorry for negativity
It's alright 🙌🏼
What would happen if i have /settings segment/folder on app folder? Where would all these navigate?
If you want to have a dedicated `/settings` page you won't need parallel routes. Parallel routes are for rendering multiple pages simultaneously in the same layout. So I'm not sure why you would create a `/settings` folder in the `app` folder with the same parallel route. This'll probably mess up the soft navigation but you'll see the content of the `/settings` page and the default team and the `settings` parallel route on hard navigation.
My website is ecommerce. Can I deploy my Next.js App on AWS S3, Just .next folder? Is it possible?
S3 is an storage bucket. If you want to deploy your site statically you have to host it on a CDN. Now whether or not your NextJs website can be deployed statically depends on whether or not you're using any dynamic feature that requires a server.
What is the benefit of using this, instead of just having one page that conditionally renders components (such as the team/analytics)? Is it just so that you can use the loading.tsx/error.tsx/not-found.tsx page convention, so your code is more organised? The other example of using a modal could also be achieved easily using a different pattern, such as state for the modal's open/closed state. So I don't really see what problem this feature of Next.js is solving, and why it'd be any better than other approaches.
That's right, other than the different router behaviour for soft vs hard navigation, a lot of it is achievable with components. But generally speaking a lot of what a framework offers is so we don't have to write custom code every time.
why need this if wee have choice to make it a component
Some of the functionality is replicable with server components, it just needs more manual code to replicate this (e.g. suspense and error boundaries). Also parallel routes behave differently when soft navigating vs hard navigation (i.e. preserves the context when soft navigating). You can watch this video to see a more complex use case → kzhead.info/sun/ha-sqreqq4mnnXk/bejne.html
Give me a complete next.js development roadmap ❤
Great suggestion! I'll do a video on it.
@@hamedbahram plz do fast. 2024 is coming ❤️
@@thisishabib744 Ok, will do. Like your passion.
ikr, nextjs become Remix?
They have common patterns and/or similarities for sure :)
I don't get it, how is this even useful?
Decreased network waterfalls and make it easier to show static data and dynamic data on the same view
Great points Austin, thanks!
I have seen someone portfolio he used that for showing project I don't how to explain how good it was if I get a link I will add this in my comment.
@@prashlovessamosa Nice!
@@austincodes why does it make it easier to show static data and dynamic data on the same view?
Hey, I think your audio is desynced with your video. Watch your mouth in the video relative to the audio, it doesn't match properly.
Thanks for the feedback. I'll test it out.