1
00:00:01,000 --> 00:00:03,000
So it's time to move away

2
00:00:03,000 --> 00:00:05,000
from those dummy posts.

3
00:00:05,000 --> 00:00:08,000
That of course, brings up one question,

4
00:00:08,000 --> 00:00:12,000
where do we wanna store our actual posts?

5
00:00:12,000 --> 00:00:16,000
And one pretty obvious choice would be a database,

6
00:00:16,000 --> 00:00:21,000
something like Firebase or a MongoDB or SQL database.

7
00:00:21,000 --> 00:00:23,000
And there is nothing wrong with that.

8
00:00:23,000 --> 00:00:27,000
We could do that, but for a blog like this

9
00:00:27,000 --> 00:00:31,000
which is owned by us, where we write those blog posts,

10
00:00:31,000 --> 00:00:35,000
there also is another very nice solution.

11
00:00:35,000 --> 00:00:39,000
We could use our file system as a data source

12
00:00:39,000 --> 00:00:43,000
because we don't need to write to our blog posts.

13
00:00:43,000 --> 00:00:46,000
I mean, we have to write them at some point

14
00:00:46,000 --> 00:00:47,000
but then once they're done,

15
00:00:47,000 --> 00:00:51,000
they are a data source from which we only fetch data.

16
00:00:51,000 --> 00:00:53,000
We only use them to load blog posts,

17
00:00:53,000 --> 00:00:55,000
users on the website

18
00:00:55,000 --> 00:00:57,000
can't interact with them to change them.

19
00:00:57,000 --> 00:01:01,000
So once they exist, we might occasionally update.

20
00:01:01,000 --> 00:01:02,000
But whenever we do that,

21
00:01:02,000 --> 00:01:06,000
we as an owner dive directly into those blog posts

22
00:01:06,000 --> 00:01:09,000
but the files themselves are then only fetched

23
00:01:09,000 --> 00:01:11,000
by our application.

24
00:01:11,000 --> 00:01:15,000
So if we use our local file system here, our project folder,

25
00:01:15,000 --> 00:01:19,000
we don't have to set up an extra database and pay for it.

26
00:01:19,000 --> 00:01:22,000
We don't have to do all that wire up work

27
00:01:22,000 --> 00:01:24,000
and that can be pretty nice.

28
00:01:24,000 --> 00:01:26,000
And therefore, a quite common approach

29
00:01:26,000 --> 00:01:30,000
is to add a new folder in your project folder,

30
00:01:30,000 --> 00:01:33,000
which could be named content

31
00:01:33,000 --> 00:01:34,000
but that name is totally up to you.

32
00:01:34,000 --> 00:01:38,000
It doesn't have to be named content and in there,

33
00:01:38,000 --> 00:01:41,000
we could have a sub folder named, posts

34
00:01:41,000 --> 00:01:44,000
if we would have different kinds of content

35
00:01:44,000 --> 00:01:47,000
or if we don't have that, we get rid of that folder,

36
00:01:47,000 --> 00:01:50,000
and instead of a content post folder,

37
00:01:50,000 --> 00:01:53,000
we just directly add a post folder in the project.

38
00:01:55,000 --> 00:01:56,000
Now, the idea is that,

39
00:01:56,000 --> 00:02:00,000
in that post folder, we store our posts.

40
00:02:00,000 --> 00:02:03,000
And what do I mean with store our posts?

41
00:02:04,000 --> 00:02:05,000
Well, keep in mind

42
00:02:05,000 --> 00:02:09,000
that we will write our posts with markdown,

43
00:02:09,000 --> 00:02:11,000
so with that markdown syntax.

44
00:02:12,000 --> 00:02:14,000
Hence I'll add a new file in there,

45
00:02:14,000 --> 00:02:19,000
let's say, the getting-started-with-nextjs.md file.

46
00:02:22,000 --> 00:02:24,000
MD stands for markdown.

