All language subtitles for 003 Dynamic Metadata_en

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.