Intro to Next.js | Lesson 9: Head Component
Transcript
English (Auto-generated)
So in this video we're gonna talk about something really cool, which is you can say the specialty of the next two years, um the react and the angular these languages or these frameworks are not good for S C. O perspective because these frameworks are actually, you know, doesn't have the head tag, doesn't have the, you know, property structure and the meta tags and abc. So in the next day I guess we can actually have the head tag and how we can have it, there is a component, the head component which we need to import from the next uh library and then we can use it in our project and then you can apply all your meta tags very easily. So let's just do it and uh so to do that first of all, as you know that whenever you want to import anything you need to be at the top of the uh the page just above the the actual module. So I'm writing the import and I'm what I'm importing, I'm importing the head and you can see that I am importing it from the okay from the next head, that's totally perfect because this is what I am looking for now because I've imported the hit, the hit component, I can use the component in this, you know, in the return statement. So how I can do this to use a component. You can use the component using the using the, you know, this is the simple react method. It is not specifically the next Js method because it's it's really common to, you know use a component which is created in some other file by simply calling it just like that. Okay, now even this is the head tag, it has to be inside this mean um div tag and I already did that. I do not need any other tag like body tag or something like that because because of that head tag, ultimately whatever inside after that it's it's in the body tag. So by the way this div tag is it's not a div tag. It is just you know, a kind of uh we just define the line, a border for the next Js. Js X. So that is it now in the head tag, how you do things, you just simply write and write the meta tags. I just copied and pasted it here. Um you can see that we are having the problem the some errors here and the error is only because the the next day in the Js it's not the next days because the Jsx is the react actually it was used in the react first. So you have to, you know, add the ending tag. Even if it is the empty tag like you know this is the empty tags. So you have to add the the slash at the end to just make it perfect. So the in general html We do not do that but in Gsx we have to close every single tag. Even if it's the empty tag and that's how you close it and no okay, sorry. In the in the head tag you also can add one more thing which is really important. If I go to the browser let me save it and I'm going back to the browser here it is and I am just deleting that. Sorry, this can't work. Okay now this one you can see that if I just go to the elements and you can see that the head tag is there. And right after the head tag you can see that there is a body tag. It was created by default anyway you can see that the meta tags are there. We needed those tags and we got it. That's totally awesome. Perfect. Now next thing we need is the title tag. So now I'm adding the title. This way it is totally simple. Just like the html way you just need to add the title. So introduction to next Js and saving it again, going to the browser back and you can see that there is a total title introduction to next Js. You can change the text like you know um introduction to next Js um code cast. Save it go back to the browser. You can see that introduction to the next day's code cast and you can also see this um somewhere here there it is. You can see that. Okay we got it. So this is how you can just apply the head tag. We just did it in the next video. We're going to do something more interesting in the next days till then stay tuned.