47
00:02:25,000 --> 00:02:28,000
So this is a markdown file, which I added here.

48
00:02:28,000 --> 00:02:31,000
And in there, we can write markdown code.

49
00:02:31,000 --> 00:02:35,000
You can also install extra extensions that help you

50
00:02:35,000 --> 00:02:37,000
with writing markdown code.

51
00:02:37,000 --> 00:02:40,000
In visual studio code, if you search for markdown,

52
00:02:40,000 --> 00:02:42,000
there you can install extra support,

53
00:02:42,000 --> 00:02:44,000
but I don't even have that,

54
00:02:44,000 --> 00:02:46,000
I am happy to write it like this.

55
00:02:47,000 --> 00:02:50,000
Now in here, we kind of write that markdown code like,

56
00:02:50,000 --> 00:02:52,000
this is a title,

57
00:02:52,000 --> 00:02:56,000
this is some regular text with a link.

58
00:02:58,000 --> 00:03:02,000
That is something could write here as content.

59
00:03:03,000 --> 00:03:05,000
However, if you take a closer look

60
00:03:05,000 --> 00:03:08,000
at our pages and our different components,

61
00:03:08,000 --> 00:03:12,000
you might see that just content is not enough.

62
00:03:12,000 --> 00:03:15,000
We also rely on an excerpt and a date

63
00:03:15,000 --> 00:03:20,000
and a title and image for outputting all our posts.

64
00:03:21,000 --> 00:03:24,000
So we need to add metadata to our posts.

65
00:03:24,000 --> 00:03:26,000
And the great thing about markdown,

66
00:03:26,000 --> 00:03:29,000
is that you can easily combine it

67
00:03:29,000 --> 00:03:33,000
with a concept called gray matter, which is just metadata.

68
00:03:33,000 --> 00:03:35,000
You add to your markdown file.

69
00:03:35,000 --> 00:03:39,000
You add that by adding free dashes, opening and closing,

70
00:03:39,000 --> 00:03:43,000
so to say, above your content.

71
00:03:43,000 --> 00:03:44,000
So here we have free dashes

72
00:03:44,000 --> 00:03:47,000
and between those free dash separators,

73
00:03:47,000 --> 00:03:50,000
we can add our metadata

74
00:03:50,000 --> 00:03:54,000
for this markdown file as key value pairs basically,

75
00:03:54,000 --> 00:03:57,000
in Yaml format to be precise.

76
00:03:59,000 --> 00:04:01,000
And you can look up Yaml formats

77
00:04:01,000 --> 00:04:03,000
to see what's allowed in here.

78
00:04:03,000 --> 00:04:05,000
And for example, we can set a title here,

79
00:04:05,000 --> 00:04:09,000
to, this is the post title,

80
00:04:09,000 --> 00:04:13,000
or in this case, probably getting started with nextjS.

81
00:04:24,000 --> 00:04:28,000
And we can also wrap that in quotes to make it clear that,

82
00:04:28,000 --> 00:04:30,000
that's a string.

83
00:04:30,000 --> 00:04:32,000
It's technically not always required

84
00:04:32,000 --> 00:04:35,000
but can be required sometimes if Yaml

85
00:04:35,000 --> 00:04:39,000
is not able to find out which data type it is otherwise.

86
00:04:39,000 --> 00:04:43,000
Here you could also add an author if you need that.

87
00:04:43,000 --> 00:04:45,000
I don't have it in this block since it's only my blog

88
00:04:45,000 --> 00:04:48,000
and I'm the only author of all those posts

89
00:04:48,000 --> 00:04:50,000
but you could add a author field here as well

90
00:04:50,000 --> 00:04:52,000
and then fetch and render that later.

91
00:04:53,000 --> 00:04:56,000
Now what we'll need is a image though,

92
00:04:56,000 --> 00:04:58,000
we will definitely need that.

93
00:04:58,000 --> 00:05:01,000
And here I'll just have my getting-started

