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

[@tapasadhikary]

❇ READ THIS BEFORE/AFTER COMPLETING THIS VIDEO ❇ In the 100+ comments below, there are some common questions. I thought of answering them ahead and pinned it here so that, you do not have to ask the same again(in case) 😊 - As Next.js is been evolving, it has some breaking changes version over version. This video was made with the version 14.1.4, where having the HTML and body tag in one of the root layouts was enough. But with the latest upgrade(tested with v14.2.17), it is mandatory to add the to all root layouts. Else, you will get the "Missing Root Layout tags" error. In future upgrade, there might be something else! We will see that then and update again. For now, the changes have been incorporated into the GitHub Repo that I used in this video: github.com/tapascript/nextjs-multiple-root-layout. Cheers! - Multiple root layout will cause the full page load as opposed to a client-side navigation. This is the expected behaviour and mentioned in the Next.js official doc as well: "Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts." That's all for now. As a teacher, It's my responsibility to provide you all required information and add value to your journey. Keep learning. ❤

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

[@tapasadhikary]

Thanks! I'm so glad that it helped you ❤️

[@joshuaoluwapamilerinonifad2204]

funny how it's dashboard that brought me here too😅

[@thebenkalungi]

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

[@tapasadhikary]

Thank you ❤️

[@klebergermano3356]

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

[@tapasadhikary]

Thanks a lot.

[@jahangirkhan3747]

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

[@tapasadhikary]

Thanks a lot, keep learning 👍

[@snow-script]

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

[@metadope9407]

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

[@tapasadhikary]

Thanks a lot.

[@mateomohr3415]

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

[@tapasadhikary]

You are most welcome.. I am so glad that my video helped you... super happy ❤

[@prateekshawebdesign8377]

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

[@tapasadhikary]

@@prateekshawebdesign8377 So glad to hear that ✨🔥

[@sovanchheang170]

Amazingly clear, easy to learn and follow you, Sir. I really appreciate for your great teaching.

[@tapasadhikary]

@@sovanchheang170 great 👍 thanks

[@ZeynalZeynalli-yo2nl]

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

[@tapasadhikary]

Thank you!

[@AlexanderWilson-ht5dt]

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!

[@tapasadhikary]

@@AlexanderWilson-ht5dt most welcome ✨

[@wasiuddinmansoori3385]

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

[@tapasadhikary]

❤️❤️❤️

[@froilanimnida]

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

[@tapasadhikary]

Awesome 👍

[@AngelaCui-fn2tn]

Thank you so much for sharing your knowledge!

[@tapasadhikary]

@@AngelaCui-fn2tn welcome

[@DCBlogdev]

Thank you, exactly what I needed.

[@tapasadhikary]

@@DCBlogdev cool

[@Learexx]

I really needed this, thank you sir

[@tapasadhikary]

@@Learexx great, thanks!

[@hanyehyaghoubi8749]

Thank you very much. You saved me from a big challenge

[@tapasadhikary]

@@hanyehyaghoubi8749 awesome awesome 🙌 thanks ❤️❤️❤️

[@shraj340]

The exact thing I wanted

[@abdulsalamasheem2001]

Thanks for the explanation, it's apt!

[@tapasadhikary]

Thanks a lot.

[@ravitokas84]

Thanks tapas for sharing this video.

[@tapasadhikary]

You are most welcome

[@Matunga]

Awesome explanation! Thanks a lot

[@tapasadhikary]

🙏🙏🙏❤️

[@emmanuelsalami3257]

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

[@tapasadhikary]

Thanks, man. It means a lot ❤️

[@taldr27]

Thank you man!

[@tapasadhikary]

Welcome 😊

[@DavidCarr-r6s]

thank you, explained very well ;)

[@tapasadhikary]

Glad you liked it!

[@ederross]

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

[@tapasadhikary]

Wow… thanks a lot ❤️. Don't forget to subscribe 😉, much more coming!

[@Elvis-is-king-l3s]

Amazing! Thank you!

[@tapasadhikary]

@@Elvis-is-king-l3s Cool, thanks ❤️

[@treasurechest2242]

Thank you. I had an issue with the parent layout still being applied in the child layout.

[@MailsonVarela-on7we]

saved my day! thanks for the explaination

[@tapasadhikary]

Thanks mate, for letting me know. You are most welcome.

