We introduced a custom App component,
where we keep the common elements
so that in each page
we only keep the parts
that are specific to that page.
Now, there's something else
that we typically want to add to each page.
And that's a title.
You can see that at the moment,
the browser tab simply displays the URL.
And it's the same if we look
at the About page as well.
That's because in our pages
at the moment we don't define a title.
And I mean the "title" element
that you can put inside the "head" tag
in the HTML.
It's simply not present in here.
How can we add a title to each page?
It's slightly tricky because
our components are usually rendered
inside the body of the document.
But in this case we need
to add something to the head of the HTML.
Thankfully Next.js provides
a "Head" component
that we can use
exactly for this purpose.
We can put this "Head" component
wherever we want inside our JSX elements.
And anything we write inside here
will be added to the document "head".
So we can use this to set a "title",
for example "My Blog".
And once we save this,
you can see that
the title in the browser tab
changed to "My Blog".
Also, if we go and look inside
the document "head"
there is now a "title" element,
exactly as we wrote it in our component.
This can be used to set any elements
that go inside the "head",
so in addition to the "title"
we could set a "meta" tag
with a "description"
which is something that can be useful
for search engines.
Let's just write "This is my blog",
as an example.
And that "meta" tag is of course added
to the document head.
It's been added dynamically here,
because we're running in dev mode,
but remember that Next.js will build
static HTML pages for production
so this tag will be present
in the static HTML,
which will be used by search engines.
Anyway, for this simple blog
we don't really need to worry about SEO.
Let's just keep the "title".
Ok. Now let's go and add the same
to the About page as well.
Let me show that page in the browser.
So we can paste our "Head" section.
And we can simply change the title
to say "About".
We also need to import
this "Head" component.
And that should be that.
You can see our new title
displayed in the browser tab,
just as we expected.
Note that the title
will also change dynamically
when we navigate from one page
to the other.
Even though, as we've seen
this kind of navigation happens client-side
without reloading the HTML page from the server
the Next.js Head component
will dynamically update the values
inside the document "head".
And that's all for this video.
The Head component is
very simple to use,
but also very useful
for setting the page title
and other meta tags.