1
00:00:01,000 --> 00:00:05,000
So let's now fetch our actual post data

2
00:00:05,000 --> 00:00:07,000
for this single post here.

3
00:00:07,000 --> 00:00:09,000
Now, the cool thing is that,

4
00:00:09,000 --> 00:00:12,000
in the lib folder, in the posts-util file,

5
00:00:12,000 --> 00:00:15,000
we already got this get post data function,

6
00:00:15,000 --> 00:00:17,000
and we can basically utilize this.

7
00:00:17,000 --> 00:00:19,000
The only problem we'll have is

8
00:00:19,000 --> 00:00:21,000
that it expects a file name.

9
00:00:21,000 --> 00:00:23,000
It expects a file name,

10
00:00:23,000 --> 00:00:26,000
and, when we load, a single post here,

11
00:00:26,000 --> 00:00:28,000
we'll only have to slug.

12
00:00:28,000 --> 00:00:30,000
Which is the file name,

13
00:00:30,000 --> 00:00:32,000
without the file extension.

14
00:00:33,000 --> 00:00:36,000
So we either, convert this,

15
00:00:36,000 --> 00:00:37,000
slug to a file name,

16
00:00:37,000 --> 00:00:39,000
by adding an extension here,

17
00:00:39,000 --> 00:00:42,000
when reaching out to, get post data,

18
00:00:42,000 --> 00:00:45,000
or we make, get post data more flexible.

19
00:00:45,000 --> 00:00:49,000
We could, for example named this, post identifier,

20
00:00:49,000 --> 00:00:51,000
to make it a bit more generic,

21
00:00:51,000 --> 00:00:54,000
then, we create the post slug,

22
00:00:54,000 --> 00:00:57,000
right away, as a first step,

23
00:00:57,000 --> 00:01:01,000
by taking our post identifier,

24
00:01:01,000 --> 00:01:03,000
and replacing the extension.

25
00:01:03,000 --> 00:01:04,000
And if it doesn't have

26
00:01:04,000 --> 00:01:06,000
that extension, that's no problem.

27
00:01:06,000 --> 00:01:08,000
So if we received just this slug,

28
00:01:08,000 --> 00:01:10,000
replace will just do nothing,

29
00:01:10,000 --> 00:01:12,000
which is all defined.

30
00:01:12,000 --> 00:01:14,000
And then here when we need the file path,

31
00:01:14,000 --> 00:01:17,000
we don't just pass in the post identifier,

32
00:01:17,000 --> 00:01:19,000
but instead, we create a string

33
00:01:19,000 --> 00:01:21,000
with a template literal,

34
00:01:21,000 --> 00:01:23,000
and we use post slug,

35
00:01:23,000 --> 00:01:26,000
which is guaranteed to not have an extension,

36
00:01:26,000 --> 00:01:28,000
and add.md here.

37
00:01:28,000 --> 00:01:30,000
So we always create a file, path

38
00:01:30,000 --> 00:01:33,000
or a file name with extension here.

39
00:01:33,000 --> 00:01:36,000
And if we restructure our code like this,

40
00:01:36,000 --> 00:01:38,000
it should already work.

41
00:01:38,000 --> 00:01:40,000
Now we can call, get post data,

42
00:01:40,000 --> 00:01:43,000
with a file name, with an extension,

43
00:01:43,000 --> 00:01:45,000
or with just a slug.

44
00:01:45,000 --> 00:01:47,000
Therefore now we can export this,

45
00:01:47,000 --> 00:01:49,000
to then use it,

46
00:01:49,000 --> 00:01:51,000
in our single post page.

47
00:01:51,000 --> 00:01:54,000
Because here, I wanna get a single post,

48
00:01:54,000 --> 00:01:57,000
for a given slug.

49
00:01:57,000 --> 00:01:59,000
Now for that, here in post detailed page,

50
00:01:59,000 --> 00:02:01,000
I'll again export, a function,

51
00:02:02,000 --> 00:02:05,000
to get static props function.

52
00:02:05,000 --> 00:02:07,000
Again for the same reasons

53
00:02:07,000 --> 00:02:08,000
as mentioned before,

54
00:02:08,000 --> 00:02:11,000
get (indistinct) I props could be used here,

55
00:02:11,000 --> 00:02:12,000
but isn't better.

56
00:02:12,000 --> 00:02:16,000
And then here we get this, context object.