[@ghimirerahul39]

thanks bro for this awesome video and awesome explaination

[@tapasadhikary]

@@ghimirerahul39 Thanks a lot 👍

[@magehdinc]

Brilliant Tutorial!

[@tapasadhikary]

Thanks a lot ❤️

[@jspies2020]

you're the man!!

[@tapasadhikary]

Thank you!

[@Crazysocity]

Think i have a web page there are home,about,program,contact and first 3 page had header and footer but on contact page i don't want header footer.In this case should i carete layout for all, Or just create a layout for contact page?Hope your kindly reply.😊😊😊😊

[@kaioneal6160]

Finally Thank you 🙏

[@tapasadhikary]

Most welcome

[@java427]

Awesome video! Thanks

[@tapasadhikary]

Glad you liked it!

[@boot-comp]

perfect explanation thaanks

[@tapasadhikary]

cool

[@md.mojnumiah]

thanks for sharing, vai.

[@tapasadhikary]

Welcome ❤️

[@guvenfazli]

Thank you sir.

[@javascriptprograming9828]

what about dashboard layout, if i do not want to need root layout header and footer in dashboard layout. that time how to handle this bro?

[@ilyahuman7565]

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

[@tapasadhikary]

Me neither. Your web document needs the root HTML to render and to do many other things including the locale support.. So there must be at least one root layout where the HTML tag should be there.. Not sure about the chatGPT suggestion, though...

[@Daniel-Y72]

Do I have to add html & body tag to other layouts as well? Because if I don't, it gives the `Missing Root Layout Tags` error.

[@tapasadhikary]

@@Daniel-Y72 no not needed..for that error seem to be the issue with the layout hierarchy

[@wforbes87]

today's nextjs version '14.2.13' gives this error modal pop-up. while the version that this video was created with (14.1.2) does not. clone his repo and see the difference

[@langchats]

There have another issue, after using route group, when we are trying to navigate then the page is re-loading like a normal html and then loading another page. but we expect navigation behavior without any refresh. can you please tell me how we can fix it?

[@tapasadhikary]

This is how Next.js works! We can not do much about it. The below text is from their documentation: "Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts.". I hope it makes sense now. Thanks for watching my videos and learning from tapaScript. Cheers!

[@joaoarthurbandeira]

Great video! Question: could i leave a layout.tsx file in the root level only wrapping the children with html, body and say GoogleTagManager tags while also having, at the same time, layout.tsx files for each route grouping, so i dont have to put these tags on each of them? In this case, would this root level layout.tsx file wrap all of the other layouts with these tags and work? Thanks!

[@joaoarthurbandeira]

I tested here and it still worked and also it also stopped the whole page from getting reloaded when navigating between these route groups, i guess because now they share the same html tag. Does this make sense or am i missing something and should not do this?

[@tapasadhikary]

Yes it will work… do not repeat the html and body in child layouts.

[@joaoarthurbandeira]

@@tapasadhikary Thanks! Is this approach better since it has the same benefits but it doesnt force reload when navigating between these route groups or does it have any cons?

[@tapasadhikary]

@joaoarthurbandeira yep great approach

[@aburaihan-py4vi]

Excellent!!!!!!

[@tapasadhikary]

Thank you ❤️

[@nahid_ulkabir8240]

I canot use any react hook like useState inside /marketing page . not event a console is working on that page . please help me , I want a client component on that page

[@tapasadhikary]

It is because the marketing page is a server component and you can not use the client side things like React Hooks in the server component. The design pattern you must follow is, take out the client interaction part separately in a separate client component where you can use all the hooks and make sure to use the "use directive" for client component. After that import the client component to the marketing page server component... It is important to understand how you should compose your server and client components for a better results including the SEO of the app. I hope it helps.

[@nahid_ulkabir8240]

@@tapasadhikary thank you very much

[@DuK-2102]

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.

[@tapasadhikary]

Thank you! Let me cover not found and error in a video

[@codeWithSleek]

Thank you!

[@VivekSpecscart]

Hi sir, i have get error when I create (home) folder and move "app/layout.tsx" and ''app/page.tsx' files in the folder, can you please check? How can I connect with you? please help 🙏

[@imdefnotash]

UFF thank god you helped me!

[@tapasadhikary]

Glad I could help!

[@naufui]

Thank you so much!

[@aroshasandaruwan3667]

