All language subtitles for 004 Adding Dynamic _head_ Content_Downloadly.ir_en

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.