Now, that we learned about this head element
we, of course, don't just want to set our own title
and description for the starting page,
but also for the other pages.
And feel free to do this on your own, of course,
with your titles and descriptions of your choice.
I will start here with events index.js, and then here
in the fragment, maybe here, at this head component.
And of course, therefore, also imported.
So import Head from next/head, like this.
And then here, since this lists all events,
I will give it a title of All Events
and I'll keep this description text.
Of course, we could use a different one but I'll keep that.
Copy this again, go to the event ID page for a single event.
And here, I'll then also add this in my fragment
and add the import, import Head from next/head, like this.
And, with that again, fine tune this.
And here, the title should actually
be the title of the selected event.
Now, the great thing is since we used that
in our regular page component JSX code,
we can, of course, also inject dynamic content here.
So, instead of hard coding the title
we can use event.title here
to use the title of the selected event.
This is, of course, very important
because this ensures that we don't have
to hard code all that head data in advance,
but that since we added to the regular component JSX code
that we can, of course, also use a lot of dynamic values
for the content, so for the description here,
we could therefore, for example, also use event.description.
So, that is very, very useful.
And with that, if I go to the slug here
I also want to add this, add it down there.
And therefore also import this from next.
So, import Head from next/head, like this.
And also, set a title, and a description here.
So, here I'll say filtered Events.
And then here we could, of course,
again use a dynamic value for the description
and kind of construct a dynamic text
where we say All events for,
and then I want to use the actual month,
and year that was selected.
So, I'll just output for numMonth/numYear.
And, of course, you can fine tune this text
and format this date however you want.
But, with that, if we save all those different page files,
if I go to all events, for example,
and I search for events in May,
we see that if I inspect the rendered page
in the head section we have that title
and we have that description with that content
that contains the month and year.
Now, it's also worth noting that we don't just see
this head content in the actual rendered page,
which we see here when we inspect it,
but also in the response from the server.
If we go back to the starting page,
if we reload this page and we then view the page source,
so that we now fetched a brand new page from the server,
we also find the title in here
and we also find the description in here.
So, that is really part of the response, which is important
because that means that search engines will see it.
Now you might notice, though, that if you filter for events,
if we set a filter here and we find our events,
here, if we reload this page in the page source
we don't see the title and the description
and that's not a (indistinct) but it has a simple reason.
In our slug page, here, we do add a head,
but we only add it here in the main content,
which we return if we make it past all these
if checks we have in front of it.
Now, if we make it into one of those if checks
to show the loading text, or to show this error,
or to show another error, then we didn't add head here.
And, of course, we can add head here.
And we probably would want to add head here
to set specific different titles for these cases.
But you also might want to set up
some general head content, which is part of every page.
And, of course, you can do that
by including it in every page,
but that involves a lot of copy and pasting.
And therefore, let's now have a look at the different ways
and tools Next.js gives us for reusing logic,
or reusing configuration, like certain head elements
across all pages without having to copy them around.