clearly explained.

[@tapasadhikary]

Thanks

[@saimundev]

when I declare a route link with href the page is reloaded.. how to solve this??

[@tapasadhikary]

What’s the href value?

[@itsearcast]

@@tapasadhikary lets take an example---"(home) (dashboard) when I am navigating from dashboard to home using the navigation is working correctly but it is causing the page reload

[@nelsonkc4703]

but in local it is shwoing gittering issue when i switch between layout thought somehow that layout shares most of same content .but this issue is not in live

[@tapasadhikary]

That’s weird.

[@MrTingle-qi2ne]

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

[@SyedSINA]

Thanks for the solution, There is still one little problem that the whole page gets reloaded when navigating between these route groups. For example, when a user navigates between HomeLayout routes and MarketingLayout routes whole page gets reloaded. How can I stop reloading whole page and only redirect on client side?

[@tapasadhikary]

Where do you see the reload? In the example project I shared with the video? Or in your project?

[@SyedSINA]

@@tapasadhikary In my project, I have two route groups that has separate layouts. When I navigating between routes of these two layouts the full page reload happens. This is mentioned in the Next.js docs too. But I didn't find an elegant solution to do it without full page reload

[@tapasadhikary]

@@SyedSINA got it. Yes, this happens. Do you have a main root layout apart from these parallel route layouts?

[@SyedSINA]

​@@tapasadhikary No, there is no main root layout in the root folder. I followed the structure exactly like in the video. In my project, it looks like this: (booking) -> booking -> [layout.tsx, page.tsx] (default) -> [layout.tsx, page.tsx] When navigating from '/' to '/booking', a full reload happens. I am aware that the Next.js documentation mentions this issue, but it would be better to have something like the getLayout method from Next.js 12 in this version as well.

[@mostafizurrahman4340]

​@@SyedSINABro did you manage to solve this problem.

[@mdsumonh.shohan9159]

tapash vai in my code on marketing route does not run without html and body tags in marketing RootLayout.

[@tapasadhikary]

I shall test it with the latest version and let you know,

[@YashKadam-k5q]

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.

[@tapasadhikary]

Try removing the .next folder and restart the local server.

[@sarangsami6597]

you saved my life

[@tapasadhikary]

Glad I could help ❤️

[@MichaelMonteroJimenez]

Amazing!

[@tapasadhikary]

@@MichaelMonteroJimenez thanks a lot

[@najmulislam344]

very very helpful

[@tapasadhikary]

Thank you ❤️

[@muhammadinaammunir6761]

Good content

[@tapasadhikary]

@@muhammadinaammunir6761 thanks a lot ❤️

[@dhananjaygupta8554]

Thanks ❤

[@tapasadhikary]

Welcome ❤️

[@thinkwithroyofficial]

use this method why global.css not applicable for child component pages ?

[@tapasadhikary]

We can do that too

[@davittchike]

im stuck both of the layouts get rendered pls help

[@tapasadhikary]

Chekout the code repo gave in the description and refer plz.

[@dongripavankumar9342]

good explanation

[@tapasadhikary]

Awesome, glad you liked it 👍

[@ItsKrishnaPanthi]

Need to add html and body tag to the marketing route layout as well, other wise browser error pops up saying tags missing in the Root Layout.

[@tapasadhikary]

Do you get it as an Hydration error?

[@ItsKrishnaPanthi]

@@tapasadhikary It's not an hydration error. Nextjs docs says html and body tags need to be added to each root layout. Maybe some kind of latest requirement.

[@tapasadhikary]

@@ItsKrishnaPanthi Got it, thanks!

[@samshan813]

Thanks for the video ,, but there is error comes on jsconfig.json, could you please advise

[@tapasadhikary]

What error? Also have you restarted VS code and saw if the error still there?

[@AlexRankin-gi1tl]

Life saver!

[@tapasadhikary]

So glad, Alex that it helped you! Thanks.

[@iqbalrahmatullah7088]

Thanks sir your video give me solution

[@tapasadhikary]

@@iqbalrahmatullah7088 super

[@ericsiddiq7634]

nice tricks!

[@tapasadhikary]

Thank you 🙏

[@JunedAhmad313]

thanks sir for this video

[@tapasadhikary]

Welcome

[@clearface123]

does this mean we have to duplicate the providers across every layout

[@tapasadhikary]

