All language subtitles for 002 Title Template_en

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.