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.
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!
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!
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 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?
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 :(.
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.
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?
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?)
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...
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.
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
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 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 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.
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 🙏
@@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.
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
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.
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.
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
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.
@@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
কি বলি বলুন তো ভাই। আমি আপনার সাথে already সহমত। tapaScript বাংলা চ্যানেলের promotion ও শুরু হয়ে গেছে, আর সেটা এসেও যাবে আর ১-২ সপ্তাহে। কিন্তু তবুও আমি আনুরধ করবো ইংরেজি ভিডিও দেখে আসতে আসতে শেখার। দুটোই চলুক। আপনি বাংলাতে শিখবেন, ইংরাজিতেও শিখবেন। অসুবিধা হলে জিজ্ঞাসা করে নেবেন... হেল্প করবো। আশা করি আপনি আমার দুটো চ্যানেলকেই সাপোর্ট করবেন। 😀😍
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.
Thanks! I'm so glad that it helped you ❤️
funny how it's dashboard that brought me here too😅
I was racking my brains over this, thanks a lot for the clear explanation, really helpful
Thanks a lot.
Thanks for the clarity... Been facing this route problem since yesterday and almost gave up but your video has saved me.
Thank you ❤️
FINALLY I FOUND THE VIDEO TO SOLVE MY PROBLEM, TY TAPAS. THE EXPLANATION COULDNT BE ANY BETTER
You are most welcome.. I am so glad that my video helped you... super happy ❤
you are life saver sir. awesome video for those who dont want to read the docs.
Thank you!
Ur way of explaining the concept is awesome sir ❤❤❤
Thanks a lot, keep learning 👍
Your every video is going outstanding many different things but I think just for a recap of the last moment. 💕💕
Thanks Tapas da...you always shows all the edge cases...you're an awesome teacher❤
Thanks a lot.
Great video! Your explanation of multiple layouts in Next.js was clear and practical. The examples were easy to follow and very helpful.
@@prateekshawebdesign8377 So glad to hear that ✨🔥
Thank you sir.
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!
@@AlexanderWilson-ht5dt most welcome ✨
The way you explained is very insane and informative. Sooo much informative content. ♥
❤️❤️❤️
Thank you so much for sharing your knowledge!
@@AngelaCui-fn2tn welcome
straightforward video, does the thing i wanted to know. thanks!
Awesome 👍
The exact thing I wanted
Thanks tapas for sharing this video.
You are most welcome
I really needed this, thank you sir
@@Learexx great, thanks!
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!
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?
Yes it will work… do not repeat the html and body in child layouts.
@@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?
@joaoarthurbandeira yep great approach
Thank you, absolutely awesome!
Awesome explanation! Thanks a lot
🙏🙏🙏❤️
you just got a new subscriber sir.. you are a genius
Thanks, man. It means a lot ❤️
perfect explanation thaanks
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 :(.
AMAZING! PERFECT! THANKS A LOT FROM THE BOTTOM OF MY HEART!
Wow… thanks a lot ❤️. Don't forget to subscribe 😉, much more coming!
thanks for sharing, vai.
Welcome ❤️
saved my day!
thanks for the explaination
Thanks mate, for letting me know. You are most welcome.
thanks bro for this awesome video and awesome explaination
@@ghimirerahul39 Thanks a lot 👍
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.
Thank you! Let me cover not found and error in a video
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?
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?)
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...
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.
Try removing the .next folder and restart the local server.
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.
@@Daniel-Y72 no not needed..for that error seem to be the issue with the layout hierarchy
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
Brilliant Tutorial!
Thanks a lot ❤️
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?
Where do you see the reload? In the example project I shared with the video? Or in your project?
@@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
@@SyedSINA got it. Yes, this happens. Do you have a main root layout apart from these parallel route layouts?
@@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.
@@SyedSINABro did you manage to solve this problem.
Thank you man!
Welcome 😊
Awesome video! Thanks
Glad you liked it!
clearly explained.
tapash vai in my code on marketing route does not run without html and body tags in marketing RootLayout.
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 🙏
Thank you so much!
UFF thank god you helped me!
Glad I could help!
Thanks for the video ,, but there is error comes on jsconfig.json, could you please advise
What error? Also have you restarted VS code and saw if the error still there?
How to handle redux setup with multiple layouts Sir
You should do it at the client side.
Excellent!!!!!!
Thank you ❤️
Finally
Thank you 🙏
Most welcome
use this method why global.css not applicable for child component pages ?
thankyou Tapas Vai
Welcome
Good content
@@muhammadinaammunir6761 thanks a lot ❤️
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.
Do you get it as an Hydration error?
@@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.
@@ItsKrishnaPanthi Got it, thanks!
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
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.
@@tapasadhikary thank you very much
Thank you!
very very helpful
Thank you ❤️
you saved my life
Glad I could help ❤️
Nice sir
Thanks, brother.
is this the only solution ? for doing that ? please if there something else give a link to read . And Thanx
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.
Thanks ❤
Welcome ❤️
nice tricks!
Thank you 🙏
Legend Tapas 🗿
🙏 🙏
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
That’s weird.
does this mean we have to duplicate the providers across every layout
Nope, you can providers common and reuse across the layouts.
im stuck both of the layouts get rendered pls help
Thank you
Most welcome 🔥
But in this technique the page is reloading
Zabardast
Thanks vai, appreciate it.
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
Yep that happens, true. Mentioned in doc too… good point.
Solved many problems especially in authenticated and not authenticated route
Great, glad to know ❤️
But the app root need to have a layout?
Life saver!
So glad, Alex that it helped you! Thanks.
and what about not-found page
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.
when I declare a route link with href the page is reloaded.. how to solve this??
What’s the href value?
@@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
love it
So glad
🚀🚀🚀🚀
😍😍
❤❤
❤️❤️
best
@@evgeny9945 thanks!
Sir, You have no idea what level of video is it. sub.
Glad you liked it… keep learning 🫶
gg
বাংলায় কোর্স চাই.... ইংরেজি সবার বোধগম্য নয়
কি বলি বলুন তো ভাই। আমি আপনার সাথে already সহমত। tapaScript বাংলা চ্যানেলের promotion ও শুরু হয়ে গেছে, আর সেটা এসেও যাবে আর ১-২ সপ্তাহে।
কিন্তু তবুও আমি আনুরধ করবো ইংরেজি ভিডিও দেখে আসতে আসতে শেখার। দুটোই চলুক। আপনি বাংলাতে শিখবেন, ইংরাজিতেও শিখবেন। অসুবিধা হলে জিজ্ঞাসা করে নেবেন... হেল্প করবো।
আশা করি আপনি আমার দুটো চ্যানেলকেই সাপোর্ট করবেন। 😀😍
Wwwoooowwwwwwwwwwwwww
Thanks ❤️
Thank you !
thank you
Welcome ❤️
thank you
welcome :)