1
00:00:00,000 --> 00:00:02,000
Now static metadata

2
00:00:02,000 --> 00:00:04,000
as we have it here is often all you need

3
00:00:04,000 --> 00:00:06,000
because for many pages,

4
00:00:06,000 --> 00:00:10,000
the metadata you wanna set might indeed be static

5
00:00:10,000 --> 00:00:14,000
and not change depending on what's shown on the page.

6
00:00:15,000 --> 00:00:17,000
But you also might have some pages

7
00:00:17,000 --> 00:00:20,000
where the metadata does change

8
00:00:20,000 --> 00:00:25,000
and does depend on the dynamic content of the page.

9
00:00:25,000 --> 00:00:28,000
For example, here in my feed folder,

10
00:00:28,000 --> 00:00:32,000
in the page.js file there, I'm showing all my posts.

11
00:00:32,000 --> 00:00:35,000
And of course we could set up some static metadata

12
00:00:35,000 --> 00:00:39,000
here as well, with a title of All Posts

13
00:00:39,000 --> 00:00:44,000
and a description that could be, browse all our posts.

14
00:00:44,000 --> 00:00:48,000
That might be fine and that might be all you need.

15
00:00:48,000 --> 00:00:52,000
But you also might have some dynamic metadata

16
00:00:52,000 --> 00:00:56,000
on some pages, so some metadata that's not always the same,

17
00:00:56,000 --> 00:00:58,000
but that instead should change

18
00:00:58,000 --> 00:01:01,000
as the data on the page changes.

19
00:01:01,000 --> 00:01:04,000
For example, here, we might want a title that says,

20
00:01:04,000 --> 00:01:08,000
browse all our X posts,

21
00:01:08,000 --> 00:01:10,000
where X should be the number of posts.

22
00:01:10,000 --> 00:01:12,000
And of course that number is dynamic.

23
00:01:12,000 --> 00:01:14,000
It's not set in stone

24
00:01:14,000 --> 00:01:17,000
and we definitely don't know it at the point of time

25
00:01:17,000 --> 00:01:20,000
where we're writing this code.

26
00:01:20,000 --> 00:01:23,000
And that's why NextJS also allows you

27
00:01:23,000 --> 00:01:25,000
to set dynamic metadata,

28
00:01:25,000 --> 00:01:30,000
and that's done by not exporting a constant called metadata,

29
00:01:30,000 --> 00:01:34,000
but by instead exporting a function

30
00:01:34,000 --> 00:01:36,000
called generateMetadata.

31
00:01:39,000 --> 00:01:42,000
And that should be an async function.

32
00:01:43,000 --> 00:01:46,000
And of course it must be named generateMetadata

33
00:01:46,000 --> 00:01:49,000
because just as NextJS is looking

34
00:01:49,000 --> 00:01:51,000
for a constant named metadata

35
00:01:51,000 --> 00:01:53,000
or a variable that doesn't matter,

36
00:01:53,000 --> 00:01:56,000
but it must be named metadata, NextJS is looking

37
00:01:56,000 --> 00:01:59,000
for a function named generateMetadata like this

38
00:01:59,000 --> 00:02:02,000
in your page.js files.

39
00:02:02,000 --> 00:02:06,000
And if NextJS then finds such a exported function

40
00:02:06,000 --> 00:02:10,000
with that exact name, it will execute that function

41
00:02:10,000 --> 00:02:13,000
for you when it renders that page.

42
00:02:13,000 --> 00:02:17,000
Now this function will then automatically receive

43
00:02:17,000 --> 00:02:20,000
a configuration object or a data object,

44
00:02:20,000 --> 00:02:22,000
whatever you want to call it.

45
00:02:22,000 --> 00:02:24,000
It will receive that object automatically

46
00:02:24,000 --> 00:02:26,000
because this object with its data

47
00:02:26,000 --> 00:02:29,000
will be passed in by NextJS.

48
00:02:29,000 --> 00:02:32,000
And this object will hold useful information.

49
00:02:32,000 --> 00:02:36,000
For example, any page parameters that might be set

50
00:02:36,000 --> 00:02:40,000
for this page so that you could retrieve dynamic data

51
00:02:40,000 --> 00:02:43,000
if you were on a dynamic page.

52
00:02:43,000 --> 00:02:46,000
But you can, for example, also extract any searchParams

53
00:02:46,000 --> 00:02:49,000
that might be set in case these kinds

54
00:02:49,000 --> 00:02:52,000
of information pieces are important to you

55
00:02:52,000 --> 00:02:54,000
for generating the dynamic metadata.

56
00:02:56,000 --> 00:02:58,000
Now here for this page, I actually don't have

57
00:02:58,000 --> 00:03:01,000
any params or anything like that

58
00:03:01,000 --> 00:03:03,000
because I'm not on a dynamic route.

59
00:03:03,000 --> 00:03:06,000
I don't have a dynamic route segment here.

60
00:03:06,000 --> 00:03:08,000
Instead it's a regular static route,

61
00:03:08,000 --> 00:03:11,000
but I still want dynamic metadata,

62
00:03:11,000 --> 00:03:15,000
therefore I'll still add generateMetadata,

63
00:03:15,000 --> 00:03:18,000
but I don't care about any data passed to it.

64
00:03:18,000 --> 00:03:21,000
But what I do care about is about my posts.

65
00:03:22,000 --> 00:03:25,000
So here I will still get my posts

66
00:03:25,000 --> 00:03:27,000
by calling await getPosts here,

67
00:03:29,000 --> 00:03:31,000
just as I do it in the page component.

68
00:03:32,000 --> 00:03:35,000
So that here I get my posts

69
00:03:35,000 --> 00:03:39,000
and then I get my number of posts by using

70
00:03:39,000 --> 00:03:42,000
or by accessing the length of this posts array.

71
00:03:43,000 --> 00:03:48,000
And then once you're done preparing your dynamic data,

72
00:03:48,000 --> 00:03:51,000
generateMetadata should return an object

73
00:03:51,000 --> 00:03:55,000
where you then still set the title, description,

74
00:03:55,000 --> 00:03:58,000
and any other metadata you wanna set up.

75
00:03:58,000 --> 00:04:01,000
For example, we could still set a static description

76
00:04:01,000 --> 00:04:05,000
of browse all our posts here,

77
00:04:06,000 --> 00:04:10,000
but we could now also set a dynamic title that says,

78
00:04:10,000 --> 00:04:12,000
browse all our,

79
00:04:12,000 --> 00:04:17,000
and then the number of posts which I output here like this

80
00:04:20,000 --> 00:04:23,000
since I'm using a string template.

81
00:04:25,000 --> 00:04:29,000
And that's how we could dynamically generate such a metadata

82
00:04:29,000 --> 00:04:33,000
object here with help of this generateMetadata function.

83
00:04:35,000 --> 00:04:38,000
And that's really all that's to it.

84
00:04:38,000 --> 00:04:41,000
With that all, if I load this feed page,

85
00:04:41,000 --> 00:04:46,000
it will generate as before, but NextJS will now actually

86
00:04:46,000 --> 00:04:50,000
also execute this generateMetadata function here

87
00:04:50,000 --> 00:04:52,000
and set the metadata accordingly.

88
00:04:52,000 --> 00:04:55,000
That's why now after loading this page,

89
00:04:55,000 --> 00:04:58,000
I see the number of posts here in the page title

90
00:04:58,000 --> 00:05:02,000
because that metadata was generated dynamically.