57
00:02:16,000 --> 00:02:18,000
We get this in all get static props functions,

58
00:02:18,000 --> 00:02:21,000
but we haven't needed it before.

59
00:02:21,000 --> 00:02:22,000
Now we do need it,

60
00:02:22,000 --> 00:02:27,000
because we can get our params, out of context.

61
00:02:27,000 --> 00:02:29,000
That's what you also learned in the course.

62
00:02:29,000 --> 00:02:31,000
Context has a params key,

63
00:02:31,000 --> 00:02:35,000
and that's simply, is, then an object,

64
00:02:35,000 --> 00:02:37,000
with the, concrete values,

65
00:02:37,000 --> 00:02:39,000
of all the dynamic segments

66
00:02:39,000 --> 00:02:40,000
that might lead to this file.

67
00:02:40,000 --> 00:02:41,000
So in this case,

68
00:02:41,000 --> 00:02:42,000
we'll be able to,

69
00:02:42,000 --> 00:02:47,000
extract the concrete slug value, from params.

70
00:02:47,000 --> 00:02:49,000
Because we have that dynamic segment,

71
00:02:49,000 --> 00:02:50,000
in this file name.

72
00:02:52,000 --> 00:02:54,000
So here we then have to, slug,

73
00:02:54,000 --> 00:02:56,000
which we get from params.

74
00:02:58,000 --> 00:02:59,000
And now we can use that slug

75
00:02:59,000 --> 00:03:02,000
to get the data for a single post,

76
00:03:02,000 --> 00:03:04,000
with get post data,

77
00:03:04,000 --> 00:03:05,000
so importing that function

78
00:03:05,000 --> 00:03:09,000
from the lib folder into posts-util file,

79
00:03:09,000 --> 00:03:12,000
and passing the slug as our argument.

80
00:03:12,000 --> 00:03:14,000
That will then give us the data, for that file,

81
00:03:14,000 --> 00:03:17,000
it will read that data for that file,

82
00:03:17,000 --> 00:03:19,000
and it's able to read that because,

83
00:03:19,000 --> 00:03:22,000
get static props executes during the build process,

84
00:03:22,000 --> 00:03:25,000
or on the server, not in the client.

85
00:03:25,000 --> 00:03:30,000
And then therefore we get our, post data here.

86
00:03:30,000 --> 00:03:32,000
And hence we can then return our object,

87
00:03:32,000 --> 00:03:34,000
as we always have,

88
00:03:34,000 --> 00:03:37,000
where we set the props for our component.

89
00:03:37,000 --> 00:03:39,000
And here we can add the post prop,

90
00:03:39,000 --> 00:03:41,000
which holds that post data.

91
00:03:42,000 --> 00:03:44,000
And here we could make a case

92
00:03:44,000 --> 00:03:46,000
for adding revalidate.

93
00:03:46,000 --> 00:03:49,000
Here, we're not going through all the posts.

94
00:03:49,000 --> 00:03:52,000
We're fetching the data for a single post.

95
00:03:52,000 --> 00:03:54,000
So this will be very fast.

96
00:03:54,000 --> 00:03:58,000
And if we set revalidate to let's say 600 here,

97
00:03:58,000 --> 00:04:00,000
then we ensure,

98
00:04:00,000 --> 00:04:03,000
that if we ever updated a markdown file,

99
00:04:03,000 --> 00:04:06,000
without rebuilding the entire application,

100
00:04:06,000 --> 00:04:07,000
that then still,

101
00:04:07,000 --> 00:04:11,000
we do get that latest data,

102
00:04:11,000 --> 00:04:13,000
at least once every 10 minutes.

103
00:04:13,000 --> 00:04:14,000
So that we don't have

104
00:04:14,000 --> 00:04:17,000
to rebuild the entire application,

105
00:04:17,000 --> 00:04:19,000
just because we fixed a typo

106
00:04:19,000 --> 00:04:21,000
in one of our markdown files.

107
00:04:21,000 --> 00:04:23,000
We could do this here, because here,

108
00:04:23,000 --> 00:04:25,000
rebuilding after deployment,

109
00:04:25,000 --> 00:04:28,000
will be much faster than if we do it

110
00:04:28,000 --> 00:04:29,000
for the other pages,

111
00:04:29,000 --> 00:04:32,000
where we have to go through all the post files,

112
00:04:32,000 --> 00:04:33,000
which takes a bit longer.

