Parallel Routes in NextJs 14 

I'm glad to hear that. Thanks.

My pleasure. Glad you found it helpful.

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

Glad it was helpful!

Glad it was helpful!

My pleasure. Glad it was helpful!

Glad to hear that!

My pleasure!

I'm glad to hear that! Thanks.

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. → ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RKszSrtWqjA.html

Glad you liked it!

Glad to hear it was helpful.

Glad it was helpful!

😅 There you have it.

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.

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

Parallel routes allow you to render multiple pages simultaneously.

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.

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

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

Coming up next :)

Thanks!

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

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

Export the same page components from the defaults.

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

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

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

You can have parallel pages inside of a dynamic route.

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!

Try adding a template to your parallel slots.

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

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

Coming up next :)

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

Absolutely! Thanks for tuning in.

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

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

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.

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

Thanks

@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

Do you mean redirecting to an external URL?

yes sir@@hamedbahram

Fantastic 🎉

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.

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.

Thanks for sharing your feedback.

@@hamedbahram Sorry for negativity

It's alright 🙌🏼

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 → ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RKszSrtWqjA.html

Thanks for the suggestions.

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?

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

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

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

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

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