Parallel Routes in NextJs 14

[@lagekutsa]

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 ❤

[@hamedbahram]

I'm glad to hear that. Thanks.

[@Sorkstryparen]

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!

[@hamedbahram]

Thanks! I appreciate that. Glad you find the videos helpful.

[@shohelrana-dev]

Your learning approach is really good. Got a clear concept about parallel routing. Thank you.

[@hamedbahram]

Glad it was helpful!

[@jk4508]

very well explained especially the soft navigation, I was struggling with that

[@hamedbahram]

Glad it was helpful!

[@kylianmbappe9344]

Very well explained. Thank You, Hamed!

[@hamedbahram]

My pleasure. Glad it was helpful!

[@saeedakhshijan8159]

it was quite new content about parallel routing which i never seen before. thanks to simplify and share it.

[@hamedbahram]

My pleasure. Glad you found it helpful.

[@John-eq5cd]

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.

[@hamedbahram]

Thanks for the feedback! I'll have that in mind.

[@BruceWayne-kw6xm]

Man You explained it beautifully.. i will remember this for ever... thanks a lot .. please cover data fetching in next js next

[@hamedbahram]

I'm glad to hear that! Thanks.

[@dawid_dahl]

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. 🙏🏻

[@hamedbahram]

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.

[@dawid_dahl]

@@hamedbahram Is there any of that which can’t be achieved with regular server and client components?

[@hamedbahram]

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

[@dawid_dahl]

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

[@mertdr]

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

[@ahmadmuqadas78]

this was a great video and great explanation many thanks!

[@hamedbahram]

Glad to hear that!

[@tonysmith-g5t]

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?

[@hamedbahram]

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. → kzbin.info/www/bejne/iHzWq4aoqbykoKM

[@JosepBernad]

Thanks for the clear information!

[@hamedbahram]

My pleasure!

[@jorgericaldi6438]

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.

[@hamedbahram]

Parallel routes allow you to render multiple pages simultaneously.

[@SajidMunawar-u3w]

sir thank you so much for this video. this was the confusing topic.

[@hamedbahram]

Glad to hear it was helpful.

[@JoelMiller-m6e]

I like this video. thank you so much!

[@hamedbahram]

Glad you liked it!

[@nisabmohd]

Please do a video on intercepting routes.

[@hamedbahram]

Coming up next :)

[@prashlovessamosa]

Now you are a mind reader too Thanks 👍.

[@hamedbahram]

😅 There you have it.

[@abdulmoiz1768]

Brilliant 🎉🎉🎉

[@hamedbahram]

Thanks!

[@m__link6499]

Hi Hamed, What if we want to use parallel routes in another folder such as "component" folder, and not directly in the App folder? Because, it can happens that we use the dashborad after a user get logged in? How can we handle that? Thank you sir.

[@hamedbahram]

parallel routes is a feature of the App router, you can't use it outside the App folder.

[@M7ilan]

Is it possible to make a dynamic parallel route?

[@hamedbahram]

You can have parallel pages inside of a dynamic route.

[@isaevallahverdi]

Thanks your a practical content

[@hamedbahram]

Glad it was helpful!

[@Saleh_Balakisiyev]

I don't get it, how is this even useful?

[@austincodes]

Decreased network waterfalls and make it easier to show static data and dynamic data on the same view

[@hamedbahram]

Great points Austin, thanks!

[@prashlovessamosa]

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.

[@hamedbahram]

@@prashlovessamosa Nice!

[@Daniel-i8v2i]

@@austincodes why does it make it easier to show static data and dynamic data on the same view?

[@usamecoban2582]

Luckily, I watched your video and now I know the reason why it didn't work when I tried it before.

[@hamedbahram]

Absolutely! Thanks for tuning in.

[@mikeskott1645]

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?

[@hamedbahram]

Good question, yes that would accomplish the same behaviour if the default is the same as the original page.

[@niinoocode]

olá, como fazer o reload do apartir de um evento de click por exemplo?

[@hamedbahram]

I wish I knew and could respond in Portuguese! Can you expand on what you mean by reloading from a click event?

[@niinoocode]

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

[@johnwilson4227]

A great lesson with a beautiful theme. Would you mind telling me the name of this VSC theme? Thank you in advance.

[@hamedbahram]

Thanks! The theme is called "Dark+ with Italics"

[@Ashishhh0]

in NextJs 14.1 the local 404 problem is fixed now!

