All language subtitles for 001 Reading Files_en

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.