Now in the last lecture
we added to the _appJS file.
There is an important implication of this.
Now we have to have the element there in appJS
and we of course still also have it
in our page components.
In indexJS in the events folder,
for example, I also have .
And as you see on the rendered page, both is applied.
The title and description from the page component
and the viewport from the _appJS file.
And this is important,
NextJS automatically merges multiple elements.
So if you set a here in _appJS,
and then also in the page component,
the content of those different sections gets merged.
Even if we would have multiple sections here
inside of a single component,
the content would be merged by NextJS.
But of course that means that we could also have conflicts.
For example, I could have a another set here
for whatever reasons, and now I set a here and here.
Now NextJS automatically merges your sections,
and it also resolves such conflicts.
If I add multiple titles here and I reload this Events page,
you see only one title shows up here, not multiple titles.
It simply takes the latest element,
if you have to same element multiple times.
So if we have the here and here,
the second wins.
The same would be true for meta elements
with a name attribute.
If you have other content,
which is neither a title
nor a meta element with the name attribute,
but let's say a meta element with some other attributes,
then you can always add a manual key here,
like description to still allow NextJS
to find out if two elements are clashing.
And then, again, the latter one will win.
Now, of course, this is redundant code here, this extra head
I just wanted to show this NextJS behavior.
And that it does have an important implication
because it means that in _appJS, we can indeed
also go into the head section we set up there,
and define a general title that applies to all pages,
unless it's overwritten.
This ensures that we always have a title on every page,
even if we forget to set a page specific one,
which we, of course, typically want to do.
So here, I'll then give all my pages a general title,
and also a general description.
Again, that will be overwritten by the page specific data,
but in case we don't have page specific data,
then this general data would kick in.
So here I have my general setup,
but if I reload this All Events page,
we don't see that there.
Because we do have page specific data here,
and that then overrides the more general data.
Because the page component is rendered
after the app component.
So the later section wins
and that will be the head section,
instead of the page component.