1
00:00:02,000 --> 00:00:03,000
Now for this course section,

2
00:00:03,000 --> 00:00:08,000
I will actually use that little events project we worked on.

3
00:00:08,000 --> 00:00:11,000
So attached you find the latest snapshot of this.

4
00:00:11,000 --> 00:00:13,000
If you download it, you need to run npm install.

5
00:00:13,000 --> 00:00:15,000
And then once you did that,

6
00:00:15,000 --> 00:00:19,000
bring up the development server with npm run dev.

7
00:00:19,000 --> 00:00:21,000
This will give you this application year

8
00:00:21,000 --> 00:00:25,000
and that's what we worked on over the last course sections.

9
00:00:25,000 --> 00:00:28,000
Now the first aspect into which I want to dive here

10
00:00:28,000 --> 00:00:33,000
is the metadata that had data we could add to every page

11
00:00:33,000 --> 00:00:36,000
because if we inspect our page here

12
00:00:36,000 --> 00:00:40,000
and we have a look not at the body but at the head section,

13
00:00:40,000 --> 00:00:44,000
which carries important metadata and information

14
00:00:44,000 --> 00:00:47,000
for the browser and for search engines,

15
00:00:47,000 --> 00:00:51,000
then we see that it's pretty empty.

16
00:00:51,000 --> 00:00:53,000
We got no description here.

17
00:00:53,000 --> 00:00:55,000
We have no title for this page.

18
00:00:55,000 --> 00:00:57,000
We've got a bunch of imports,

19
00:00:57,000 --> 00:00:58,000
which are added automatically

20
00:00:58,000 --> 00:01:02,000
by next JS for all our styles and so on

21
00:01:02,000 --> 00:01:05,000
but we don't have that metadata,

22
00:01:05,000 --> 00:01:09,000
that extra data which we typically want to provide

23
00:01:09,000 --> 00:01:10,000
on our page.

24
00:01:10,000 --> 00:01:12,000
And, of course, that is something

25
00:01:12,000 --> 00:01:14,000
which we definitely do want to have

26
00:01:14,000 --> 00:01:16,000
on the application we're building

27
00:01:16,000 --> 00:01:19,000
because that enhances the user experience

28
00:01:19,000 --> 00:01:20,000
to a certain extent,

29
00:01:20,000 --> 00:01:23,000
depending on what we set there.

30
00:01:23,000 --> 00:01:23,000
For example,

31
00:01:23,000 --> 00:01:27,000
showing a title which would show up in a tab up there

32
00:01:27,000 --> 00:01:30,000
but it's also crucial for search engines

33
00:01:30,000 --> 00:01:32,000
because search engine crawlers

34
00:01:32,000 --> 00:01:36,000
like the Google crawler will have a look at the title

35
00:01:36,000 --> 00:01:39,000
and the description set in that metadata.

36
00:01:39,000 --> 00:01:42,000
And therefore, it is something we want to set.

37
00:01:42,000 --> 00:01:47,000
And thankfully, next JS makes setting such head data easy.