Intro to Next.js | Lesson 10: Links

Transcript

English (Auto-generated)

question when we have created multiple pages in the uh in the next days even we've created the you know the I. D. Uh the the dynamic links and all and all you can see that. So now what if instead of going to the next page uh we have to write the link address. I mean you know this is the way at the Ural and we can go to the specific page. What if I just want to go to the certain page without writing it in the Ural? But by clicking so we need the we need to create the link or you know in the traditional html. We use the A. Tag. So the attack doesn't work here because that's a different thing in the in the next case you just cannot use the a. Tag or the anchor tag. So the solution we have here is we're gonna import another thing and we're gonna import the link this way link. Okay and then a line break. Okay um we've imported the link now. This is the time to use it to link somewhere in the document. So for example after the P tag, I'm going to add the link. So to add the link you just need to do this and inside it you need to write hyper reference almost the same method. But now you need which page you want to go for example you want to go to the about. You need to add the slash the backslash and you need to write the about and nothing more. And here you need to write, click here to go to about kate, save it, go back to the browser and uh I need to be to the main page and there it is. So when I click on this page absolutely I'm going to go to the about page so you can see that it is link. If I go to the inspect element, I'm not going to get the link tag because it's a component, you need to know whatever we import these are not the tags, these are the components. This is a simple react thing. The react Js thing which is totally applied in the next Js this is the the head tag, the link tag. These these tags are actually coming from the react because you know the next year is a super set of react framework. So anyway um you can see that this is a link and when I click on this link I'm going to go to the about page and that is totally working fine. I hope this makes sense to you. Okay now a little more things I mean not important but let's just create a link for a few more pages for example, go to the um company about page. Company. About page Okay, um it is telling that no, I do not want that, this is a fine thing and it should be, it should work this way. Yeah, that's why it is just the error from the um from the you know quick fix, there's no quick fix for that because that is fine. It is just it is just that the idea is confused because um we didn't put the single or double coat which is not necessary and I d thinks that this should be any strength. So my idea is having its own things because it can be a tag, you know it can be a tag. So anyway just keep it and the company first we need to go to the folder which is the company in this case and inside the company we can go to the we can go to the about us page, one more link. I'm going to create for the company copy and I'm just adding it here and I'm just going to go to the company. So in that way I'm gonna go to the the you know the index dot J's page of the company folder so what next? Um I'm going to copy one more time and I'm gonna paste it above of all and I'm just deleting whatever I have and I'm just leaving the backslash and now click here to go to uh index page. Index page, awesome, click here to go to about a spade or about page, click here to go to the company index page and now I think you've got what I'm doing and I'm going to go to the browser and I'm gonna refresh the page and then okay I think there is one more thing I need to put, I'm not going to create the complete thingy, I'm just gonna simply create the I'm just gonna put the br the complete thing. I mean you know you can create a complete Nav bar so that's not the specific next phase thing anyway, one more here and save it and go to the browser. Now, if I click on this one I'm going to go to the index page. If I click on this one, I'm opening it here, the about page, I'm gonna click there and the company Okay, this is not happening and why it is uh why it is not behaving the way it should be the company has the page. Am I putting the wrong spelling or something. Oh okay. This spelling problem here it is, they cannot become happening. It is company. So just make it right and you are getting up close it, refresh this page. I do not need to refresh that by the way. Now open it. I'm gonna have the company title page, sorry, the homepage and I'm going to click on the about page and this is the company about page. In each page if you want. You can at the, you know, head tag and you can put the titles and if you want, you do not need the nametag necessarily on every page, but the title is important. So we would be able to read the titles instead of the links there, the urals above. So I think we got it uh, in the next video, we're going to talk about something more in the next days until then stay tuned.
191 Views 0 Likes 0 Comments

In this Cast, we will learn how to create navigation in NextJs using Links Component

Comment
Leave a comment (supports markdown format)