[@hamedbahram]

Fantastic 🎉

[@stacked-dev]

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

[@hamedbahram]

You can use the `headers` and `cookies` function from `next/headers` to forward the headers to your nest backend.

[@akshat_gandhi_dizaynio]

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.

[@hamedbahram]

Glad to hear that. I'm not sure if I understand your question correctly, but you can export the same component from the defaults.

[@codewithbugs]

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?

[@hamedbahram]

Try adding a template to your parallel slots.

[@codewithbugs]

I will give it shot today. Thank you! @@hamedbahram

[@uzairahmed2975]

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?

[@hamedbahram]

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

[@uzairahmed2975]

@@hamedbahram thankyou so much

[@en_kratia]

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.

[@hamedbahram]

Thanks for sharing your feedback.

[@en_kratia]

@@hamedbahram Sorry for negativity

[@hamedbahram]

It's alright 🙌🏼

[@sarma_sarma]

Parrel route is a cool thing but where I use this .that I have confused. can you give some production test case for this ?

[@hamedbahram]

I'm going build on more complex use cases in future videos. Stay tuned

[@jovanjevtic1620]

I'm not really understanding a need of default pages. Is it maybe preventing security issues?

[@hamedbahram]

The default is the UI for reloads and hard navigations to the segment.

[@heysahilsingh]

Also make a video on intercepting routes ☺

[@hamedbahram]

Coming up next :)

[@manojpudasaini1565]

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.

[@hamedbahram]

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.

[@mdazimbabu5001]

instead on default team ,I want to show the the team on refresh . how I can achieve this ?

[@hamedbahram]

Write a common component and export it from both `page.tsx` and `default.tsx`

[@mdazimbabu5001]

Thanks

[@m__link6499]

Hamed, could we say that Parallel Route do the equivalent of a useCallback hook?

[@hamedbahram]

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

[@m__link6499]

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

[@hamedbahram]

@@m__link6499 my pleasure!

[@fync7514]

Dear Mr Hamed, how i can redirects external url path in next js, please create new video for this🥹

[@hamedbahram]

Do you mean redirecting to an external URL?

[@fync7514]

yes sir@@hamedbahram

[@kale_bhai]

What would happen if i have /settings segment/folder on app folder? Where would all these navigate?

[@hamedbahram]

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.

[@eugenepranoto3824]

why the home also need default? its not a slot but a page right?

[@hamedbahram]

The default on the home renders when hard navigating to the `/settings` without that it'll 404.

[@codechange75]

Sir,please you can make a video on admin or normal user routes protection with node js because its confusing compare to react routes

[@codechange75]

I want it in next js frontend and node backed

[@ehrro]

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

[@hamedbahram]

Sure, I'll have that in mind for future videos.

[@hamedbahram]

Thanks for contributing to the question Dejan!

[@aculz]

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

[@com_media]

Nice

[@hamedbahram]

Thanks!

[@saichandrajagu6141]

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.

[@saichandrajagu6141]

@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

[@hamedbahram]

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.

[@saichandrajagu6141]

@@hamedbahram that can help thank you Hamed

[@saichandrajagu6141]

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

[@saichandrajagu6141]

​ @hamedbahram hey man please answer this

[@Kmkn308]

Sir Kindly create separate Nextjs Tutorials folder .. Further please make projects nextjs using typescript fullstack .. otherwise you are very good Teacher .. God bless you ❤❤

[@hamedbahram]

Thanks for the suggestions.

[@Daniel-i8v2i]

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.

[@hamedbahram]

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.

[@hafeezullah9706]

My website is ecommerce. Can I deploy my Next.js App on AWS S3, Just .next folder? Is it possible?

[@hamedbahram]

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.

[@EquinoxAscent]

why need this if wee have choice to make it a component

[@hamedbahram]

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 → kzbin.info/www/bejne/iHzWq4aoqbykoKM

[@aculz]

ikr, nextjs become Remix?

[@hamedbahram]

They have common patterns and/or similarities for sure :)

[@thisishabib744]

Give me a complete next.js development roadmap ❤

[@hamedbahram]

Great suggestion! I'll do a video on it.

[@thisishabib744]

@@hamedbahram plz do fast. 2024 is coming ❤️

[@hamedbahram]

@@thisishabib744 Ok, will do. Like your passion.

[@proevilz]

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.

[@hamedbahram]

Thanks for the feedback. I'll test it out.