Original subtitles

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.