Parallel Routes in NextJs 14

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

👉🏼 The Ultimate NextJs 14 Course

👉🏼 Project source code (Github)

👉🏼 Work with me

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

[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 ❤

[tonysmith-gt]

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?

[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!

[shohelrana-dev]

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

[John-eqcd]

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.

[jk]

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

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

[m__link]

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.

[kylianmbappe]

Very well explained. Thank You, Hamed!

[saeedakhshijan]

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

[mikeskott]

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?

[BruceWayne-kwxm]

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

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

[johnwilson]

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

[ahmadmuqadas]

this was a great video and great explanation many thanks!

[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

[Milan]

Is it possible to make a dynamic parallel route?

[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?

[m__link]

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

[jovanjevtic]

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