We rewrote two functions to fetch
the data from the CMS:
"getReview" and "getReviews".
Now, there are two other functions in this file.
We have "getFeaturedReview",
but this one just calls "getReviews"
and then returns the first element.
So it should already work,
if we go to the Home page.
We do see "Hades", that's most
recent review in the CMS.
We could make "getFeaturedReview" more efficient,
because at the moment "getReviews"
always fetches 6 entries
even though getFeaturedReview
only uses the first one.
But we'll revisit the Home page later on anyway.
The other function we have here is "getSlugs".
If you remember, we used this in the ReviewPage,
in "generateStaticParams".
Let's re-enable this code now,
so Next.js will statically generate
our dynamic route again.
Let me add a log statement here,
and print all the "slugs" received
by "generateStaticParams",
so we can see what happens during the build.
By the way, we've been adding quite
a few "console.log" messages.
Let's do some cleanup,
otherwise there will be too
much noise in the logs.
I'll comment out these "rendering" messages.
No need to log the full "reviews"
array every time.
These messages are useful only if we're
working on that piece of code.
In fact, we can remove the button
clicked one altogether.
I'll keep the other ones commented out,
so we can easily re-enable them if we need to.
The last one is in "strapi-request",
that's a separate script, so
we can leave it as it is.
Now, let's see what data "getSlugs"
returns at the moment,
if we stop the dev server,
and do a production build,
by running "npm run build".
"generateStaticParams" receives
an array with 3 strings,
based on the Markdown files available locally.
The build then fails,
because it tries to fetch a review from the
CMS using "hellblade" as the "slug",
but that's only available locally.
That's why we need to rewrite
the "getSlugs" function,
and fetch the "slugs" from the CMS instead,
similarly to what we did in "getReviews".
In fact, the "fetch" request
will be pretty similar,
except that we only want the "slug" field.
We don't need to populate the "image" either.
We can keep sorting the reviews
by most recent first,
because the API always returns
a limited number of entries.
Ideally we'd like to get all the slugs,
but if we don't specify a "pageSize"
Strapi will only return 25 entries by default.
What we could do is set a high number, like 100.
If we end up having more than 100 reviews
it might make sense to only generate static pages
for the most recent 100 entries.
Anyway, we'll see in another section what happens
if you request a review that
wasn't statically generated.
For now let's just say that 100 is more
than enough to get all of them.
Now, here we want to return an
array with all the slugs,
so for each item we want to extract
only the "slug" attribute.
And this way we should return an array of strings.
At this point we can also remove
the "node:fs" imports,
because we no longer read any local files.
We should be fetching all the data from the CMS.
Let's test this by running another build,
and see which pages it generates.
We can see all the slugs received
by "generateStaticParams".
These are all the 25 reviews available in Strapi.
And in fact under the "/reviews/[slug]"
dynamic route
it says it generated "hades-2018",
"fall-guys", "black-mesa",
plus 22 more paths.
So it generated a static page for each review.
And this is the "getSlugs" function
reimplemented to work with Strapi.