1
00:00:00,000 --> 00:00:03,000
For dynamic pages, you can add metadata

2
00:00:03,000 --> 00:00:08,000
by not exporting a constant or variable named metadata,

3
00:00:08,000 --> 00:00:13,000
but by instead exporting an async function called

4
00:00:13,000 --> 00:00:16,000
generateMetadata.

5
00:00:16,000 --> 00:00:18,000
And it must be called like this

6
00:00:18,000 --> 00:00:21,000
because NextJS is also looking for functions like this.

7
00:00:21,000 --> 00:00:24,000
If it doesn't find any other metadata,

8
00:00:24,000 --> 00:00:27,000
it's checking whether there is such a function,

9
00:00:27,000 --> 00:00:30,000
and if there is such a function, NextJS will execute it

10
00:00:30,000 --> 00:00:33,000
for you and then it's your job

11
00:00:33,000 --> 00:00:36,000
to return such a metadata object in that function.

12
00:00:37,000 --> 00:00:41,000
Now how does that help us with dynamic data?

13
00:00:41,000 --> 00:00:45,000
Well, this function receives the same data

14
00:00:45,000 --> 00:00:48,000
our page component receives as props.

15
00:00:48,000 --> 00:00:52,000
So here we also get an object with a params key,

16
00:00:52,000 --> 00:00:54,000
and that of course allows us to get the meal

17
00:00:54,000 --> 00:00:57,000
for which the metadata should be generated

18
00:00:57,000 --> 00:01:01,000
by simply accessing mealSlug and passing that to getMeal.

19
00:01:03,000 --> 00:01:06,000
Well, and with that, we can then return a title

20
00:01:06,000 --> 00:01:09,000
that's set equal to meal title

21
00:01:09,000 --> 00:01:13,000
and a description that's set to meal.summary,

22
00:01:13,000 --> 00:01:17,000
for example, and that's

23
00:01:17,000 --> 00:01:20,000
how we can generate the metadata for a dynamic page.

24
00:01:22,000 --> 00:01:27,000
With that, if we now visit a meal, we can see its title,

25
00:01:27,000 --> 00:01:30,000
its name represented here in the tab title.

26
00:01:32,000 --> 00:01:35,000
Now if we enter some invalid slug here,

27
00:01:35,000 --> 00:01:39,000
we now get an error though instead of the not found page

28
00:01:39,000 --> 00:01:42,000
because the metadata is actually generated first

29
00:01:42,000 --> 00:01:45,000
and this now simply fails.

30
00:01:45,000 --> 00:01:47,000
When I try to access title on meal,

31
00:01:47,000 --> 00:01:50,000
that fails because meal is undefined.

32
00:01:51,000 --> 00:01:54,000
So therefore we should actually add this if check here,

33
00:01:55,000 --> 00:01:57,000
where we check whether the meal is maybe not defined,

34
00:01:57,000 --> 00:02:00,000
and called the notFound function if it isn't,

35
00:02:00,000 --> 00:02:03,000
inside of generate metadata to ensure

36
00:02:03,000 --> 00:02:05,000
that we show the notFound page if generating

37
00:02:05,000 --> 00:02:08,000
the metadata fails, which it does

38
00:02:08,000 --> 00:02:09,000
if we don't find that meal.

39
00:02:11,000 --> 00:02:13,000
With that, you see that now we get

40
00:02:13,000 --> 00:02:15,000
that meal not found page again,

41
00:02:16,000 --> 00:02:18,000
but that's how we can handle that metadata.