Create Pages and Layouts in Next.js with TypeScript

foreign and welcome to this lesson where you will learn about pages and layouts in next years so first of all you need to know the basics about what a page is and what the layout is so if you see over here you have nexjs official website open in front of you and if you notice you have a top navigation bar or you can see the header over here and then you have the main content in between so that is a home page and this is how it looks like and then you can see you have a table over here so basically if you notice you have three columns and four rows and then if you scroll down you will see that you have all of these data and then at the end you have the footer over here now if you navigate to any of the other page let's say you go to the docs page so you will see first of all the path changes on the website and then you have a different layout style over here so this has an upside bar and a right sidebar and then in between you have some textual data now all of the data that you see on this page is actually what the contents of the page are and the layout is actually what you are seeing the difference between the two pages so if you see over here this is a home page and if you see over here it is a Blog style page where you have sidebars and then the main content in between so that is the difference between the layout and Pages now let's move on to the visual studio course so that we can practically see how pages and layouts work in next years so this is where we left off previously the only difference that you see over here is that I have created a new app over here so that you can have references on GitHub and you can follow along easily now over here if you notice inside the source so as we discussed this is the folder where we have all of our main files for the project you will see that you have the two files layout and the base.tsx so first of all let's visit the layout.ps file and in here if you notice you have a root layout so root layout is basically an essential part of the layout and this is something that is followed Along on all of your pages so in short whatever the root layout you have decided for your website will be reflected on all of your web pages and then if you come onto thatpages.psx you will see that you have some content over here that is being displayed on this page now let's move on and see how you can create a new page so for that what you need to do is you need to go into the source app and create a new folder and inside the folder let's name it as dashboard so let's say you want to design a web page for dashboard now inside the dashboard you will create a new file and then name it as space.tsx then we need to given the content so for the content I will just copy all of this and you notice over here that the function for the home page is named as home and then when we come over here and paste it I will name this function because this is going to be our dashboard and in here we can write any content that you want for this page so I will just write down this is our dashboard page and then save it now moving on to our website if you want to access this web page you need to write down slash and then dashboard over here and hit enter so now you will see that it will take you to our dashboard page so you see how easy it is to create a page so whenever you want to create a new page in an sjs application you need to create a folder for each of your pages so if you see over here it follows the same nail for both of these Pages now let's see how you can change the layout and how does it really matters for the root layout and a dashboard layout so first of all we will go on to our root layout and let's say you want to add a navigation bar over here so for that what I will do is I will just go into my body and over here I will add a new nav bar so for that you use the tag nav and just write down the text this is our main nav bar obviously you won't have such a big text for your navigation bar but this is just to explain you that how these things work so you can see over here that you have the nav bar on your home page as well as on your dashboard so you can see over here whatever you have in your main layout or you can say the root layout is being reflected on both of your pages dashboard as well as your home page now let's say you want something different on your dashboard but you do not want that to appear on your main home page right so for that what you will do is inside the dashboard folder where you have created the page.tsx file you will have to create a new file again and then name it as layout dot TSX now whatever the layout you want on your dashboard page you need to just create it over here so for that I will go to my previous root layout and over here I will just copy this function for the root layout paste it over here and instead of naming it as root layout I will name it as dashboard layout and over here what we will do is we will just remove all of these tags and everything that you have inside the return statement now one thing is very important over here to note that the HTML tags and the body tags can only be inside your root layout and not in all of your different web page layouts this is because by default next.js doesn't create these tags so you need to make sure that your root layout has these tags for HTML and body so for now I will just remove it from over here and then I will add a new section and inside the section as you see over here for the main layout you need to call the children over here right so for that what we will do is we will just use a curly braces and over here we will write down children now the children for this layout is actually the page that resides inside the dashboard folder but not the main page right just keep that in mind so let's see how that works I will just save it for now and once you go to the dashboard you will see over here that now you have this dashboard over here and this is the content for your dashboard piece now if you just remove it from here and try to save it you will see that it just disappears from here because you haven't called the children over here right so I will just keep it again and now we will add a new nav bar over here and inside the nav bar we will say that this is the dashboard navbar they save it and now you can see over here that on your dashboard page you have the dashboard nav bar and the main nav bar but if you go to your home page you will only find the main nav bar over here and not the dashboard nav bar because we have created that layout inside the dashboard folder this means that whatever the layout you want to make for your dashboard page you can make it separate as compared to the main home page so with this I hope you have got understanding of what pages and layouts are and how do they work and how you can create your different pages and different level styles for them now in this session we haven't covered The Styling and all those Concepts we will be having different sessions for all of these styling and other components in our upcoming video sessions thank you for watching don't forget to like And subscribe our channel so that you can get more informative videos like this

Channel: Code In Piece

Views: 8,866

Keywords: Next.js, TypeScript, Web Development, Next.js Tutorial, Next.js Pages, Next.js Layouts, Learn Next.js, JavaScript, React, Pages in Next.js, Layouts in Next.js, Creating Pages, Editing Layouts, Next.js Basics, Next.js for Beginners, nextjs for beginners, next.js for beginners, next.js tutorial, page and layout in next js, next js web, web development, Getting Started Next.js, Next.js Layout, Next.js Page

Id: g07YbY6P4sU

Length: 7min 9sec (429 seconds)

Published: Tue May 16 2023