113
00:04:33,000 --> 00:04:35,000
And therefor would slow down,

114
00:04:35,000 --> 00:04:36,000
some of the requests.

115
00:04:36,000 --> 00:04:40,000
Here, it would not slow down the requests at all,

116
00:04:40,000 --> 00:04:41,000
or not by much at least.

117
00:04:41,000 --> 00:04:45,000
And we only do it once every 10 minutes anyways.

118
00:04:45,000 --> 00:04:46,000
Of course you can tweak this duration

119
00:04:46,000 --> 00:04:49,000
to a duration that fits your needs though.

120
00:04:49,000 --> 00:04:51,000
You can make it longer or shorter.

121
00:04:52,000 --> 00:04:55,000
But with that, we now have get static props here.

122
00:04:55,000 --> 00:04:58,000
However, since this is a dynamic page,

123
00:04:58,000 --> 00:05:02,000
you'll learn that get static props can't work on its own.

124
00:05:02,000 --> 00:05:04,000
We need to pair it,

125
00:05:04,000 --> 00:05:06,000
with get static paths,

126
00:05:06,000 --> 00:05:08,000
to let Next know,

127
00:05:08,000 --> 00:05:13,000
which concrete slug values it should pre-generate.

128
00:05:13,000 --> 00:05:14,000
And therefore we need

129
00:05:14,000 --> 00:05:17,000
to export another function here.

130
00:05:17,000 --> 00:05:21,000
We need to export the get static paths function.

131
00:05:23,000 --> 00:05:26,000
This returns an object,

132
00:05:26,000 --> 00:05:28,000
with all the paths that should be prepared.

133
00:05:28,000 --> 00:05:30,000
So with all the concrete values

134
00:05:30,000 --> 00:05:32,000
for a slug that should be prepared.

135
00:05:32,000 --> 00:05:35,000
And that's an array full of objects,

136
00:05:35,000 --> 00:05:36,000
where we set params,

137
00:05:36,000 --> 00:05:38,000
to another nested object,

138
00:05:38,000 --> 00:05:41,000
and then provide our concrete slug values.

139
00:05:41,000 --> 00:05:43,000
That's what you learned.

140
00:05:43,000 --> 00:05:46,000
Now we can, not prepare anything,

141
00:05:46,000 --> 00:05:47,000
and basically just set paths

142
00:05:47,000 --> 00:05:48,000
to an empty array,

143
00:05:50,000 --> 00:05:53,000
and set fallback to true.

144
00:05:53,000 --> 00:05:55,000
Then the data will be prepared

145
00:05:55,000 --> 00:05:56,000
and fetched on the mound,

146
00:05:56,000 --> 00:05:59,000
when we visit this page.

147
00:05:59,000 --> 00:06:00,000
With fallback true,

148
00:06:00,000 --> 00:06:02,000
we should also render some,

149
00:06:02,000 --> 00:06:04,000
fallback content though,

150
00:06:04,000 --> 00:06:08,000
for this scenario that the post hasn't been loaded yet.

151
00:06:08,000 --> 00:06:10,000
Or we set fall back to blocking,

152
00:06:10,000 --> 00:06:13,000
to wait until it has been generated.

153
00:06:13,000 --> 00:06:15,000
This could be fine.

154
00:06:15,000 --> 00:06:17,000
And it could be fine if you have a blog

155
00:06:17,000 --> 00:06:19,000
with, thousands of posts,

156
00:06:19,000 --> 00:06:22,000
where a lot of those posts are,

157
00:06:22,000 --> 00:06:25,000
rarely read and rarely visited,

158
00:06:25,000 --> 00:06:28,000
and you don't wanna pre-generate all those posts.

159
00:06:28,000 --> 00:06:31,000
Then, using a pattern like this could make sense.

160
00:06:31,000 --> 00:06:34,000
Or you pre-generate some of your posts,

161
00:06:34,000 --> 00:06:36,000
your most popular posts,

162
00:06:36,000 --> 00:06:38,000
and not all of them.

163
00:06:38,000 --> 00:06:40,000
In this blog here,

164
00:06:40,000 --> 00:06:43,000
where we will only have a couple of posts,

165
00:06:43,000 --> 00:06:45,000
only a couple of dozens,

166
00:06:45,000 --> 00:06:46,000
or hundreds of posts,

