Nested Layouts in NextJs 13 Using Route Groups

In this video, we'll look at Route Groups in NextJs 13's App router and how you can organize your routes and create nested layouts without affecting the URL segments.

👉🏼 The Ultimate NextJs Course

Chapters
0:00 Intro
1:40 Creating a route group
3:45 Creating nested layouts
6:00 Code example
13:10 Outro

[SajidAliSoftwareEngineer]

Thank you so much. Your content is always very entertaining and helpful.

[sergey_c]

Thank you for your explanation! Your example is clear and easy to understand.

[themodernmonk]

That's what I was looking. Thanks Hamed. Easy explanation.

[ashishmaharia]

Loved ur videos brother, so easy to understand.

[alexeysmirnov]

One more time you've helped me, Hamed. Thanks, bro!

[sanazniamati]

Thank you Hamed, very helpful information

[silicongen]

Great video! You just made this mess a lot more structured.

[segu_.]

having the layout.tsx right in the app folder was screwing everything up in my project. now i understood it needs to be in a group layout! just putting it in a (root) group layout did it for me.
thanks a lot

[erasmusmensah]

thanks your for this simple explanation

[kianooshsoleimani]

hey hamed, thank you for your explanation, would you please tell how to ignore main layout for some pages?

[vijaykumarparelli]

Thank you for nice explanation, i am trying to handle to hide navbar in rootLayOut and i am getting hydration error, is there any luck to pass props to layout from page

[nbo]

Have you experienced fonts not loading correctly when you navigate from one layout to another? i have a hero with a next google font and it loads fine initially, but then when i go from another layout back to home page with the hero section, the font fails to load. Any ideas?

[kukiponosanhrvat]

Excellent video!
I'm doing something similar in my project. I have two root layouts (auth) and (root). In (auth) route group I've got @authModals sloth and in it (.)log-in and (.)sign-up segments. Also in (auth) I've got segments log-in and sign-up.
(root) route group is just the rest of the code, which is not really important.
Problem is when i have parallel and intercepting routes in route group which is also a root layout (one of more), things break and start working unpredictably.
When i had only one root layout intercepting and parallel routes worked as expected.
Got any experience with this or idea why this happens?

[ggwspin]

how to get the data from rest api for a nested layout. For example, the nav menu, if they are coming from backend, how to handle that scenario?

[praneethkumar]

Bro, while accessing routes inside route group. I am getting 404 page. I am not sure, why it is behaving like that. I tried the exact same way, just by wrapping the folder around parenthesis and using layout.ts inside it.

[SajidAliSoftwareEngineer]

one question may I know which font you are using in VS Code?

[webdeveloper]

But how to opt specific segment from RootLayout, can you please explain it

[thenoorcrownofficial]

What happens when we put a route group in a normal route folder in a nested fashion?

[massoudsharifi]

nic, but how we can send props from different props from page to the layout file ?

[techs]

Hey bro, can I make Dashboard with this model?