1
00:00:03,000 --> 00:00:05,846
We made our PostPage a dynamic route,

2
00:00:05,846 --> 00:00:08,848
so the same page component will be used

3
00:00:08,848 --> 00:00:10,233
for all the posts.

4
00:00:10,887 --> 00:00:12,798
And the "paths" we return

5
00:00:12,798 --> 00:00:15,246
in the "getStaticPaths" function

6
00:00:15,246 --> 00:00:16,928
will inform Next.js of

7
00:00:16,928 --> 00:00:18,993
which posts actually exist.

8
00:00:18,993 --> 00:00:21,058
But why do we need to write

9
00:00:21,058 --> 00:00:23,505
each post slug manually in here?

10
00:00:24,387 --> 00:00:27,400
We could just look at the "content/posts" folder,

11
00:00:27,400 --> 00:00:29,674
see which Markdown files it contains,

12
00:00:30,235 --> 00:00:31,999
and generate the list of

13
00:00:31,999 --> 00:00:33,983
static paths automatically.

14
00:00:33,983 --> 00:00:36,775
This way if we add more Markdown files

15
00:00:36,775 --> 00:00:40,375
they will automatically be visible as post pages.

16
00:00:41,095 --> 00:00:43,402
This is exactly what we'll do in this video.

17
00:00:44,228 --> 00:00:46,605
Just like we have a "getPost" function

18
00:00:46,605 --> 00:00:48,294
that reads a Markdown file,

19
00:00:48,856 --> 00:00:50,617
we can add another function

20
00:00:50,617 --> 00:00:52,444
that will list all the files

21
00:00:52,444 --> 00:00:54,074
and return their "slugs".

22
00:00:54,704 --> 00:00:57,012
Now, how do we get a list of files?

23
00:00:57,512 --> 00:00:59,296
In addition to "readFile"

24
00:00:59,296 --> 00:01:01,510
the Node.js file system modules

25
00:01:01,510 --> 00:01:03,652
provides a "readdir" function.

26
00:01:04,295 --> 00:01:06,122
And we can use this function

27
00:01:06,122 --> 00:01:07,493
to read all the files

28
00:01:07,493 --> 00:01:09,712
inside our 'content/posts' folder.

29
00:01:10,343 --> 00:01:12,596
"readdir" returns an array of files,

30
00:01:12,596 --> 00:01:13,974
and it's asynchronous.

31
00:01:14,975 --> 00:01:16,110
At this point we have

32
00:01:16,110 --> 00:01:17,028
the list of files

33
00:01:17,582 --> 00:01:20,189
so our files array will contain

34
00:01:20,189 --> 00:01:22,292
the file names a strings:

35
00:01:22,292 --> 00:01:25,403
'first-post.md' and 'second-post.md'.

36
00:01:26,072 --> 00:01:28,005
But in our "getSlugs" function

37
00:01:28,005 --> 00:01:30,260
we want to return just the "slugs",

38
00:01:30,260 --> 00:01:31,549
that are effectively

39
00:01:31,549 --> 00:01:33,933
the file names but without extension.

40
00:01:34,627 --> 00:01:36,791
So we want to take the files array

41
00:01:36,791 --> 00:01:37,873
and transform it.

42
00:01:38,437 --> 00:01:40,272
First I'd like to filter it

43
00:01:40,272 --> 00:01:41,835
and keep only the files

44
00:01:41,835 --> 00:01:43,059
that end in '.md'.

45
00:01:43,059 --> 00:01:45,642
Just in case there are any other files

46
00:01:45,642 --> 00:01:46,866
inside that folder

47
00:01:46,866 --> 00:01:48,293
that are not Markdown

48
00:01:48,293 --> 00:01:50,129
we should just ignore them.

49
00:01:51,037 --> 00:01:53,622
And then we want to "map", or transform,

50
00:01:53,622 --> 00:01:55,819
each file to remove its extension.

51
00:01:56,603 --> 00:01:58,726
For that we can use the "slice" method,

52
00:01:59,226 --> 00:02:01,007
and we want to keep all characters

53
00:02:01,007 --> 00:02:02,684
from the beginning of the string

54
00:02:03,237 --> 00:02:06,267
up until 3 characters from the end,

55
00:02:06,267 --> 00:02:06,960
so "-3".

56
00:02:07,547 --> 00:02:09,753
Let me show you quickly why "-3".

57
00:02:10,612 --> 00:02:13,079
If we have a string with the file name,

58
00:02:13,079 --> 00:02:14,344
like "some-post.md",

59
00:02:14,907 --> 00:02:17,230
then "slice" from 0 to -3

