Next.js Blog | Creating Static Pages
Transcript
English (Auto-generated)
about actually we're going to create some static pages. And uh, you know, these tragic pages are important because, you know, we are going to put some data in it. So I'm just gonna go there and I'm just gonna, you know, right click on it and I'm just gonna click on new file and the final name would be about dot Js. Okay? We just created one static page. And in this page I'm just going to create the, the, you know, component, which is ultimately the, uh, the function and a page, you know after all, But I'm not gonna go with the traditional function method. I'm going to go with the modern method, which is const Okay. And then about the H should be capital. That's a rule because it's the page, it indicates that we're talking about the page. Const about, let me just created like that and equal to and then this way and then, you know, okay, we just created a function, a simple function, you know that. And in this function, you know what we do when we create a new file of the new, the component, just return whatever you want to return, which is, I'm going there and inside that I'm going to create a div okay. Inside that I'm gonna write something like it's about about page or about us. Page, let's just call it, call it About us. That makes sense for now, I mean, you know, anyway, it's about us. Page. That's fine. Now, the most important thing you need to do is to export the page. Otherwise all the good work, just, you know, we'll go to Vivian's, if you just don't export it export default about sorry About us awesome. Now you need to go to the browser and once you go to the browser you can see that in the about it in the about page. Actually it was the 404 error. Now you can see that it's about this page. We got it, we got the about this text. Okay. Similarly I'm going to create a new page and it's gonna be contact contact dot Js Okay? Um, in the context again, I'm gonna go with the same method. Cons I'm gonna do one more thing. I'm gonna update this one too anyway, but not for now. Okay. Const and um, contact us equal school and then that's, that's good. Now I'm saving it and inside it I'm going to return something which is like that. Okay, We are returning something and for now it is, this is the contact us page. Absolutely. We're going to create the whole pages but not for now. We're just, you know, creating the data and then absolutely going to retrieve the data and then we will definitely be designing them and making them exactly how they should, they should look like, you know. Okay. Contact and we got the, we got the problem. Oh, okay. Okay. We are not exporting it export default. That's very important. Contact us awesome. Save it, go to the browser. We're not gonna have any error because we did it and that there is no error. But the, this is the contact us page. That's awesome. Okay. One more thing I just don't like this method. So I'm just simply going to, you know, you know, I'm just simply going to get rid of this old method and I'm just gonna delete that. Remember the name of the the the component is home. So I'm just gonna delete that. I'm gonna call the cons okay? And I'm gonna write the home and equal to and then simple, but we need to export it. We're not exporting it yet. So export default home and save which go to the browser and just simply believe that and you are going to get it talking home about us and contact us. So when you, when you click on the about us, you're gonna get the about us page. When you click on the contact us, you're gonna get the contact us page and when you're going to click on the homepage, you're going to get the homepage. Now, actually the navigation navigation bar is actually working. The navigation is working cool. And the static pages of the websites has been created in the next video. We're gonna create the, you know, the uh, we're, we're just gonna get the data first and then you're absolutely gonna do a lot of things until then stay tuned