So it's time to move away
from those dummy posts.
That of course, brings up one question,
where do we wanna store our actual posts?
And one pretty obvious choice would be a database,
something like Firebase or a MongoDB or SQL database.
And there is nothing wrong with that.
We could do that, but for a blog like this
which is owned by us, where we write those blog posts,
there also is another very nice solution.
We could use our file system as a data source
because we don't need to write to our blog posts.
I mean, we have to write them at some point
but then once they're done,
they are a data source from which we only fetch data.
We only use them to load blog posts,
users on the website
can't interact with them to change them.
So once they exist, we might occasionally update.
But whenever we do that,
we as an owner dive directly into those blog posts
but the files themselves are then only fetched
by our application.
So if we use our local file system here, our project folder,
we don't have to set up an extra database and pay for it.
We don't have to do all that wire up work
and that can be pretty nice.
And therefore, a quite common approach
is to add a new folder in your project folder,
which could be named content
but that name is totally up to you.
It doesn't have to be named content and in there,
we could have a sub folder named, posts
if we would have different kinds of content
or if we don't have that, we get rid of that folder,
and instead of a content post folder,
we just directly add a post folder in the project.
Now, the idea is that,
in that post folder, we store our posts.
And what do I mean with store our posts?
Well, keep in mind
that we will write our posts with markdown,
so with that markdown syntax.
Hence I'll add a new file in there,
let's say, the getting-started-with-nextjs.md file.
MD stands for markdown.
So this is a markdown file, which I added here.
And in there, we can write markdown code.
You can also install extra extensions that help you
with writing markdown code.
In visual studio code, if you search for markdown,
there you can install extra support,
but I don't even have that,
I am happy to write it like this.
Now in here, we kind of write that markdown code like,
this is a title,
this is some regular text with a link.
That is something could write here as content.
However, if you take a closer look
at our pages and our different components,
you might see that just content is not enough.
We also rely on an excerpt and a date
and a title and image for outputting all our posts.
So we need to add metadata to our posts.
And the great thing about markdown,
is that you can easily combine it
with a concept called gray matter, which is just metadata.
You add to your markdown file.
You add that by adding free dashes, opening and closing,
so to say, above your content.
So here we have free dashes
and between those free dash separators,
we can add our metadata
for this markdown file as key value pairs basically,
in Yaml format to be precise.
And you can look up Yaml formats
to see what's allowed in here.
And for example, we can set a title here,
to, this is the post title,
or in this case, probably getting started with nextjS.
And we can also wrap that in quotes to make it clear that,
that's a string.
It's technically not always required
but can be required sometimes if Yaml
is not able to find out which data type it is otherwise.
Here you could also add an author if you need that.
I don't have it in this block since it's only my blog
and I'm the only author of all those posts
but you could add a author field here as well
and then fetch and render that later.
Now what we'll need is a image though,
we will definitely need that.
And here I'll just have my getting-started
nextjs.png image file here.
So this image file, which I added
in the images posts folder before.
And as a side note to connect everything correctly,
and use the already existing structure
in the public images folder,
you should make sure
that your posts markdown file has a file name
that matches one of the folder names in that posts folder
in the images folder
because we'll then later connect all that data
such that we fetch the image we specify here
from a equally named folder
in the public images posts folder.
So you should make sure that this is equal.
Then here, we can also add an excerpt
and I'll just quickly grab my dummy excerpt here
which I wrote down before
from the index.js file and add that as an excerpt here.
I didn't add a line break here.
That's just my IDE, which is kind of showing a line break.
It's one long inline text.
And I will now also add a isFeatured key here
and set this to true.
So Boolean values are also allowed here.
We will then later use that
for selecting just the featured posts for the starting page.
So that's now extra metadata
and that's the actual post content.
And we can write files like this,
and we can also fetch data
from such files and split it in metadata and content.
All of that is possible with ease
and therefore that will be our data source here.
So now with that, all save that markdown file.
And I will now also get rid
of the other dummy post folders in the images folder
and just keep one of those folders around
for that markdown file we just added.
And now the goal is to kind of use our posts folder
as a data source to generate all required single
post files based on the number of post files
in the post folder to load the featured posts from there,
so to go through all the posts
and selected the featured posts for the starting page
and to load all the posts for the all posts page.
And that's what we're going to do in the next lecture.