60
00:02:17,230 --> 00:02:19,461
will return "some-post".

61
00:02:20,053 --> 00:02:22,133
".md" is 3 characters,

62
00:02:22,133 --> 00:02:25,441
so to stop before that we write -3.

63
00:02:26,035 --> 00:02:27,928
In fact, we could actually make this

64
00:02:27,928 --> 00:02:29,242
more explicit in our code

65
00:02:29,794 --> 00:02:32,343
by defining a constant called "suffix",

66
00:02:32,343 --> 00:02:34,108
which is our file extension

67
00:02:34,673 --> 00:02:36,263
and then instead of '.md'

68
00:02:36,263 --> 00:02:37,852
we can use that "suffix".

69
00:02:38,415 --> 00:02:40,606
And instead of this magic number,

70
00:02:40,606 --> 00:02:42,530
we can write "suffix.length".

71
00:02:43,096 --> 00:02:44,050
That's the same thing

72
00:02:44,050 --> 00:02:45,458
but it should be more readable.

73
00:02:46,003 --> 00:02:48,642
Anyway, this function should now return

74
00:02:48,642 --> 00:02:50,604
all the "slugs" for our posts

75
00:02:50,604 --> 00:02:52,837
based on the Markdown file names.

76
00:02:53,472 --> 00:02:56,034
Now we can go and use our new function

77
00:02:56,034 --> 00:02:57,652
inside "getStaticPaths".

78
00:02:58,219 --> 00:03:00,332
We'll get all available "slugs"

79
00:03:00,332 --> 00:03:01,832
by awaiting the result

80
00:03:01,832 --> 00:03:03,331
of calling "getSlugs".

81
00:03:04,952 --> 00:03:06,849
Now we want to use the "slugs"

82
00:03:06,849 --> 00:03:08,366
to generate the "paths".

83
00:03:10,152 --> 00:03:12,459
I'll write it above the old "paths" for now.

84
00:03:12,959 --> 00:03:14,964
"slugs" is an array of strings,

85
00:03:14,964 --> 00:03:17,291
so we want to transform each element

86
00:03:17,291 --> 00:03:18,261
into an object,

87
00:03:19,559 --> 00:03:22,154
because each element in the "paths" array

88
00:03:22,154 --> 00:03:24,242
must contain a "params" property.

89
00:03:24,805 --> 00:03:26,482
And inside "params" we can

90
00:03:26,482 --> 00:03:28,351
simply pass our "slug" value.

91
00:03:28,915 --> 00:03:30,573
So our new "paths" array

92
00:03:30,573 --> 00:03:32,921
contains the same type of elements

93
00:03:32,921 --> 00:03:33,957
as our old one.

94
00:03:34,595 --> 00:03:36,269
And we can delete the old one now.

95
00:03:36,769 --> 00:03:37,471
Let's save,

96
00:03:37,471 --> 00:03:39,003
and check if this works.

97
00:03:39,003 --> 00:03:41,555
The "second-post" page is still working.

98
00:03:42,182 --> 00:03:43,954
Now, if we start from "Home"

99
00:03:44,454 --> 00:03:46,188
and open the "First Post"

100
00:03:46,188 --> 00:03:47,297
this also works.

101
00:03:47,297 --> 00:03:49,931
So the existing paths are still valid.

102
00:03:50,569 --> 00:03:53,176
But now we can try adding another post.

103
00:03:54,703 --> 00:03:57,109
I'll simply duplicate the "second-post"

104
00:03:57,109 --> 00:03:58,652
and call it "third-post".

105
00:03:59,302 --> 00:04:01,231
Then change the content as well

106
00:04:01,231 --> 00:04:02,849
to say "third" everywhere.

107
00:04:04,402 --> 00:04:07,193
And just by adding that new Markdown file

108
00:04:07,193 --> 00:04:09,372
we should now be able to request

109
00:04:09,372 --> 00:04:10,801
the "third-post" path

110
00:04:11,437 --> 00:04:12,699
and this shows a page

111
00:04:12,699 --> 00:04:15,221
with the content loaded from the new file.

112
00:04:15,781 --> 00:04:17,196
This worked without us

113
00:04:17,196 --> 00:04:19,574
having to write "third-post" manually

114
00:04:19,574 --> 00:04:21,630
in the "getStaticPaths" function

115
00:04:21,630 --> 00:04:23,817
because now it automatically finds

116
00:04:23,817 --> 00:04:25,874
all the available Markdown files

117
00:04:25,874 --> 00:04:28,059
by reading the directory contents.