Nope, you can providers common and reuse across the layouts.

[@Anguraj92]

Nice sir

[@tapasadhikary]

Thanks, brother.

[@smselva9324]

How to handle redux setup with multiple layouts Sir

[@tapasadhikary]

You should do it at the client side.

[@zaheerabbas8344]

v nice

[@MiteshBhagwant]

thanks sir

[@tapasadhikary]

Great. Let me know if you have any question.

[@DeveloperJunaid]

Zabardast

[@tapasadhikary]

Thanks vai, appreciate it.

[@EverydayBeing-de1qu]

Thank you

[@tapasadhikary]

Most welcome 🔥

[@ChickenChaap]

love it

[@tapasadhikary]

So glad

[@pspremshakti1083]

But in this technique the page is reloading

[@tapasadhikary]

This is how Next.js works! We can not do much about it. The below text is from their documentation: "Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts.". I hope it makes sense now. Thanks for watching my videos and learning from tapaScript. Cheers!

[@omarrayes2281]

is this the only solution ? for doing that ? please if there something else give a link to read . And Thanx

[@tapasadhikary]

This is what I found as one solution… the other solution is to get the pathname from route and based on path name you show hide things. For that you have to make the components client components forcefully.

[@HasanAhmedNews]

thankyou Tapas Vai

[@tapasadhikary]

Welcome

[@rustan-e3]

But the app root need to have a layout?

[@tapasadhikary]

Nope.

[@deepakbind6774]

and what about not-found page

[@tapasadhikary]

It is simple. Include a not-found.tsx or not-found.jsx file along with the layoout.jsx or layout.tsx file for each layouts. Whenever a notFound() exception is throws from the route the respective not-found page would be taking care of it.

[@joaopaulosantana815]

🚀🚀🚀🚀

[@tapasadhikary]

😍😍

[@darkx6916]

Legend Tapas 🗿

[@tapasadhikary]

🙏 🙏

[@hiteshemsammz941]

Thanks

[@tapasadhikary]

@@hiteshemsammz941 ❤️❤️

[@yasineNextjs]

tnx

[@tapasadhikary]

Glad you liked it!

[@MohsanRaza-hr1gi]

thanks

[@arifulhaque3236]

❤❤

[@tapasadhikary]

❤️❤️

[@evgeny9945]

best

[@tapasadhikary]

@@evgeny9945 thanks!

[@igorr4682]

and you forgot to mention that if you do this, this will do full pager render if you go from one layout to the other

[@tapasadhikary]

Yep that happens, true. Mentioned in doc too… good point.

[@abujayed-dot-com]

Sir, You have no idea what level of video is it. sub.

[@tapasadhikary]

Glad you liked it… keep learning 🫶

[@Abhishekbhat-p6d]

Solved many problems especially in authenticated and not authenticated route

[@tapasadhikary]

Great, glad to know ❤️

[@იოსებივარდოშვილი]

gg

[@fadhil4008]

Yeah this is why I think nextjs sucks, trying to make things easy by making providing miltiple layout feature but ended up giving so muh headaches to developers

[@tapasadhikary]

Yeah but its kind of one time… once you fix it in the beginning..,should be set

[@SabarangChakma]

বাংলায় কোর্স চাই.... ইংরেজি সবার বোধগম্য নয়

[@tapasadhikary]

কি বলি বলুন তো ভাই। আমি আপনার সাথে already সহমত। tapaScript বাংলা চ্যানেলের promotion ও শুরু হয়ে গেছে, আর সেটা এসেও যাবে আর ১-২ সপ্তাহে। কিন্তু তবুও আমি আনুরধ করবো ইংরেজি ভিডিও দেখে আসতে আসতে শেখার। দুটোই চলুক। আপনি বাংলাতে শিখবেন, ইংরাজিতেও শিখবেন। অসুবিধা হলে জিজ্ঞাসা করে নেবেন... হেল্প করবো। আশা করি আপনি আমার দুটো চ্যানেলকেই সাপোর্ট করবেন। 😀😍

[@X279S]

Thank you !

[@tapasadhikary]

You are most welcome, thanks for watching ❤️

[@PeriklesPeriklesoglu]

thank you

[@tapasadhikary]

Welcome ❤️

[@PeriklesPeriklesoglu]

thank you

[@tapasadhikary]

welcome :)