Next.js from the Ground Up with Cassidy Williams

Next.js Head API

In this stage, you'll learn about Head API in Next.js and how to programmatically add your own custom <head> contents for each of your page components.


[00:00:00] Next.js has a robust API that allows you to do a lot of really cool things. One of my favorite components in the [00:00:10] API that I think is actually under appreciated is the head API. Now what the head API does is allow you to append elements to the head of an HTML [00:00:20] page that's rendered. If I were to import head from next head just like that, now I can actually use this on the page. [00:00:30] Let's just say on my Pokémon page, I'm going to wrap this whole thing in a fragment. Now I'm going to use the head component. [00:00:40] Inside of here, I can say, for example, the title of my page is Pokémon. Then in here I can do that whole Pokémon [00:00:50] name right in here which is cool. Now I have a custom title in the head of my generated page and [00:01:00] I can add whatever other things would normally go in a head. I could do a meta name is viewport, for example, [00:01:10] or I'll throw in quick content and width stuff like this or any open graph data, whatever I want which is really useful. If you think about your blog posts, for example. [00:01:20] Let's just say you're making one of those with Next.js, you could have a different head for SEO purposes for every single one of your posts. If I were to go back to my [00:01:30] index.js, I could do the exact same thing where I wrap this whole thing in a fragment so that way I can pass it in there like this. [00:01:40] Then if I want to put a head in there like that pasting, instead of using Pokémon, I can just say my Next.js [00:01:50] site like this. For these two pages, the head will be different. If I were to look at this in the browser, [00:02:00] you can see that on this Pokémon route, the actual title of the tab says Pokémon Charmander. Then if I were to go back to our homepage, it has my Next.js [00:02:10] site. It's a very simple API but it's really powerful when you think about using it for SEO purposes. Now we've been navigating between these pages [00:02:20] by just poking around with the URL. Let's talk a little bit more about routing in the next section. [00:02:28]


your progress