1
00:00:02,000 --> 00:00:04,000
Now, that we learned about this head element

2
00:00:04,000 --> 00:00:08,000
we, of course, don't just want to set our own title

3
00:00:08,000 --> 00:00:10,000
and description for the starting page,

4
00:00:10,000 --> 00:00:12,000
but also for the other pages.

5
00:00:12,000 --> 00:00:14,000
And feel free to do this on your own, of course,

6
00:00:14,000 --> 00:00:18,000
with your titles and descriptions of your choice.

7
00:00:18,000 --> 00:00:22,000
I will start here with events index.js, and then here

8
00:00:22,000 --> 00:00:26,000
in the fragment, maybe here, at this head component.

9
00:00:26,000 --> 00:00:28,000
And of course, therefore, also imported.

10
00:00:28,000 --> 00:00:33,000
So import Head from next/head, like this.

11
00:00:36,000 --> 00:00:38,000
And then here, since this lists all events,

12
00:00:38,000 --> 00:00:40,000
I will give it a title of All Events

13
00:00:40,000 --> 00:00:43,000
and I'll keep this description text.

14
00:00:43,000 --> 00:00:46,000
Of course, we could use a different one but I'll keep that.

15
00:00:46,000 --> 00:00:51,000
Copy this again, go to the event ID page for a single event.

16
00:00:51,000 --> 00:00:55,000
And here, I'll then also add this in my fragment

17
00:00:55,000 --> 00:01:00,000
and add the import, import Head from next/head, like this.

18
00:01:02,000 --> 00:01:05,000
And, with that again, fine tune this.

19
00:01:05,000 --> 00:01:07,000
And here, the title should actually

20
00:01:07,000 --> 00:01:09,000
be the title of the selected event.

21
00:01:10,000 --> 00:01:13,000
Now, the great thing is since we used that

22
00:01:13,000 --> 00:01:17,000
in our regular page component JSX code,

23
00:01:17,000 --> 00:01:22,000
we can, of course, also inject dynamic content here.

24
00:01:22,000 --> 00:01:24,000
So, instead of hard coding the title

25
00:01:24,000 --> 00:01:26,000
we can use event.title here

26
00:01:26,000 --> 00:01:29,000
to use the title of the selected event.

27
00:01:29,000 --> 00:01:31,000
This is, of course, very important

28
00:01:31,000 --> 00:01:34,000
because this ensures that we don't have

29
00:01:34,000 --> 00:01:37,000
to hard code all that head data in advance,

30
00:01:37,000 --> 00:01:42,000
but that since we added to the regular component JSX code

31
00:01:42,000 --> 00:01:47,000
that we can, of course, also use a lot of dynamic values

32
00:01:47,000 --> 00:01:50,000
for the content, so for the description here,

33
00:01:50,000 --> 00:01:53,000
we could therefore, for example, also use event.description.

34
00:01:55,000 --> 00:01:57,000
So, that is very, very useful.

35
00:01:58,000 --> 00:02:01,000
And with that, if I go to the slug here

36
00:02:01,000 --> 00:02:06,000
I also want to add this, add it down there.

37
00:02:07,000 --> 00:02:10,000
And therefore also import this from next.

38
00:02:10,000 --> 00:02:15,000
So, import Head from next/head, like this.

39
00:02:16,000 --> 00:02:21,000
And also, set a title, and a description here.

40
00:02:21,000 --> 00:02:24,000
So, here I'll say filtered Events.

41
00:02:24,000 --> 00:02:26,000
And then here we could, of course,

42
00:02:26,000 --> 00:02:29,000
again use a dynamic value for the description

43
00:02:29,000 --> 00:02:32,000
and kind of construct a dynamic text

44
00:02:32,000 --> 00:02:36,000
where we say All events for,

45
00:02:36,000 --> 00:02:38,000
and then I want to use the actual month,

