All language subtitles for 013 Adding Markdown Files As A Data Source_Downloadly.ir_en

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.