We set a default title in the RootLayout,
and a template that will add the website name
to any page-specific title.
Now, we should also set some
metadata in the ReviewPage,
so that each review will have
its own SEO-friendly title.
At the moment, it's always "Indie Gamer",
because that's the default.
But here we have a small problem,
in that the title should be
different for each review,
based on the data we read from the Markdown file.
So, we cannot simply export a constant object,
like we did in the other pages.
We need to load the review data first,
and only then we'll know what the title should be.
For these cases, Next.js lets
us export a function instead,
called "generateMetadata",
where we can run some code before
returning the metadata object.
What we want to do here is call getReview
to load the right data.
But to do that we need to know the "slug".
Even though it's not a component,
the "generateMetadata" function
receives some "props".
Let's start by logging them,
so you can see for yourself what they contain.
If we save, and check the server logs,
when we load this URL,
Next.js renders the ReviewPage component,
and also calls our "generateMetadata" function
passing some props with the "params"
that contain the "slug".
So, they're the same props passed
to our page component.
And that's how we can know which review to load.
We can destructure the "props"
in exactly the same way.
And then, instead of logging something,
we can load the review data,
just like we do in the component.
At this point we can return the metadata object,
setting the "title" to be simply "review.title".
And that's it.
If we reload this page now,
actually it already updated automatically;
but you can see that the title says "Hellblade",
followed by "Indie Gamer" as usual,
because it always uses the template.
If we look at another review,
this one shows "Hollow Knight" in the title.
As you would expect.
And if we open the Stardew Valley page
of course it will have the same
title in the browser tab.
So this is how we can set
the metadata dynamically,
after loading the data specific to each route.
We're only setting the "title" in this example,
but you could do the same for
other metadata properties,
like "description", "keywords", and so on.