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
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
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?
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.
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?
Let me explain you a bit more of how it acts. It's like when im activating modal link from (auth) layout it pops up as modal - for example (.)log-in segment is activated, but when i activate modal from (root) layout it goes to the to the log-in segment directly, and i'm expecting it to go to the (.)log-in. It should be going to log-in only on refresh or if user entered url directly if i got it right.
I haven't tested intercepting routes inside route groups with two root layouts. However, I'm working on a video on this topic, and I'll try to cover this in there.
One more thing that i also tried and can't really find any solution anywhere... Do you have any idea how to disable intercepting routes on mobile browser (small screens), cuz when I use intercepting routes on desktop browser (modals pop up) and that same behavior is on mobile, which is not wanted... As far as i tried Link and router are both in all cases intercepting route and opening the modal... The concept it self is really cool, but i don't think it is really production ready yet, especially in these very particular use cases, but idk, maybe I'm wrong and just using it the wrong way. @@hamedbahram
hello brother please make a video on (express js) backend and (next js ) frontend about "server side " filtering data and pagination not using server action
Can't i just create folders with no page.tsx inside them and then add folders with page.tsx inside? Is the descending page.tsx files won't be detected?
@@ahmedhassan_saveronce you create a folder in the app directory it automatically becomes a part of the routing system so therefore grouping is needed to ignore such cases
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
Glad it helped!
Thank you for your explanation! Your example is clear and easy to understand.
You're welcome! Glad you found it helpful.
One more time you've helped me, Hamed. Thanks, bro!
My pleasure! It's great to hear that :)
Great content!
My pleasure!
Thank you so much. Your content is always very entertaining and helpful.
My pleasure!
Great video! You just made this mess a lot more structured.
Thanks! Glad it was helpful.
Loved ur videos brother, so easy to understand.
Thanks, I appreciate your comment.
Thank you Hamed , very helpful information
My pleasure!
That's what I was looking. Thanks Hamed. Easy explanation.
Glad to hear that!
hey hamed, thank you for your explanation, would you please tell how to ignore main layout for some pages?
You can create different root layout for each route group.
Very good content! Thanks.
Glad to hear that!
nicely explaine!
Thanks!
thanks your for this simple explanation
Glad you found it helpful
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?
You can fetch data inside your nested layout.
Nice, thanks for the useful info! :)
Glad you found it useful. I appreciate your comment.
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
You can create two root layouts using route groups. Watch the video I have about route groups.
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?
Try loading the fonts in your root layout.
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.
You need a `page.js` inside each route segment. For example:
(company)
layout.ks
About
page.js
What happens when we put a route group in a normal route folder in a nested fashion?
Can you expand on your question...
But how to opt specific segment from RootLayout, can you please explain it
You can create multiple root layout, one for each route group. I demonstrated this concept in this video => ua-cam.com/video/wnrGmNDNVvM/v-deo.html
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?
Let me explain you a bit more of how it acts. It's like when im activating modal link from (auth) layout it pops up as modal - for example (.)log-in segment is activated, but when i activate modal from (root) layout it goes to the to the log-in segment directly, and i'm expecting it to go to the (.)log-in.
It should be going to log-in only on refresh or if user entered url directly if i got it right.
I haven't tested intercepting routes inside route groups with two root layouts. However, I'm working on a video on this topic, and I'll try to cover this in there.
@@hamedbahram Nice, can't wait to see your next video!
One more thing that i also tried and can't really find any solution anywhere...
Do you have any idea how to disable intercepting routes on mobile browser (small screens), cuz when I use intercepting routes on desktop browser (modals pop up) and that same behavior is on mobile, which is not wanted...
As far as i tried Link and router are both in all cases intercepting route and opening the modal...
The concept it self is really cool, but i don't think it is really production ready yet, especially in these very particular use cases, but idk, maybe I'm wrong and just using it the wrong way. @@hamedbahram
one question may I know which font you are using in VS Code?
font is Operator mono.
Hey bro, can I make Dashboard with this model?
Absolutely!
route groups not working for me, I'm usign the pages router with next 13
Route groups are for the App router.
nic, but how we can send props from different props from page to the layout file ?
You can't pass props from a page to the layout. Was that your question?
@@hamedbahram yes, it was
yeah but how to exclude all layouts for a specific page?
You have to create route groups with more than one root layout.
You have to create route groups with more than one root layout.
hello brother please make a video on (express js) backend and (next js ) frontend about "server side " filtering data and pagination not using server action
Thanks for the suggestion. I'll keep that in mind for the upcoming videos.
good for DRY code
Absolutely
nice
Thanks
Can't i just create folders with no page.tsx inside them and then add folders with page.tsx inside?
Is the descending page.tsx files won't be detected?
I will continue the video and see
Thanks man 🙏
@@ahmedhassan_saveronce you create a folder in the app directory it automatically becomes a part of the routing system so therefore grouping is needed to ignore such cases
The page will be detected but the parent folder would create a route segment in the URL.
Exactly 💯
Zoom level is soo low,, please zoom when record, :)
Sure I'll have that in mind.
Hello sir please make video on next js opengraph and twitter image card
I'll have that in mind. Thanks for your suggestion Uday.
@@hamedbahram you are the best sir i hope one day i meet you in person
@@udaym4204 My pleasure.