1
00:00:03,000 --> 00:00:04,094
Now that we know

2
00:00:04,094 --> 00:00:05,939
how "getStaticProps" works,

3
00:00:06,509 --> 00:00:09,082
let's go back to our original plan,

4
00:00:09,082 --> 00:00:11,287
that was to load the post data

5
00:00:11,287 --> 00:00:13,052
from this Markdown file.

6
00:00:13,052 --> 00:00:15,037
To take one step at a time,

7
00:00:15,037 --> 00:00:16,875
in this video we'll focus

8
00:00:16,875 --> 00:00:18,860
only on how to read a file,

9
00:00:18,860 --> 00:00:21,874
and leave parsing the Markdown for later.

10
00:00:22,815 --> 00:00:24,598
So for now let's assume

11
00:00:24,598 --> 00:00:27,775
we want to load the data from a JSON file

12
00:00:27,775 --> 00:00:29,713
called "first-post.json".

13
00:00:30,367 --> 00:00:32,362
This will contain a JSON object

14
00:00:32,362 --> 00:00:33,778
with our post details,

15
00:00:33,778 --> 00:00:34,936
that is the title,

16
00:00:35,564 --> 00:00:36,464
and the body,

17
00:00:36,464 --> 00:00:38,955
that for now can be some simple text

18
00:00:40,265 --> 00:00:42,132
but let's write that this is

19
00:00:42,132 --> 00:00:43,265
"in a JSON file",

20
00:00:43,265 --> 00:00:45,399
so we'll see something different

21
00:00:45,399 --> 00:00:46,932
when we load this data.

22
00:00:47,633 --> 00:00:49,726
Ok. Starting with a JSON file

23
00:00:49,726 --> 00:00:52,107
simplifies our task a little bit,

24
00:00:52,679 --> 00:00:55,528
in that now we just need to figure out

25
00:00:55,528 --> 00:00:58,076
how to read a file from this code.

26
00:00:58,076 --> 00:01:00,100
Now, if this code was meant

27
00:01:00,100 --> 00:01:01,974
to run inside the browser

28
00:01:01,974 --> 00:01:04,221
it wouldn't really be possible

29
00:01:04,221 --> 00:01:05,721
to read a local file

30
00:01:05,721 --> 00:01:07,670
that's inside our project.

31
00:01:07,670 --> 00:01:11,193
But remember that the "getStaticProps" function

32
00:01:11,193 --> 00:01:12,617
runs on the server,

33
00:01:13,716 --> 00:01:16,213
which really means in Node.js,

34
00:01:16,213 --> 00:01:18,625
so in our function we can use

35
00:01:18,625 --> 00:01:21,371
any the APIs provided by Node.js.

36
00:01:22,037 --> 00:01:24,425
And Node.js provides a module

37
00:01:24,425 --> 00:01:27,471
call "File system, or "fs" for short,

38
00:01:28,054 --> 00:01:29,587
which includes a function

39
00:01:29,587 --> 00:01:30,691
called "readFile",

40
00:01:30,691 --> 00:01:32,961
that does exactly what the name says.

41
00:01:33,584 --> 00:01:34,875
So let's see how to use

42
00:01:34,875 --> 00:01:36,335
this function in our code.

43
00:01:37,950 --> 00:01:40,381
First we want to import that function

44
00:01:40,381 --> 00:01:41,761
from the 'fs' module,

45
00:01:41,761 --> 00:01:44,062
and I'll use the "promises" variant

46
00:01:44,062 --> 00:01:45,573
that's more convenient.

47
00:01:46,271 --> 00:01:48,076
So that module should contain

48
00:01:48,076 --> 00:01:49,818
a function named "readFile".

49
00:01:51,403 --> 00:01:53,810
Now we can call "readFile" here

50
00:01:55,103 --> 00:01:56,307
and we want to pass it

51
00:01:56,307 --> 00:01:57,457
the path to the file,

52
00:01:58,012 --> 00:01:59,813
which is under the "content"

53
00:01:59,813 --> 00:02:01,357
and then "posts" folders

54
00:02:01,357 --> 00:02:02,580
inside our project.

55
00:02:03,209 --> 00:02:05,788
so the path is "content/posts"

56
00:02:05,788 --> 00:02:07,421
"/first-post.json".

57
00:02:07,421 --> 00:02:11,032
And this is relative to the project folder

58
00:02:11,032 --> 00:02:14,214
because that's where the server runs.

59
00:02:14,972 --> 00:02:17,728
We also need to pass a second argument

60
00:02:17,728 --> 00:02:19,759
with the character encoding,

61
00:02:19,759 --> 00:02:21,210
in this case "utf8".

62
00:02:21,855 --> 00:02:23,528
Now, this function returns

63
00:02:23,528 --> 00:02:25,201
the data inside that file,

64
00:02:25,765 --> 00:02:27,125
but it's asynchronous

65
00:02:27,125 --> 00:02:29,261
so we need to "await" the result.

66
00:02:29,825 --> 00:02:31,420
Let's quickly log the data,

67
00:02:31,420 --> 00:02:32,659
so we can see exactly

68
00:02:32,659 --> 00:02:34,253
what that function returns.

69
00:02:36,758 --> 00:02:38,045
Let me show the server logs,

70
00:02:39,358 --> 00:02:40,997
and if we reload this page

71
00:02:41,497 --> 00:02:43,260
you can see that the "data"

72
00:02:43,260 --> 00:02:45,870
is in fact the content of the JSON file,

73
00:02:45,870 --> 00:02:46,849
as we expected.

74
00:02:47,479 --> 00:02:49,339
Ok. So at this point we can

75
00:02:49,339 --> 00:02:50,854
get the "post" details

76
00:02:52,512 --> 00:02:55,170
simply by parsing that JSON data.

77
00:02:55,678 --> 00:02:57,796
and that "post" object is what

78
00:02:57,796 --> 00:02:59,985
we want to return in our props,

79
00:02:59,985 --> 00:03:02,455
instead of these hard-coded values.

80
00:03:03,244 --> 00:03:04,265
Let's see if this works.

81
00:03:05,444 --> 00:03:06,966
I'll show the server logs as well.

82
00:03:09,010 --> 00:03:10,818
And if we reload the page now,

83
00:03:11,318 --> 00:03:13,115
we can see that it displays

84
00:03:13,115 --> 00:03:15,244
"My first post, in a JSON file",

85
00:03:15,244 --> 00:03:18,371
so it's clearly reading the data from the file.

86
00:03:19,004 --> 00:03:20,476
Of course the server logs

87
00:03:20,476 --> 00:03:21,771
printed the same data.

88
00:03:22,329 --> 00:03:24,363
Let's stop here for this video.

89
00:03:24,363 --> 00:03:27,445
This is how we can read data from a local file.

90
00:03:28,010 --> 00:03:30,188
But, perhaps more importantly,

91
00:03:30,188 --> 00:03:31,639
we've also seen that

92
00:03:31,639 --> 00:03:33,961
in our "getStaticProps" function

93
00:03:33,961 --> 00:03:36,501
we can use any of the functionality

94
00:03:36,501 --> 00:03:37,953
provided by Node.js.

95
00:03:37,953 --> 00:03:41,001
Because this code only runs on the server.