1
00:00:02,000 --> 00:00:04,000
If you want to add content

2
00:00:04,000 --> 00:00:07,000
between the head tags on your page,

3
00:00:07,000 --> 00:00:11,000
you can easily do that in Next.js applications

4
00:00:11,000 --> 00:00:13,000
with help of a special component.

5
00:00:13,000 --> 00:00:15,000
Let's say on our homepage

6
00:00:15,000 --> 00:00:18,000
so this Index.js file in the Pages folder.

7
00:00:18,000 --> 00:00:22,000
Let's say we wanna add extra information

8
00:00:22,000 --> 00:00:24,000
to that head section.

9
00:00:24,000 --> 00:00:26,000
We can do that by importing

10
00:00:26,000 --> 00:00:29,000
a special component exposed by Next.js.

11
00:00:29,000 --> 00:00:34,000
The head component which we import from next/head like this.

12
00:00:35,000 --> 00:00:40,000
So where we imported link from next/link

13
00:00:43,000 --> 00:00:46,000
we now import head from next/head.

14
00:00:46,000 --> 00:00:50,000
That's a special component which you can add anywhere

15
00:00:50,000 --> 00:00:54,000
in your JSX code for a given component.

16
00:00:54,000 --> 00:00:58,000
So here we don't have to add it at the top level.

17
00:00:58,000 --> 00:01:00,000
We can go into the stiff here

18
00:01:00,000 --> 00:01:03,000
and add the head component here.

19
00:01:03,000 --> 00:01:07,000
And please note, it's Head written like this

20
00:01:07,000 --> 00:01:08,000
with a capital H.

21
00:01:08,000 --> 00:01:11,000
It's not head written like this.

22
00:01:11,000 --> 00:01:14,000
This would not have the effect we want.

23
00:01:14,000 --> 00:01:17,000
We need head written like this

24
00:01:18,000 --> 00:01:20,000
because now you can add

25
00:01:20,000 --> 00:01:25,000
your typical head section HTML elements

26
00:01:25,000 --> 00:01:30,000
between those special head tags and Next.js will inject them

27
00:01:30,000 --> 00:01:33,000
into the head section of the page.

28
00:01:33,000 --> 00:01:36,000
So if I, for example, add a title here

29
00:01:36,000 --> 00:01:40,000
which is a typical HTML element for the head section,

30
00:01:40,000 --> 00:01:45,000
we could set the title to Next.js events here

31
00:01:45,000 --> 00:01:46,000
or whatever you want.

32
00:01:46,000 --> 00:01:49,000
And if you do so and save this,

33
00:01:49,000 --> 00:01:52,000
if you go back to the starting page, if I reload,

34
00:01:52,000 --> 00:01:55,000
you now see in the tab here it shows our title.

35
00:01:55,000 --> 00:01:58,000
And if I inspected this page

36
00:01:58,000 --> 00:02:00,000
and I have a look at the head section here,

37
00:02:00,000 --> 00:02:04,000
we indeed see the title was added.

38
00:02:04,000 --> 00:02:07,000
So Next.js injects the content which we add

39
00:02:07,000 --> 00:02:11,000
between those head tags into the real head part

40
00:02:11,000 --> 00:02:13,000
of the rendered page.

41
00:02:14,000 --> 00:02:17,000
And of course we're not restricted to the title.

42
00:02:17,000 --> 00:02:21,000
We can also add meta tags here, meta elements.

43
00:02:21,000 --> 00:02:23,000
These can always be self-closing

44
00:02:23,000 --> 00:02:25,000
since they have no content between the tags

45
00:02:25,000 --> 00:02:30,000
and then, for example, add our description tag here

46
00:02:32,000 --> 00:02:37,000
with a content of find a lot of great events

47
00:02:38,000 --> 00:02:43,000
that allow you to evolve, whatever.

48
00:02:43,000 --> 00:02:44,000
Something like this.

49
00:02:44,000 --> 00:02:46,000
Maybe you'll find a better description

50
00:02:46,000 --> 00:02:49,000
but we can add such a meta tag here

51
00:02:49,000 --> 00:02:52,000
and now if we inspect the rendered page,

52
00:02:52,000 --> 00:02:55,000
we see that in the head now all those added.

53
00:02:55,000 --> 00:02:58,000
And that would be a special tag,

54
00:02:58,000 --> 00:03:01,000
this meta tag here with a name of description.

55
00:03:01,000 --> 00:03:05,000
That would be a tag which does matter to search engines

56
00:03:05,000 --> 00:03:08,000
because in the end this here, this description text

57
00:03:08,000 --> 00:03:11,000
which we added to the content attribute,

58
00:03:11,000 --> 00:03:14,000
that is the text that would show up in a search result

59
00:03:14,000 --> 00:03:18,000
when your page is showing up in Google search, for example.

60
00:03:18,000 --> 00:03:23,000
So that matters and here between these special head tags,

61
00:03:23,000 --> 00:03:25,000
so instead of this special head element,

62
00:03:25,000 --> 00:03:30,000
you can really add any HTML elements that would normally go

63
00:03:30,000 --> 00:03:33,000
into the head section of your page.

64
00:03:33,000 --> 00:03:36,000
And that allows you to fine tune and configure

65
00:03:36,000 --> 00:03:39,000
what should show up in that head section.