We're now exporting a "metadata"
object for our HomePage,
setting the "title",
that we can also see in the browser tab.
But, since we only set it in the HomePage,
obviously it won't apply to other pages.
You can see that for the About page
the browser just shows the URL in the tab name,
and same if we look at the
Reviews page for example.
Only the Home page has a title.
Now, we could add some metadata to each page,
like about,
but we can also add it to the layout,
and it will then apply to all pages.
Let's move this metadata out of the HomePage,
and note that, if we save this change,
the HomePage will no longer show a title.
But now let's go and paste the "metadata"
object into the RootLayout.
And if we save,
the HomePage will have a title again.
But it won't be just the HomePage this time.
If we look at the About page,
we need to reload it, because
of the browser cache,
but you can see that this one
also has the same title.
And of course it will be the same
on the Reviews page as well.
So, putting the "metadata" in the RootLayout
is a good way to set default values
that apply to all pages.
But then we may still want a more
specific "title" for some pages.
For example, let's provide some custom
"metadata" for the AboutPage,
and here we can override the "title"
to say "About" instead.
This way, most pages will still have
"Indie Gamer" as the title,
because that's the default set in the RootLayout,
but if we look at the About page,
this one has its own different title.
So each page can effectively override
the default values set in the layout.
Now, when writing the "title" for a page,
it's common practice to always
include the website name,
in our case "Indie Gamer",
in addition to the page-specific name.
This is useful both for users,
so they can easily tell which
site each tab belongs to,
and for Search Engine Optimization.
But this means we would need to duplicate
this "Indie Gamer" string
in all the pages where we set a custom title.
To avoid this, Next.js provides
a way to define a template.
Instead of setting the "title" as a string,
we can use an object, that has a "default" value.
And then we can add a "template" property
where we can write "%s" followed by "Indie Gamer".
"%s" here is a placeholder
that will be replaced by the page-specific title.
Let's see how it works now.
You can see that the About page shows
"About" followed by "Indie Gamer" twice.
That's because, in the AboutPage,
we were already appending "Indie Gamer",
but if we remove it,
the title is now "About | Indie Gamer".
So, it's inserting the title from this page
into the template string we
defined in the RootLayout.
This means we can more easily set
a custom title on other pages,
like the ReviewsPage.
We can simply change it to "Reviews" here,
and if we save,
the Reviews page should update, if we reload it,
and display "Reviews" followed by "Indie Gamer".
So the template always appends the
website name automatically.
It's a simple feature, but it's quite useful.
Note that the "default" value will still apply
to any page that doesn't have a custom title,
like the HomePage for example.