If you want to add content
between the head tags on your page,
you can easily do that in Next.js applications
with help of a special component.
Let's say on our homepage
so this Index.js file in the Pages folder.
Let's say we wanna add extra information
to that head section.
We can do that by importing
a special component exposed by Next.js.
The head component which we import from next/head like this.
So where we imported link from next/link
we now import head from next/head.
That's a special component which you can add anywhere
in your JSX code for a given component.
So here we don't have to add it at the top level.
We can go into the stiff here
and add the head component here.
And please note, it's Head written like this
with a capital H.
It's not head written like this.
This would not have the effect we want.
We need head written like this
because now you can add
your typical head section HTML elements
between those special head tags and Next.js will inject them
into the head section of the page.
So if I, for example, add a title here
which is a typical HTML element for the head section,
we could set the title to Next.js events here
or whatever you want.
And if you do so and save this,
if you go back to the starting page, if I reload,
you now see in the tab here it shows our title.
And if I inspected this page
and I have a look at the head section here,
we indeed see the title was added.
So Next.js injects the content which we add
between those head tags into the real head part
of the rendered page.
And of course we're not restricted to the title.
We can also add meta tags here, meta elements.
These can always be self-closing
since they have no content between the tags
and then, for example, add our description tag here
with a content of find a lot of great events
that allow you to evolve, whatever.
Something like this.
Maybe you'll find a better description
but we can add such a meta tag here
and now if we inspect the rendered page,
we see that in the head now all those added.
And that would be a special tag,
this meta tag here with a name of description.
That would be a tag which does matter to search engines
because in the end this here, this description text
which we added to the content attribute,
that is the text that would show up in a search result
when your page is showing up in Google search, for example.
So that matters and here between these special head tags,
so instead of this special head element,
you can really add any HTML elements that would normally go
into the head section of your page.
And that allows you to fine tune and configure
what should show up in that head section.