Jamstack Explorers

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