We're now generating the list
of available posts automatically
based on the Markdown files present
inside our "content" folder.
But there's another place
where we still have a manual list of posts:
that's the Home page.
In fact right now we're only showing
a link to the "First Post" here.
We could change the HomePage code
to call our new "getSlugs" function
and automatically generate
a list of links for all the available posts.
Now, we know that there's a way to pass
some "props" to a page component.
So here's a mini-challenge for you:
why don't you pause this video
and try to implement this step yourself?
We want the HomePage to receive
the list of post "slugs"
returned by the "getSlugs" function,
and just log them for now.
Do you remember how to do that?
I'll wait just a couple of seconds
before moving on to the solution.
Ok, so the way we can pass
some "props" to a page component
is by writing a "getStaticProps" function.
Here we can call "getSlugs",
that we can auto-import.
And this will return the "slugs"
but as a Promise that we need to "await".
The "getStaticProps" function always returns
an object with the "props",
and in this case we want our "props"
to contain the "slugs".
Ok, let's save this file
and see what happens.
We'll need to reload the page
for "getStaticProps" to get called.
But you can see that the HomePage component
received an array of "slugs"
with the 3 available posts.
Ok. At this point we could use those "slugs"
to generate the list of links in the page,
by repeating the list item element
using a different "slug" on each Link.
There's a small problem though.
In addition to the slug,
in the link we also show the post title,
and we don't currently have this
in our props.
So just calling "getSlugs" is not enough.
We'll need to write another function
that gives us not only the slugs
but also the titles of all posts.
Let's create that new function,
as usual exported and async,
and let's call it "getPosts".
Here we can start by getting all the "slugs",
by calling our existing "getSlugs" function.
And then we can build
an array of "posts",
that is what we want to return
from this function.
And to fill that array we want to
iterate through each "slug".
Given a "slug" we can get
a full "post" object by calling
our other existing function,
that is "getPost".
And at this point we can simply
add this "post" to the array.
Ok. Let's see if this works.
In our HomePage we want to use
"getPosts" instead of "getSlugs".
And we'll get a list of "posts",
that's what we'll pass in the props.
If we reload the page,
we can see that the HomePage
received an array with 3 posts.
And each "post" object has
"body", "date", and "title".
So that's not quite what we wanted,
because we also need the "slug" for each post
to generate a link,
and that's missing from these properties.
So let's go and modify
our "getPosts" function a little bit,
and when we "push" each element
we can create an object
that includes the "slug",
and then expand
all the other "post" properties,
using the spread syntax.
Let's save these changes
and try again.
If we look at an individual post now,
you can see that we have the "slug"
in addition to the other properties.
We only really need "slug" and "title",
so we could actually remove the "body",
but that's an optimization
that I'm not going to worry about
for this example.
Rather, let's go and make use
of those "posts" we receive
in the HomePage "props" now.
We want to repeat each list item element,
so let's take the "posts"
and "map" each "post"
to the JSX elements
displaying a link to that post.
We can reuse our existing
list item element,
but we want to replace the "href"
with an expression.
And I'm using a template literal
so we can insert the "post.slug"
inside this string.
Finally we can display the "post.title"
as the link text.
And let's not forget to add a "key"
to each item.
As you probably know, in React
whenever we have an array of elements
we need to set a "key" on each element
that uniquely identifies it.
So here we could use the "post.slug",
that should be unique.
And with this, we can save,
and we see three links in the page,
one for every available post.
Let's refresh the page, just in case,
and test those links.
The "Second Post" works fine,
and so does the third one, so looks like
our task for this video is done.
And this is how we can
generate a list of links automatically
in our HomePage.
We're simply using a "getStaticProps" function
to populate the list of available posts.