167
00:06:46,000 --> 00:06:49,000
pre-rendering all posts, isn't too difficult

168
00:06:49,000 --> 00:06:50,000
and isn't too much work.

169
00:06:50,000 --> 00:06:53,000
And hence I'll set fall back to false,

170
00:06:53,000 --> 00:06:57,000
and explicitly define all paths in advance.

171
00:06:57,000 --> 00:07:00,000
And for defining all paths in advance,

172
00:07:00,000 --> 00:07:03,000
I need to know, which paths we have.

173
00:07:03,000 --> 00:07:05,000
Now we can get all those paths

174
00:07:05,000 --> 00:07:07,000
by using another function

175
00:07:07,000 --> 00:07:09,000
from the posts-util folder.

176
00:07:09,000 --> 00:07:11,000
They're in get all posts.

177
00:07:11,000 --> 00:07:14,000
We get all our post files.

178
00:07:15,000 --> 00:07:18,000
Then we all to read all the data from there.

179
00:07:18,000 --> 00:07:20,000
Now that's a bit overkill here.

180
00:07:20,000 --> 00:07:22,000
I'm not interested in all the data here.

181
00:07:22,000 --> 00:07:26,000
I'm just interested in getting the post files in this case.

182
00:07:26,000 --> 00:07:30,000
Hence, I will actually refactor this,

183
00:07:30,000 --> 00:07:32,000
and put this here, this code,

184
00:07:32,000 --> 00:07:33,000
where I read all the files

185
00:07:33,000 --> 00:07:35,000
from the posts directory,

186
00:07:35,000 --> 00:07:38,000
into a separate function,

187
00:07:38,000 --> 00:07:40,000
maybe here at the very top,

188
00:07:40,000 --> 00:07:44,000
which I'll name get posts files,

189
00:07:45,000 --> 00:07:48,000
and they are all returned fs readdir sync,

190
00:07:48,000 --> 00:07:50,000
and I'll export this function,

191
00:07:50,000 --> 00:07:53,000
so that we can also use it outside of this file.

192
00:07:54,000 --> 00:07:56,000
And then down there and get all posts.

193
00:07:56,000 --> 00:07:59,000
I'll now call, get posts files,

194
00:07:59,000 --> 00:08:00,000
so that this works again.

195
00:08:02,000 --> 00:08:05,000
So that allows me to just get all the post file names,

196
00:08:05,000 --> 00:08:07,000
without doing all the sorting and mapping,

197
00:08:07,000 --> 00:08:10,000
which will slow down the process a bit,

198
00:08:10,000 --> 00:08:11,000
which is just not needed,

199
00:08:11,000 --> 00:08:15,000
for pre-rendering the individual post files.

200
00:08:15,000 --> 00:08:18,000
So this gives me all the post file names,

201
00:08:18,000 --> 00:08:20,000
with the file extensions included though.

202
00:08:20,000 --> 00:08:22,000
We should keep that in mind,

203
00:08:22,000 --> 00:08:26,000
and therefore in slug JS,

204
00:08:26,000 --> 00:08:29,000
I now can call, get posts files.

205
00:08:30,000 --> 00:08:32,000
So I'll import that function

206
00:08:32,000 --> 00:08:34,000
and call it, from the lib folder

207
00:08:34,000 --> 00:08:36,000
and the posts-util file.

208
00:08:36,000 --> 00:08:39,000
Now this will give me all the posts file names,

209
00:08:39,000 --> 00:08:42,000
and here I'm actually just interested in the slugs.

210
00:08:42,000 --> 00:08:45,000
So to file names without the extensions.

211
00:08:45,000 --> 00:08:48,000
Hence I'll create a slugs constant.

212
00:08:48,000 --> 00:08:50,000
And that's just as post file names,

213
00:08:50,000 --> 00:08:52,000
where I map every file name,

214
00:08:52,000 --> 00:08:55,000
such that I removed the extension.

215
00:08:55,000 --> 00:08:58,000
So I'll just again, replace,

216
00:08:58,000 --> 00:09:00,000
this regular expression,

217
00:09:00,000 --> 00:09:02,000
which we also used here.

218
00:09:02,000 --> 00:09:04,000
So I'll just copy that code in the end,

219
00:09:04,000 --> 00:09:07,000
and replace that with an empty string.

220
00:09:10,000 --> 00:09:15,000
So that now maps all my file names into, just slug strings.