46
00:02:38,000 --> 00:02:41,000
and year that was selected.

47
00:02:41,000 --> 00:02:46,000
So, I'll just output for numMonth/numYear.

48
00:02:49,000 --> 00:02:51,000
And, of course, you can fine tune this text

49
00:02:51,000 --> 00:02:55,000
and format this date however you want.

50
00:02:55,000 --> 00:02:58,000
But, with that, if we save all those different page files,

51
00:02:58,000 --> 00:03:00,000
if I go to all events, for example,

52
00:03:00,000 --> 00:03:03,000
and I search for events in May,

53
00:03:03,000 --> 00:03:07,000
we see that if I inspect the rendered page

54
00:03:07,000 --> 00:03:10,000
in the head section we have that title

55
00:03:10,000 --> 00:03:14,000
and we have that description with that content

56
00:03:14,000 --> 00:03:16,000
that contains the month and year.

57
00:03:17,000 --> 00:03:20,000
Now, it's also worth noting that we don't just see

58
00:03:20,000 --> 00:03:23,000
this head content in the actual rendered page,

59
00:03:23,000 --> 00:03:25,000
which we see here when we inspect it,

60
00:03:25,000 --> 00:03:28,000
but also in the response from the server.

61
00:03:28,000 --> 00:03:30,000
If we go back to the starting page,

62
00:03:30,000 --> 00:03:34,000
if we reload this page and we then view the page source,

63
00:03:34,000 --> 00:03:38,000
so that we now fetched a brand new page from the server,

64
00:03:38,000 --> 00:03:40,000
we also find the title in here

65
00:03:40,000 --> 00:03:43,000
and we also find the description in here.

66
00:03:43,000 --> 00:03:47,000
So, that is really part of the response, which is important

67
00:03:47,000 --> 00:03:50,000
because that means that search engines will see it.

68
00:03:51,000 --> 00:03:55,000
Now you might notice, though, that if you filter for events,

69
00:03:55,000 --> 00:03:58,000
if we set a filter here and we find our events,

70
00:03:58,000 --> 00:04:02,000
here, if we reload this page in the page source

71
00:04:02,000 --> 00:04:05,000
we don't see the title and the description

72
00:04:05,000 --> 00:04:09,000
and that's not a (indistinct) but it has a simple reason.

73
00:04:09,000 --> 00:04:14,000
In our slug page, here, we do add a head,

74
00:04:14,000 --> 00:04:18,000
but we only add it here in the main content,

75
00:04:18,000 --> 00:04:21,000
which we return if we make it past all these

76
00:04:21,000 --> 00:04:23,000
if checks we have in front of it.

77
00:04:23,000 --> 00:04:26,000
Now, if we make it into one of those if checks

78
00:04:26,000 --> 00:04:30,000
to show the loading text, or to show this error,

79
00:04:30,000 --> 00:04:35,000
or to show another error, then we didn't add head here.

80
00:04:35,000 --> 00:04:37,000
And, of course, we can add head here.

81
00:04:37,000 --> 00:04:40,000
And we probably would want to add head here

82
00:04:40,000 --> 00:04:45,000
to set specific different titles for these cases.

83
00:04:45,000 --> 00:04:47,000
But you also might want to set up

84
00:04:47,000 --> 00:04:52,000
some general head content, which is part of every page.

85
00:04:52,000 --> 00:04:53,000
And, of course, you can do that

86
00:04:53,000 --> 00:04:56,000
by including it in every page,

87
00:04:56,000 --> 00:04:59,000
but that involves a lot of copy and pasting.

88
00:04:59,000 --> 00:05:02,000
And therefore, let's now have a look at the different ways

89
00:05:02,000 --> 00:05:07,000
and tools Next.js gives us for reusing logic,

90
00:05:07,000 --> 00:05:11,000
or reusing configuration, like certain head elements

91
00:05:11,000 --> 00:05:15,000
across all pages without having to copy them around.