In this section we'll see how to load data,
that we can then display in our pages.
If we take the Stardew Valley review for example,
this page currently shows some placeholder text,
that simply says "This will be the review".
Now, we could write the full review text
directly in this React component,
with "p" tags to separate each paragraph,
and so on.
But that's not really the most convenient
way to write long content.
Let's say we want to keep everything
inside our project for now,
without using an external Content
Management System.
A simple approach is to use Markdown files.
Let's create a new folder, at the top of our project,
called "content",
and also a nested folder inside it,
for the "reviews".
At this point we can create a new file,
for the "stardew-valley" game,
with "md" as the extension,
that stands for Markdown.
Some of you will be familiar
with the Markdown format;
it's used by most projects for
the README file for example.
It allows you to write rich text,
including some formatting, like "bold",
denoted by wrapping the text
inside double underscores,
or "italic", that uses a single underscore.
Visual Studio Code supports
Markdown out of the box.
If we open the Command Palette,
which I normally do using the keyboard shortcut,
here you can search among all the
possible operations available,
and for Markdown there is "Open
Preview to the Side".
This will show another panel on the right side
displaying the rendered Markdown.
So we can edit our document, and
see a preview straight away.
We can write multiple paragraphs, simply
by separating them with an empty line.
You can also add headings,
starting with a "#" symbol for a level 1 heading,
or two "#" symbols for level 2, and so on.
You can create a list,
simply by putting an "*" before each item,
and it will be rendered as bullet points.
So, it's a good format for
writing structured text.
It's more readable than HTML,
where you have lots of tags in angle brackets.
And it allows us to keep the content separate
from the final presentation,
that will be done by our React component.
So, the question now is:
how can we read that Markdown file
and use its content inside this component?
If you remember from our section on Rendering,
this is a React Server Component.
That's the default with Next.js
and the App Router.
Unlike Client Components, a Server
Component can be async.
Since it's only rendered on the server,
Next.js can wait for the Promise
returned by this function,
before generating the HTML that's
sent to the browser.
Another thing we can do in Server Components,
is import server-side functionality,
like the "readFile" function
provided by the Node "fs" module.
Let's use the "promises" variant,
that's more convenient.
"fs" stands for File System by the way.
But the point is that we can use this "readFile"
function inside our component.
So, we can get the Markdown "text"
by "awaiting" the "readFile" call.
As argument we need to pass the file path,
that is inside "content/reviews".
So the path will be "./",
which in this case means relative
to the project folder,
because when we run the "next
dev" or "next build" command
we do that inside the project folder,
so that's the working directory.
Anyway, the file path is
"content/reviews/stardew-valley.md".
That's the Markdown file we want to read.
We also need to pass a second argument,
that is the character encoding,
and should be "utf8".
Ok, so this way the "text" variable will
contain what's in the Markdown file.
Let's just display that "text" directly
inside the paragraph for now.
You can see its value in the page.
Now, we should really convert the Markdown
to HTML before displaying it,
and in fact we'll do that in the next video.
But this already shows that our component
is displaying the data loaded
from this Markdown file.
And we're reading that file directly
inside our component function.
If you used React in the past,
you'll know that normally this is not possible.
It only works with React Server Components,
because they are rendered only on the server,
and therefore they can access
Node.js built-in modules,
and also be async.