1
00:00:03,000 --> 00:00:06,208
To recap, we created this FirstPostPage,

2
00:00:06,708 --> 00:00:09,236
but we'd like to load the content

3
00:00:09,236 --> 00:00:11,686
to be displayed inside that page

4
00:00:11,686 --> 00:00:13,524
from this Markdown file.

5
00:00:14,178 --> 00:00:15,922
To get there step by step,

6
00:00:15,922 --> 00:00:19,007
let's leave the Markdown aside for the moment.

7
00:00:19,575 --> 00:00:21,109
And instead look at

8
00:00:21,109 --> 00:00:23,127
how we can load some data

9
00:00:23,127 --> 00:00:24,742
into a Next.js page.

10
00:00:24,742 --> 00:00:26,680
It doesn't really matter

11
00:00:26,680 --> 00:00:28,538
if that data comes from

12
00:00:28,538 --> 00:00:30,314
a local Markdown file,

13
00:00:30,314 --> 00:00:31,768
or somewhere else,

14
00:00:31,768 --> 00:00:33,463
like an external API.

15
00:00:34,529 --> 00:00:36,628
We know that a Next.js page

16
00:00:36,628 --> 00:00:38,262
is a React component,

17
00:00:38,840 --> 00:00:40,697
and you should also know that

18
00:00:40,697 --> 00:00:43,322
we can pass "props" to a React component.

19
00:00:43,887 --> 00:00:45,271
Let's log those props

20
00:00:45,271 --> 00:00:47,315
when the component is rendered.

21
00:00:47,953 --> 00:00:49,285
At the moment, props is

22
00:00:49,285 --> 00:00:50,503
just an empty object,

23
00:00:51,060 --> 00:00:52,915
in other words, there no props

24
00:00:52,915 --> 00:00:54,410
passed to this component.

25
00:00:54,969 --> 00:00:57,824
Which is perhaps not surprising because

26
00:00:57,824 --> 00:00:59,653
this component is a page,

27
00:00:59,653 --> 00:01:01,995
so in a sense it's the top-level

28
00:01:01,995 --> 00:01:04,117
component of our application.

29
00:01:04,117 --> 00:01:06,605
There's nothing passing props down

30
00:01:06,605 --> 00:01:07,923
to this component.

31
00:01:08,789 --> 00:01:11,757
But in Next.js there is a actually a way

32
00:01:11,757 --> 00:01:14,429
for us to pass some props to a page,

33
00:01:14,429 --> 00:01:17,620
which is useful precisely to load some data

34
00:01:17,620 --> 00:01:20,514
that can then be displayed in the page.

35
00:01:21,236 --> 00:01:23,272
To do that we need to create

36
00:01:23,272 --> 00:01:25,744
a function named "getStaticProps".

37
00:01:26,316 --> 00:01:28,875
And this function needs to be exported,

38
00:01:29,375 --> 00:01:30,513
and also "async".

39
00:01:31,775 --> 00:01:33,388
Because loading data is

40
00:01:33,388 --> 00:01:35,352
usually done asynchronously,

41
00:01:35,352 --> 00:01:38,018
so it makes sense to return a Promise.

42
00:01:38,659 --> 00:01:41,066
Now, this function returns an object,

43
00:01:41,759 --> 00:01:43,063
or, more accurately,

44
00:01:43,063 --> 00:01:44,564
a Promise of an object,

45
00:01:44,564 --> 00:01:45,673
since it's async.

46
00:01:46,304 --> 00:01:47,928
And this object contains

47
00:01:47,928 --> 00:01:50,093
the "props" that we want to pass

48
00:01:50,093 --> 00:01:51,582
to our page component.

49
00:01:52,218 --> 00:01:54,750
As "props" we can pass whatever we want,

50
00:01:54,750 --> 00:01:57,535
so let's start with a couple of test values.

51
00:01:59,718 --> 00:02:00,838
And if we save this now,

52
00:02:01,551 --> 00:02:03,574
we need to reload the page,

53
00:02:03,574 --> 00:02:06,573
because those props are set server-side.

54
00:02:07,147 --> 00:02:09,878
But you can see in the browser console that

55
00:02:09,878 --> 00:02:12,165
the FirstPostPage component received

56
00:02:12,728 --> 00:02:14,107
the value we returned

57
00:02:14,107 --> 00:02:16,273
in our "getStaticProps" function.

58
00:02:16,838 --> 00:02:18,229
Ok, now that we know

59
00:02:18,229 --> 00:02:19,411
how to pass props

60
00:02:20,004 --> 00:02:21,581
we can use this to pass

61
00:02:21,581 --> 00:02:22,677
the "post" data.

62
00:02:23,246 --> 00:02:25,427
Each post can have a "title",

63
00:02:25,427 --> 00:02:26,780
like "First Post",

64
00:02:27,812 --> 00:02:29,801
and then let's call it the "body"

65
00:02:30,512 --> 00:02:32,362
will contain the main content

66
00:02:32,362 --> 00:02:33,256
for this post,

67
00:02:33,819 --> 00:02:35,840
Let's specify that this comes

68
00:02:35,840 --> 00:02:37,094
from static props,

69
00:02:37,663 --> 00:02:38,811
so it will be clearer

70
00:02:38,811 --> 00:02:40,450
once we load it into the page.

71
00:02:41,004 --> 00:02:42,710
And if we reload the page,

72
00:02:43,210 --> 00:02:44,710
of course we should see

73
00:02:44,710 --> 00:02:47,188
our post object received in the props.

74
00:02:47,754 --> 00:02:49,886
Ok. At this point we can use

75
00:02:49,886 --> 00:02:52,323
that post data in our component.

76
00:02:52,900 --> 00:02:54,776
We can extract the "post" prop,

77
00:02:54,776 --> 00:02:56,834
since it's the only one we expect.

78
00:02:57,500 --> 00:02:58,672
And then replace,

79
00:02:58,672 --> 00:03:00,741
anywhere we wrote "First Post"

80
00:03:01,310 --> 00:03:02,981
with the "post.title".

81
00:03:04,310 --> 00:03:05,870
While inside this paragraph

82
00:03:05,870 --> 00:03:06,911
we want to display

83
00:03:07,468 --> 00:03:08,622
the "post.body".

84
00:03:09,634 --> 00:03:10,287
So with this,

85
00:03:11,001 --> 00:03:13,987
you can see that the page is now displaying

86
00:03:13,987 --> 00:03:16,279
"My first post, as static props".

87
00:03:16,849 --> 00:03:18,821
It updated using Fast Refresh

88
00:03:18,821 --> 00:03:20,385
but it will be the same

89
00:03:20,385 --> 00:03:22,561
if we reload the page of course.

90
00:03:23,197 --> 00:03:26,124
Ok. So this is how we can pass props

91
00:03:26,124 --> 00:03:28,645
to a page component in Next.js.

92
00:03:28,645 --> 00:03:31,248
So far we hard-coded these props

93
00:03:31,248 --> 00:03:34,257
inside our "getStaticProps" function,

94
00:03:34,257 --> 00:03:36,127
but later on we'll load

95
00:03:36,127 --> 00:03:39,136
the post data from our Markdown file.

96
00:03:39,136 --> 00:03:41,495
Before we get to that though,

97
00:03:41,495 --> 00:03:44,423
in the next video I want to show you

98
00:03:44,423 --> 00:03:45,561
in more detail

99
00:03:45,561 --> 00:03:47,594
how getStaticProps works,

100
00:03:47,594 --> 00:03:51,173
in terms of when Next.js calls that function

101
00:03:51,173 --> 00:03:54,751
and also why it's called get "static" props.