To recap, we created this FirstPostPage,
but we'd like to load the content
to be displayed inside that page
from this Markdown file.
To get there step by step,
let's leave the Markdown aside for the moment.
And instead look at
how we can load some data
into a Next.js page.
It doesn't really matter
if that data comes from
a local Markdown file,
or somewhere else,
like an external API.
We know that a Next.js page
is a React component,
and you should also know that
we can pass "props" to a React component.
Let's log those props
when the component is rendered.
At the moment, props is
just an empty object,
in other words, there no props
passed to this component.
Which is perhaps not surprising because
this component is a page,
so in a sense it's the top-level
component of our application.
There's nothing passing props down
to this component.
But in Next.js there is a actually a way
for us to pass some props to a page,
which is useful precisely to load some data
that can then be displayed in the page.
To do that we need to create
a function named "getStaticProps".
And this function needs to be exported,
and also "async".
Because loading data is
usually done asynchronously,
so it makes sense to return a Promise.
Now, this function returns an object,
or, more accurately,
a Promise of an object,
since it's async.
And this object contains
the "props" that we want to pass
to our page component.
As "props" we can pass whatever we want,
so let's start with a couple of test values.
And if we save this now,
we need to reload the page,
because those props are set server-side.
But you can see in the browser console that
the FirstPostPage component received
the value we returned
in our "getStaticProps" function.
Ok, now that we know
how to pass props
we can use this to pass
the "post" data.
Each post can have a "title",
like "First Post",
and then let's call it the "body"
will contain the main content
for this post,
Let's specify that this comes
from static props,
so it will be clearer
once we load it into the page.
And if we reload the page,
of course we should see
our post object received in the props.
Ok. At this point we can use
that post data in our component.
We can extract the "post" prop,
since it's the only one we expect.
And then replace,
anywhere we wrote "First Post"
with the "post.title".
While inside this paragraph
we want to display
the "post.body".
So with this,
you can see that the page is now displaying
"My first post, as static props".
It updated using Fast Refresh
but it will be the same
if we reload the page of course.
Ok. So this is how we can pass props
to a page component in Next.js.
So far we hard-coded these props
inside our "getStaticProps" function,
but later on we'll load
the post data from our Markdown file.
Before we get to that though,
in the next video I want to show you
in more detail
how getStaticProps works,
in terms of when Next.js calls that function
and also why it's called get "static" props.