Hello dear Vishwas , I hope you are doing well , just wanted to tell you that you are the man who put me on the right track to learn nextjs since your old series for nexjs , also react , and thanks for your effort updating the series , it has been 2 weeks since your last video , hope you are doing well , take care.
Hi Vishwas, Thank you for making such a wonderful tutorial. I've been following you for a long time. your channel is my go-to place for anything react. I would like to make a request for you to kindly give us PDF notes to quickly recap all the important concepts. Actually after going through the playlist, sometime we forget imp concept, it would be easier for us to quickly glance through the notes or blog. Thanks!
hello vishwas, I created the header and footer sub-folders in the component main folder then imported their respective layout file in the main layout file and it worked for me.
For some reason everything works for me except for the in-line styling. Something about unexpected html element led me down a rabbit hole of props not being passed to the header and footer elements
Hello Everyone, I am new to nextjs and want to know, if i make a layout with navbar and footer will the navbar and footer will be reloaded every time when when users move between different pages.
Is it a good practice to modify the layout.tsx file, since it is auto generated from page.tsx? wouldn't be a good idea to add the header and footer in the page.tsx?
Hey Vishwas. how do we pass props to layout to pages, also how set some default props to all the pages Ex: prev _app.js export default function App({ Component, pageProps }) { const dispatch = useDispatch(); return (
); } this dispatch by default available to all the pages in the pages-directory. in the next 14 app-directory how do we set like this, and need to pass some props page.js to layout.js
Since the components are placed right below the previous component in this scenario the footer is placed where the children component ends, so if you want to place footer at the bottom irrespective of the size of content in the children components you can use css/tailwind to handle that
are you considering that (auth) is not really a folder? the parentesis () are just a way of separating but not really creating folders like we do with '[ ]'
as we have discussed the layout will be on the every page but in case if i don't want the layout in my auth related pages do i need to check location.pathname.includes("auth") or sth like this to conditionally render layout or is there any alternative way to do so?
Create another component which name something like "currentLayout" and put into main page.tsx.. I guess u already found a solution, share with me if you have another way to do it
first of all, thank you so much for the reply. I will surely try this out and I also did some research and found that we can define specific layouts for auth and dashboard using route groups thankyou so much for the course and i have learned a lot from this channel love You sir Love from Nepal
don't know if this is the right answer but I think, you can delete the root layout, group the auth related routes in one folder and give it the layout you want and group non auth related folders and give it saperate layout.
There are ways to create custom layouts , I think few pages like auth related , error related , we can create custom layouts for those without header and footer , please check. More
Next does not automatically generate my root layout.tsx file for some reason. If I delete it and try to load the homepage I just get an error until I manually rebuild it.
Hello dear Vishwas , I hope you are doing well , just wanted to tell you that you are the man who put me on the right track to learn nextjs since your old series for nexjs , also react , and thanks for your effort updating the series , it has been 2 weeks since your last video , hope you are doing well , take care.
this is the best nextjs 14 tutorial playlist i have ever used so far!
Thanks for this. Coming from 13 and this was way easier than I thought!
Thanks, man. You explain everything very well and clearly, it's valuable 👍
Still in 2024 my favorite TH-camr for Coding. Vish at his peak, in every single video ❤️
Hi Vishwas, Thank you for making such a wonderful tutorial. I've been following you for a long time. your channel is my go-to place for anything react. I would like to make a request for you to kindly give us PDF notes to quickly recap all the important concepts. Actually after going through the playlist, sometime we forget imp concept, it would be easier for us to quickly glance through the notes or blog. Thanks!
hello vishwas, I created the header and footer sub-folders in the component main folder then imported their respective layout file in the main layout file and it worked for me.
Thank you for these awesome vids. I came from nuxt and I found next.js was far more advanced than nuxt.js
for the exercise i created 2 components in the app folder named header and footer and imported them into layout and it works
It worked as expected. Thanks Vishwas.
Thank you Vishwas, very well explained!
I hit like without WATCHING! :)
Amazing!!!! Plz give us a full video with login and user session management using NextJs!! Plz make video about how to use Link / Navigate too
Thank you Vishwas!
Looking forward to more thematic video lists, like Next.js 14 PWA 😃
Thanks a lot for your hard work❤
completed the exercise , its working for me, added navabr and footer components in the layout section,
but not working on my side
What if we don't need a header and footer on some pages like login, register etc? As the main layout is also applicable on login and register pages.
thank you so much for your video
Thank you so much for the video.
Thank you so much 🖤
I don't know why but my layout page is not creating magically (Automatically) after deleting it.
Yes brother I'm also facing this problem
encountered this as well
So for adding layout into components like header we need to add page.tsx inside each folder ?
For some reason everything works for me except for the in-line styling. Something about unexpected html element led me down a rabbit hole of props not being passed to the header and footer elements
how to maintain header layout but only change color based on specific route?
A question here:
How can i add a react component as a Header or Footer within the layout component if i don't want the native HTML within
for example lets say i dont want my about section to have the main layout. That is the footer and nav what should i do?
Hello Everyone, I am new to nextjs and want to know, if i make a layout with navbar and footer will the navbar and footer will be reloaded every time when when users move between different pages.
Thanks
What theme is this? I mean whats the name of this theme, please anyone can tell me?
How can we have multiple layouts,in case we require to show different for login/register
Or some other modules
Create a layout file inside the login and register folder respectively.
are layout.tsx files necessary for every route? if not then when?
Is it a good practice to modify the layout.tsx file, since it is auto generated from page.tsx? wouldn't be a good idea to add the header and footer in the page.tsx?
I'm pretty sure it's only generated if you delete it. Most other frameworks do the same but in the background, pretty sure svelte does too
Is there a way to implement the new reusable layout.tsx in a NextJs v14 project but still use the old NextJs "pages" folder instead of "app"?
very good
I'm using next 15 and that layout.tsx file is not automatically generated, platform is windows and i'm using vs code
When i deleted the layout.tsx file and then refresh page, layout.tsx doesnt get regenerated.
Hey Vishwas. how do we pass props to layout to pages, also how set some default props to all the pages
Ex: prev _app.js
export default function App({ Component, pageProps }) {
const dispatch = useDispatch();
return (
);
}
this dispatch by default available to all the pages in the pages-directory. in the next 14 app-directory how do we set like this, and need to pass some props page.js to layout.js
hi, why the footer is not coming at the bottom? instead it is just always below the body components? Please explain the solution
You can use CSS for this
Since the components are placed right below the previous component in this scenario the footer is placed where the children component ends, so if you want to place footer at the bottom irrespective of the size of content in the children components you can use css/tailwind to handle that
@@tanayjagnani5987 hello brother after adding header and footer in layout.tsx (with styling) why I am getting errors for (auth )folder
@@prathameshlokhande378 what are the errors?
Use css to expand the body, it will push the footer down
what if in certain page I don't want the header and the footer? how I can modify the layout?
When I delete the layout, I got error : doesn't have a root layout. To fix this error, make sure every page has a root layout.
Very very thanks love from 🇵🇰
In dashboard route I don't want to show header, How to do it?
what if i don't want add header footer in login register page?
MY layout.tsx is not automatically generated after deleted
I had deleted the layout.tsx file and and as I refreshed the page, it creates the layout.tsx file in (auth) folder why ? Can some one explain please ?
are you considering that (auth) is not really a folder?
the parentesis () are just a way of separating but not really creating folders like we do with '[ ]'
as we have discussed the layout will be on the every page but in case if i don't want the layout in my auth related pages do i need to check location.pathname.includes("auth") or sth like this to conditionally render layout or is there any alternative way to do so?
Create another component which name something like "currentLayout" and put into main page.tsx.. I guess u already found a solution, share with me if you have another way to do it
first of all, thank you so much for the reply.
I will surely try this out and I also did some research and found that we can define specific layouts for auth and dashboard using route groups
thankyou so much for the course and i have learned a lot from this channel
love You sir Love from Nepal
@ar-jun6631 bro, haha, I'm not the author of the video, it's so funny that you introduced me like that.
how do we pass props from page to layout?
What if I have a login page and dont want to use the root layout. How I can remove the root layout for a certain page
don't know if this is the right answer but I think, you can delete the root layout, group the auth related routes in one folder and give it the layout you want and group non auth related folders and give it saperate layout.
can we use layout.jsx instead of .js?
How to exclude header from not-found.tsx?
There are ways to create custom layouts , I think few pages like auth related , error related , we can create custom layouts for those without header and footer , please check. More
Why too many folder and layout?
I want admin dashboard layout without header and footer how can i do it?
add a layout.tsx in (dashboard) and add your dashboard there
anyone got any issue on login, register routes?
GoodJob!
When is the next video coming
theme vscode? pls
i use pageName.layout = LayoutName;
👍🙏
Why do you talk so slow
There is a playback speed controller.....
Next does not automatically generate my root layout.tsx file for some reason. If I delete it and try to load the homepage I just get an error until I manually rebuild it.