Besides reusing our Head content
inside of a component,
we also might have certain Head settings
that should be the same across all page components.
So we don't wanna copy and paste it
into every single page component.
Now we could solve this by outsourcing it
into a separate file, into a separate component
and then importing that into all the page components
and using it there, but we can also use another approach.
Next, JS has this _app.js file
and it also has another file which we'll be able to utilize.
Now, let's understand what the idea behind those files is
before we dive into them.
The _app.js file is your route app component
which in the end is rendered for every page
that is being displayed.
This component here, which is received through props,
this actually is the actual page component
that should be rendered.
MyApp, this component here is rendered by Next.js
and this component prop will automatically be set
by Next to JS so you don't need to do anything for that.
But then you can utilize this _app.js file
such that as we're currently doing it,
you wrap your page content with our components.
Like here, I'm wrapping the Layout component
around the page component to give all pages the same layout
so the same navigation bar, for example.
So that actually is a file which we are already utilizing.
And of course, therefore we could also import Head here
from next/head imported into this app.js file
and then add Head here to set some generic setting
that applies to all our page components.
For example, we could add another meta tag here
with a name of viewport and then our content
of let's say, initial-scale=1.0, width=device-width.
This would be a meta tag which is often added to pages
to ensure that the page is responsive and scales correctly
and we therefore typically wanna add this
to all our pages, not just to some.
So that would be a great example for some head tax,
some head element, which you wanna add to all pages
but which you of course don't wanna copy around manually.
Therefore we can add it once in this app.js file
and if we do so, we see that
if I reload this events page for example,
and I inspect my rendered page,
then here this viewport name is part of this page.
So that works.
Now, this is applied to all the pages
by setting it up once in this _app.js file.