Next.js App Router Multiple Root Layouts: Explained With Examples

Let's GO 🚀

I take special care to provide you the best quality. Please SUBSCRIBE to the channel to show your support. Also, could you like/comment on this video so that it reaches others? Thanks! 🫶

Timecodes
0:00 - Understand the problem, first
02:02 - The usual Layout and Pages
05:05 - First attempt to hide header and footer
07:59 - Exposing the wrong way
09:00 - The solution: Route Grouping
12:56 - Let's see things working!
13:06 - A quick recap
14:12 - The end note

## The Source Code Used In The video:

## Join tapaScript Discord

## 🤝 My Links:

## Special Links:

## 👋 Like my work? Thank You. You can sponsor me from here:

## About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, YouTuber, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.

#nextjstutorial
#next
#nextjs14
#nextjs

[kenkioqqo]

Absolutely awesome! You started by describing the exact mistake I was making while trying to create a different layout for my dashboard, and then you provided a wonderful solution that works like a charm. I can't thank you enough for this tutorial.

[klebergermano]

I was racking my brains over this, thanks a lot for the clear explanation, really helpful

[thebenkalungi]

Thanks for the clarity... Been facing this route problem since yesterday and almost gave up but your video has saved me.

[ZeynalZeynalli-yonl]

you are life saver sir. awesome video for those who dont want to read the docs.

[AlexanderWilson-htdt]

Great explanation on Next.js route grouping! Astro.js has a very similar approach, and it's really helpful to see how both frameworks handle this. This video was super helpful in deepening my understanding—thanks for sharing!

[AngelaCui-fntn]

Thank you so much for sharing your knowledge!

[prateekshawebdesign]

Great video! Your explanation of multiple layouts in Next.js was clear and practical. The examples were easy to follow and very helpful.

[metadope]

Thanks Tapas da...you always shows all the edge cases...you're an awesome teacher❤

[mateomohr]

FINALLY I FOUND THE VIDEO TO SOLVE MY PROBLEM, TY TAPAS. THE EXPLANATION COULDNT BE ANY BETTER

[snow-script]

Your every video is going outstanding many different things but I think just for a recap of the last moment. 💕💕

[jahangirkhan]

Ur way of explaining the concept is awesome sir ❤❤❤

[wasiuddinmansoori]

The way you explained is very insane and informative. Sooo much informative content. ♥

[froilanimnida]

straightforward video, does the thing i wanted to know. thanks!

[ederross]

AMAZING! PERFECT! THANKS A LOT FROM THE BOTTOM OF MY HEART!

[MailsonVarela-onwe]

saved my day!
thanks for the explaination

[emmanuelsalami]

you just got a new subscriber sir.. you are a genius

[ruvkwlj]

Hot reloading is only working for the (home) group and not for other groups. Additionally, I have react-hook-form implemented in other groups, and the same issue occurs: it's only working in the (home) group and not in other groups.

[ilyahuman]

Hi there! ChatGPT tells me that it is not required to put html and body tags into RootLayout, cause since Next.js13 it is automatically. But I cannot see this in next doc. Any ideas?)

[MrTingle-qine]

My trouble is not knowing how to achieve route grouping but with dynamic slugs ( [...slug] ), because obviously this confuses the system. I've tried everything but still can't figure out how to get the Root Layout to distinguish between header/noheader based on CMS data. I can do it by putting headers inside sub-layouts instead (as sub layouts can receive the slug array) but that unfortunately re-renders the header every time the route changes (problematic for preserving header state). I don't actually think there is a clean solution to this beyond designating a hardcoded no-header sub route. Anyway... easy enough for me to manually make per-project specific folders in src/app to manage this, but I was dreaming up a pure CMS driven solution :(.

[DuK-]

This solved my problem but there is 1 more issue occured. How do you make a not-found page for this multiple root layouts? Even if I put not-found.tsx file in both (auth) and (home) folder, when go to wrong url, the browser render not found page from default nextJS itself not from my not-found.tsx file.