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

Рет қаралды 5,707

Күн бұрын

Often we want to hide the header and footer on every other page apart from the home page in a Next.js app. How do you achieve it? Yes, using multiple root layouts.
Hey, welcome back to another informative video from the "Full Stack With Next.js App Router" series. I hope you enjoy this one the same way you liked the previous videos from the series.
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:
- github.com/tapascript/nextjs-...
Join tapaScript Discord
- / discord
🤝 My Links:
- Blog: blog.greenroots.info/
- Follow on X(Twitter): / tapasadhikary
- Connect on LinkedIn: / tapasadhikary
- Follow My Work on GitHub: github.com/atapas
- Follow on Facebook: / tapasadhi
Special Links:
- Are you looking for the best NextJS templates to start your project development? Download and use them for FREE: www.wrappixel.com/templates/c...
- If you are looking for the best content management system, here is something for FREE that you can rely on: app.caisy.io/app/signup/mwiyy...
👋 Like my work? Thank You. You can sponsor me from here:
- Sponsor Me: github.com/sponsors/atapas
- Sponsor my Blog: blog.greenroots.info/sponsor
About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, KZfaqr, 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.
You can find more about him at tapasadhikary.com.
#nextjstutorial
#next
#nextjs14
#nextjs

Пікірлер: 84

@kenkioqqo 2 ай бұрын

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 2 ай бұрын

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

@joshuaoluwapamilerinonifad2204 Ай бұрын

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

@thebenkalungi 4 күн бұрын

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

@tapasadhikary 4 күн бұрын

Thank you ❤️

@31ashaswatraj44 Ай бұрын

The exact thing I wanted

@wasiuddinmansoori3385 7 күн бұрын

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

@tapasadhikary 6 күн бұрын

❤️❤️❤️

@snow-script 3 ай бұрын

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

@jahangirkhan3747 3 ай бұрын

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

@tapasadhikary 3 ай бұрын

Thanks a lot, keep learning 👍

@MailsonVarela-on7we Ай бұрын

saved my day! thanks for the explaination

@tapasadhikary Ай бұрын

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

@Matunga Ай бұрын

Awesome explanation! Thanks a lot

@tapasadhikary Ай бұрын

🙏🙏🙏❤️

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

@java427 2 ай бұрын

Awesome video! Thanks

@tapasadhikary Ай бұрын

Glad you liked it!

@kaioneal6160 Ай бұрын

Finally Thank you 🙏

@tapasadhikary Ай бұрын

Most welcome

@aburaihan-py4vi 3 ай бұрын

Excellent!!!!!!

@tapasadhikary 3 ай бұрын

Thank you ❤️

@md.mojnumiah 3 ай бұрын

thanks for sharing, vai.

@tapasadhikary 3 ай бұрын

Welcome ❤️

@emmanuelsalami3257 Ай бұрын

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

@tapasadhikary Ай бұрын

Thanks, man. It means a lot ❤️

@sarangsami6597 2 ай бұрын

you saved my life

@tapasadhikary 2 ай бұрын

Glad I could help ❤️

@AlexRankin-gi1tl 2 ай бұрын

Life saver!

@tapasadhikary 2 ай бұрын

So glad, Alex that it helped you! Thanks.

@najmulislam344 Ай бұрын

very very helpful

@tapasadhikary Ай бұрын

Thank you ❤️

@EverydayBeing-de1qu Ай бұрын

Thank you

@tapasadhikary Ай бұрын

Most welcome 🔥

@ChickenChaap 15 күн бұрын

love it

@tapasadhikary 15 күн бұрын

So glad

@ericsiddiq7634 3 ай бұрын

nice tricks!

@tapasadhikary 3 ай бұрын

Thank you 🙏

@Anguraj92 3 ай бұрын

Nice sir

@tapasadhikary 3 ай бұрын

Thanks, brother.

@user-ru4vk8wl4j 2 ай бұрын

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 2 ай бұрын

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

@igorr4682 4 күн бұрын

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 4 күн бұрын

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

@DeveloperJunaid 2 ай бұрын

Zabardast

@tapasadhikary Ай бұрын

Thanks vai, appreciate it.

@darkx6916 Ай бұрын

Legend Tapas 🗿

@tapasadhikary Ай бұрын

🙏 🙏

@joaopaulosantana815 3 ай бұрын

🚀🚀🚀🚀

@tapasadhikary 3 ай бұрын

😍😍

@arifulhaque3236 3 ай бұрын

❤❤

@tapasadhikary 3 ай бұрын

❤️❤️

@ilyahuman7565 2 ай бұрын

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 2 ай бұрын

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

@SyedSINA 22 күн бұрын

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 22 күн бұрын

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

@SyedSINA 22 күн бұрын

@@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 21 күн бұрын

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

@SyedSINA 21 күн бұрын

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

@user-dg7xg9ru5e 2 ай бұрын

@pspremshakti1083 8 күн бұрын

But in this technique the page is reloading

@user-oc3ii4un1s 2 ай бұрын

Solved many problems especially in authenticated and not authenticated route

@tapasadhikary 2 ай бұрын

Great, glad to know ❤️

@ItsKrishnaPanthi 18 күн бұрын

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 18 күн бұрын

Do you get it as an Hydration error?

@ItsKrishnaPanthi 18 күн бұрын

@@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 18 күн бұрын

@@ItsKrishnaPanthi Got it, thanks!

@VivekSpecscart 2 ай бұрын

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 🙏

@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

@bhuwangurung9605 3 ай бұрын

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

@tapasadhikary 3 ай бұрын

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

@samshan813 26 күн бұрын

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

@tapasadhikary 26 күн бұрын

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

@saimundev Ай бұрын

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

@tapasadhikary Ай бұрын

What’s the href value?

@omarrayes2281 2 ай бұрын

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

@tapasadhikary 2 ай бұрын

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.

@abujayed8999 2 ай бұрын

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

@tapasadhikary 2 ай бұрын

Glad you liked it… keep learning 🫶

@SabarangChakma 3 ай бұрын

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

@tapasadhikary 3 ай бұрын

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