All that, we are now finally pretty much done
with this application here.
Now I will quickly fix a styling error,
which I only just detected, which has been fixed
in the attachments I provided to you though,
so you already got the right styles earlier, but here,
I'll fix it
by moving position relative in the meal-item.module CSS file
from this meal header selector to the image selector.
Again, I did already fix that in the attachments
I provided to you, so you don't have to do anything
and you got the right styles all the time already.
But now here for me, those meals also look a bit better,
but that's just one thing.
The more important last step I want to go through
together with you is the page metadata
that you can add to your pages.
And you can see that in the root layout.JS file,
there we have a metadata constant
that's being exported and that's not some random constant,
but instead, NextJS is looking for exported variables
or constants called metadata
in all your page or layout files.
And then in this metadata object,
you can set some metadata fields,
which is also described in the official documentation.
There, you can find details about all the fields
you can set on this metadata object
and attached you find a link to this documentation
so that you can explore in depth
which fields can be set there.
In short, this metadata constant allows you to add
a bunch of metadata, which is then, for example,
exposed to search engine crawlers
or which shows up when you are sharing a link to a page
on X or Facebook.
Now here, I'll keep it fairly simple,
but I wanna add a title and description to every page.
Now, if you add this metadata to a layout,
it will automatically be added to all the pages
that are wrapped by that layout
unless a page specifies its own metadata.
In that case, the page metadata wins.
Any nested layout metadata would also win
over that root layout metadata,
but by setting this metadata here,
every page will at least have this basic metadata.
But now of course, I wanna set more specific metadata
for sum of my pages.
For example, for that all meals page.
There, it would be nice to have some metadata
and we can therefore add it by simply exporting
this metadata constant there as well.
And then here we could set the title to all meals,
and then maybe add a description of
browse the delicious meals shared
by our vibrant community, something like this.
If you do that and you go to that meals page, you'll see
that if you reload, you have this all meals title here.
And if you take a look at the page source,
you will also find this description meta tag in there,
which contains your description text as content.
Here it is.
So that's how you can add metadata,
but how can you add metadata to dynamic pages
where the title and the description
depends on the concrete data that has been loaded?
Adding static metadata like this
typically doesn't do the trick there.