Next.js Tutorial #5 - Creating a Layout Component

Key Takeaways

all right then so we've seen how we can create these dropping components the navbar and the footer which currently sit at the top and the bottom of the homepage now ideally i'd like these to go at the top and the bottom of every single page that we have so i guess what i could do is copy this and copy this and paste them at the top and bottom of every single page components but that's not really realistic especially for larger websites where we have many different pages because then i'd have to copy and paste in every single page component that we create which is a waste of time and also if the layout changes for example where the navbar is shown or where the footer is shown i'd have to change that in every single page component so ideally what i'd like to do is create instead a layout file and that layout file would contain the nav bar in the footer and then that component that layout component would wrap all of our different pages so in essence what we need to do is create that layout component and have it wrap this thing right here because this is where our pages are rendered okay so what i'll do is first of all create the layout component inside the comps folder so layout.js and then we'll create a stateless functional component called layout right here and what we'll do now is first of all go to app.js and i'm going to import it and i'm going to wrap this thing with the layout components so let me just cut this for a second and instead we'll return a bit of template inside parentheses where we're going to have the layout first so let me click on this to auto import it at the top make sure this is an angle bracket not a comma all right and we need this to have a closing tag so that in between these components we can place this thing right here this is the thing that renders the pages and what we're doing is wrapping the layout component around that now we get access to whatever is nested inside the layout so this thing right here inside the component that surrounds it so the layout itself and this is called the children of this component this is standard react stuff so if we go in here now inside this layout component on the props we get access to a children property which i'm just destructing right here so this children property is basically anything inside this layout component right here anything nested inside it so it's just this and all we need to do now let me save this file is output the children inside this component and what that means is that wherever we output the children inside this component all the pages are going to go so what we could do is output the nav at the top the footer at the bottom and then the children in the middle so let me first of all do a div with a class name of content just so we can style this later on and then inside that i'm going to do the nav bar let me click on that to auto import it at the top so we have that first of all then i'm going to output the children which is all the pages all the page content and then below that we need the footer i'm going to click on this and it auto imports it and now this should all work so what i could do is delete it from here and delete it from here but it's still going to appear let me test this out first of all go to the home page i'm going to refresh for good measure and it's still there we have the nav bar and also the footer now though if i click on a different page like about we have it here as well the nav bar and the footer if we go to ninja listing we have it there as well navbar footer so now it's appearing at the top and the bottom of every single page component so again that works because we surrounded all of our different components with this layout file inside app.js so we nested this thing which is where the pages are output inside the layout components therefore inside the layout components we output this this thing right here by referencing the children because the children is this thing it's the children of the layout components and so therefore the pages are nested between the navbar and the footer does that make sense so now whatever page we create it's going to have the nav bar at the top and the footer at the bottom