Next.js Blog | Creating the Navigation

Transcript

English (Auto-generated)

So the thing is we we can create the navigation anywhere we want, I mean we can create the navigation right here in the main area or we can try, you know, to create the navigation just above the main area? I mean it's your choice, you can just go there and you can create the navigation. That's that's a simple choice anyway. Um first of all I'm deleting that because we do not need it. Move to crash simple. Okay, now there is one more cool thing about you know creating the navigation or actually creating a file which we want to throw out the application. So what is this, the actor James, you know, this file is actually bootstraps the whole project, the whole next Js projects. So absolutely whatever is in this file will be in the whole document or you know, the whole project, the whole application. So I'm just being inside it and this is a component. I absolutely need that. I'm cutting this one for now and I'm gonna paste it again for now. I'm just creating the div and inside this div I'm just pasting it and I'm just you know making it better. Okay, that's that's absolutely good. Okay, that's fine. So why I did it actually because you know, I just wanted to add another thing, I just wanted wanted to add the navigation here because just imagine if I had the navigation in the app dot Js I absolutely don't need to create it as a component and call it as a component. You know, I I could have created the navigation in the component, why I didn't do that. What do you think? Just think for a while and I'm going to tell you for sure. Anyway, so the first thing is, you know when you create another component for the for the navigation, you're absolutely going to call it. That component in the page is where you want the navigation. But ultimately in this application at least you want the navigation in every page. So you're gonna edit this, you know, the you're gonna put it inside the app dot Js. So I'm just going there and I'm just going to create the nav and I'm gonna go inside and this is the just based act for now and I'm gonna create, you know, you know, here you'll and inside the um I'm gonna create the Ally and then in the Ally I can write the navigation for now. I'm not I'm not going to design it into the actual navigation. I am gonna apply the tailwind and then I'm gonna apply, I'm gonna do the, you know, the designing of the navigation with the Children but not for now for now, I'm just gonna create the data and everything okay in the Ally, I'm gonna write something like you know home and I'm gonna create another Ally and that Ally is, you know I can make it um contact us, I'm going to create another Ally and I'm gonna write what I'm going to write, it's just about creating multiple pages, let's say about us about us. That's awesome. Okay. So this is a navigation. If I go to the browser, you can see that we've got it and uh okay, that's totally fine. We do not need to call it into the, you know, into this page as a component because we just got it here above above everything. So anyway, um what next I'm gonna do is I'm just gonna make it above here. Okay. Just close it. Okay. Anyway, um what I'm gonna do here for now, I'm going back to the app dot Js and I just want to make it link, you know, these are not the links and you know how to make it. You just cannot call the anchor tags in the next Js. So I'm going to the import and link and I got it. The link component is here. Now I can call the link component link. Okay? And I'm just gonna cut this data and paste it inside. And then I'm just gonna create, you know, hyper reference and because it's a homepage, so I'm just simply going to call the homepage, I'm gonna copying that and I'm going to paste it here here copying that, tasting that here and here. That's awesome. But this this just cannot be both cannot have the same link for now. We do not have the different pages but I'm just calling about, I'm just calling contact and I'm saving it going back to the browser and you can see that these are the links now. But when I click on the about We're not gonna have anything because it's a 404 but you can see that even in the 404 we got it and this is totally looking fine. So you know sometimes it can be a problem. I mean this is not this, this is it's all about the scenarios. I mean the situations maybe in your code putting the navigation inside the app dot Js is not a good idea. Maybe maybe you do not want the navigation in the In the 404 page maybe but maybe you wanted every year. So in in the, in, in, in, in, in, in in this scenario which I just go, I'm just going with, I can put it here but if you want, you know, you can just make it a component and you can call it. Why are the component? So for now I think we just got the navigation bar and this is totally fine. This looks awesome. In the next cast we're just gonna, you know, we're going to retrieve the data from the specific website and we're going to fetch it and get the data in the in the in the extra Js file. Okay? Until then stay tuned
93 Views 0 Likes 0 Comments

In this Cast, We will create the Navigation for the Blog

Comment
Leave a comment (supports markdown format)