221
00:09:15,000 --> 00:09:17,000
And now we can generate paths here

222
00:09:17,000 --> 00:09:20,000
by going through all the slugs,

223
00:09:20,000 --> 00:09:25,000
and mapping every slug into, an object,

224
00:09:25,000 --> 00:09:27,000
hence the, parentheses around it,

225
00:09:27,000 --> 00:09:29,000
so that, this is not treated

226
00:09:29,000 --> 00:09:30,000
as the function body,

227
00:09:30,000 --> 00:09:33,000
but as an immediately returned object,

228
00:09:33,000 --> 00:09:35,000
where we have the params key,

229
00:09:35,000 --> 00:09:37,000
which holds another nested object,

230
00:09:37,000 --> 00:09:40,000
where we set slug equal to, slug here.

231
00:09:42,000 --> 00:09:45,000
And we could also do this in one step.

232
00:09:45,000 --> 00:09:46,000
I'm doing it in two steps here

233
00:09:46,000 --> 00:09:49,000
to make it a bit more readable.

234
00:09:49,000 --> 00:09:52,000
So this will now generate an array of path objects,

235
00:09:52,000 --> 00:09:55,000
and we are generating all our paths in advance.

236
00:09:55,000 --> 00:09:59,000
So we are pre-generating this, single post page,

237
00:09:59,000 --> 00:10:02,000
for all our posts in advance.

238
00:10:03,000 --> 00:10:04,000
Now this should work.

239
00:10:04,000 --> 00:10:05,000
In get static props,

240
00:10:05,000 --> 00:10:07,000
we return our post prop.

241
00:10:07,000 --> 00:10:09,000
So now we can use this here,

242
00:10:09,000 --> 00:10:12,000
in the post detailed page and get props,

243
00:10:12,000 --> 00:10:15,000
and set a post prop on post content,

244
00:10:15,000 --> 00:10:18,000
and pass props.post into that,

245
00:10:18,000 --> 00:10:20,000
and then go to post content,

246
00:10:20,000 --> 00:10:22,000
to use this post prop instead

247
00:10:22,000 --> 00:10:24,000
of the dummy post there.

248
00:10:24,000 --> 00:10:25,000
So in post content,

249
00:10:25,000 --> 00:10:28,000
I'll get rid of that dummy post,

250
00:10:28,000 --> 00:10:31,000
and instead accept props here.

251
00:10:31,000 --> 00:10:35,000
And then here, we can, first of all,

252
00:10:35,000 --> 00:10:39,000
extract our posts from the props,

253
00:10:39,000 --> 00:10:43,000
and then use, post.slug here,

254
00:10:43,000 --> 00:10:48,000
and post.image, and here, post.title,

255
00:10:49,000 --> 00:10:53,000
and of course here also, post.content.

256
00:10:54,000 --> 00:10:56,000
If we do all of this,

257
00:10:56,000 --> 00:10:58,000
if we save everything,

258
00:10:58,000 --> 00:11:00,000
and reload this page, it should work.

259
00:11:00,000 --> 00:11:02,000
We should see the image, the title

260
00:11:02,000 --> 00:11:04,000
and the actual content

261
00:11:04,000 --> 00:11:07,000
as we wrote it in the markdown file.

262
00:11:07,000 --> 00:11:08,000
Now it is of course up to you,

263
00:11:08,000 --> 00:11:09,000
to then add styling,

264
00:11:09,000 --> 00:11:13,000
for the different content elements you might have.

265
00:11:13,000 --> 00:11:16,000
You can do this with the post content module CSS file.

266
00:11:16,000 --> 00:11:18,000
Here by using the content class,

267
00:11:18,000 --> 00:11:21,000
and then selecting different elements in your content.

268
00:11:21,000 --> 00:11:22,000
You can style them,

269
00:11:22,000 --> 00:11:24,000
and change link colors,

270
00:11:24,000 --> 00:11:26,000
change to display of tables,

271
00:11:26,000 --> 00:11:27,000
whatever you might have.

272
00:11:29,000 --> 00:11:33,000
But with that, we are fetching our actual post data.

273
00:11:33,000 --> 00:11:34,000
And therefore now,

274
00:11:34,000 --> 00:11:36,000
we can click on a post here,

275
00:11:36,000 --> 00:11:38,000
see it, click on it here, see it.

276
00:11:38,000 --> 00:11:40,000
And it just works.