Provide page-specific Metadata Using the Head Component
The Head component in Next.js functions similarly to its native HTML counterpart.
You can use it in your page components to provide page-specific metadata such as title, description, viewport etc.
Instructor: [0:01] Something that every website has in common is metadata, which consists of a title, description, style links, scripts, and so on. In Next.js, we can use the head component to provide metadata for each page specifically.
[0:16] Let's open up exercise number six, and enter the index.tsx. First, let's run npm run dev and see what we get. We get a heading, but there is no title or description or anything like that.
[0:33] Let's use the head component to provide that information. We're going to import head from next/head, and add our metadata inside. The title is going to be home page, and we can add the viewport metadata. Let's save our file and see what we have.
[0:57] We can immediately see that we have the title set to home page. If we open the inspect element tab and enter the head tag, we can also see the viewport. The content in the head component can be composed of local hard-coded data, just like we did, and also, data obtained from an API or CMS.
[1:19] In order to avoid duplicates, we can use the key prop, which will make sure that the tag is going to be rendered only once. Let's simulate a situation. Let's add another head component, which we can theoretically fetch from the CMS.
[1:36] Now, let's add a metatag with the OG title as the name. Let's set the content to my Next.js course. Let's set the key to title. If we go back and refresh, we can see the OG title is here, but if we go back and add another head component, but instead we're going to change the title to my awesome course and we'll keep the key.
[2:09] In this case, this metadata is going to be rendered, while this one is going to be discarded. Let's check it out. Hit refresh. There we go, we can see that there is no other OG title tag present, and the content is my awesome course.
[2:29] The contents of the head component get cleared upon unmounting the component. Make sure that each page completely defines what it needs without making assumptions about what other pages added.
[2:41] The title, meta, or any other elements need to be direct children of the head component, or wrapped into maximum one level of React fragment. Otherwise, the tags won't be correctly picked up on client-side navigations. This is how we can add metadata for each page in Next.js.
[3:01] To recap, Next.js provides the head component that we can import from the next/head package. We can use as many of the head components as we want, and we can also fetch the metadata from an API or CMS.
[3:16] There is a key prop that prevents duplicate metadata being added into the head tag. Also, the contents of the head component must be direct children of the head component, or wrapped into maximum one level of React fragment.