94
00:05:03,000 --> 00:05:06,000
nextjs.png image file here.

95
00:05:06,000 --> 00:05:08,000
So this image file, which I added

96
00:05:08,000 --> 00:05:11,000
in the images posts folder before.

97
00:05:11,000 --> 00:05:14,000
And as a side note to connect everything correctly,

98
00:05:14,000 --> 00:05:16,000
and use the already existing structure

99
00:05:16,000 --> 00:05:18,000
in the public images folder,

100
00:05:18,000 --> 00:05:20,000
you should make sure

101
00:05:20,000 --> 00:05:24,000
that your posts markdown file has a file name

102
00:05:24,000 --> 00:05:27,000
that matches one of the folder names in that posts folder

103
00:05:27,000 --> 00:05:29,000
in the images folder

104
00:05:29,000 --> 00:05:32,000
because we'll then later connect all that data

105
00:05:32,000 --> 00:05:35,000
such that we fetch the image we specify here

106
00:05:35,000 --> 00:05:38,000
from a equally named folder

107
00:05:38,000 --> 00:05:40,000
in the public images posts folder.

108
00:05:40,000 --> 00:05:43,000
So you should make sure that this is equal.

109
00:05:44,000 --> 00:05:48,000
Then here, we can also add an excerpt

110
00:05:48,000 --> 00:05:53,000
and I'll just quickly grab my dummy excerpt here

111
00:05:53,000 --> 00:05:56,000
which I wrote down before

112
00:05:56,000 --> 00:06:00,000
from the index.js file and add that as an excerpt here.

113
00:06:00,000 --> 00:06:02,000
I didn't add a line break here.

114
00:06:02,000 --> 00:06:06,000
That's just my IDE, which is kind of showing a line break.

115
00:06:06,000 --> 00:06:08,000
It's one long inline text.

116
00:06:10,000 --> 00:06:13,000
And I will now also add a isFeatured key here

117
00:06:13,000 --> 00:06:15,000
and set this to true.

118
00:06:15,000 --> 00:06:19,000
So Boolean values are also allowed here.

119
00:06:19,000 --> 00:06:21,000
We will then later use that

120
00:06:21,000 --> 00:06:25,000
for selecting just the featured posts for the starting page.

121
00:06:26,000 --> 00:06:28,000
So that's now extra metadata

122
00:06:28,000 --> 00:06:31,000
and that's the actual post content.

123
00:06:31,000 --> 00:06:33,000
And we can write files like this,

124
00:06:33,000 --> 00:06:35,000
and we can also fetch data

125
00:06:35,000 --> 00:06:38,000
from such files and split it in metadata and content.

126
00:06:38,000 --> 00:06:41,000
All of that is possible with ease

127
00:06:41,000 --> 00:06:45,000
and therefore that will be our data source here.

128
00:06:45,000 --> 00:06:49,000
So now with that, all save that markdown file.

129
00:06:49,000 --> 00:06:50,000
And I will now also get rid

130
00:06:50,000 --> 00:06:54,000
of the other dummy post folders in the images folder

131
00:06:54,000 --> 00:06:57,000
and just keep one of those folders around

132
00:06:57,000 --> 00:07:00,000
for that markdown file we just added.

133
00:07:00,000 --> 00:07:05,000
And now the goal is to kind of use our posts folder

134
00:07:05,000 --> 00:07:10,000
as a data source to generate all required single

135
00:07:10,000 --> 00:07:13,000
post files based on the number of post files

136
00:07:13,000 --> 00:07:18,000
in the post folder to load the featured posts from there,

137
00:07:18,000 --> 00:07:20,000
so to go through all the posts

138
00:07:20,000 --> 00:07:23,000
and selected the featured posts for the starting page

139
00:07:23,000 --> 00:07:28,000
and to load all the posts for the all posts page.

140
00:07:28,000 --> 00:07:31,000
And that's what we're going to do in the next lecture.