1
00:00:02,000 --> 00:00:05,000
Besides reusing our Head content

2
00:00:05,000 --> 00:00:06,000
inside of a component,

3
00:00:06,000 --> 00:00:09,000
we also might have certain Head settings

4
00:00:09,000 --> 00:00:13,000
that should be the same across all page components.

5
00:00:13,000 --> 00:00:15,000
So we don't wanna copy and paste it

6
00:00:15,000 --> 00:00:18,000
into every single page component.

7
00:00:18,000 --> 00:00:21,000
Now we could solve this by outsourcing it

8
00:00:21,000 --> 00:00:24,000
into a separate file, into a separate component

9
00:00:24,000 --> 00:00:27,000
and then importing that into all the page components

10
00:00:27,000 --> 00:00:31,000
and using it there, but we can also use another approach.

11
00:00:31,000 --> 00:00:35,000
Next, JS has this _app.js file

12
00:00:35,000 --> 00:00:39,000
and it also has another file which we'll be able to utilize.

13
00:00:39,000 --> 00:00:43,000
Now, let's understand what the idea behind those files is

14
00:00:43,000 --> 00:00:44,000
before we dive into them.

15
00:00:44,000 --> 00:00:49,000
The _app.js file is your route app component

16
00:00:50,000 --> 00:00:53,000
which in the end is rendered for every page

17
00:00:53,000 --> 00:00:54,000
that is being displayed.

18
00:00:54,000 --> 00:00:58,000
This component here, which is received through props,

19
00:00:58,000 --> 00:01:01,000
this actually is the actual page component

20
00:01:01,000 --> 00:01:03,000
that should be rendered.

21
00:01:03,000 --> 00:01:08,000
MyApp, this component here is rendered by Next.js

22
00:01:08,000 --> 00:01:11,000
and this component prop will automatically be set

23
00:01:11,000 --> 00:01:15,000
by Next to JS so you don't need to do anything for that.

24
00:01:15,000 --> 00:01:18,000
But then you can utilize this _app.js file

25
00:01:18,000 --> 00:01:21,000
such that as we're currently doing it,

26
00:01:21,000 --> 00:01:25,000
you wrap your page content with our components.

27
00:01:25,000 --> 00:01:27,000
Like here, I'm wrapping the Layout component

28
00:01:27,000 --> 00:01:32,000
around the page component to give all pages the same layout

29
00:01:32,000 --> 00:01:35,000
so the same navigation bar, for example.

30
00:01:35,000 --> 00:01:39,000
So that actually is a file which we are already utilizing.

31
00:01:39,000 --> 00:01:44,000
And of course, therefore we could also import Head here

32
00:01:45,000 --> 00:01:50,000
from next/head imported into this app.js file

33
00:01:50,000 --> 00:01:54,000
and then add Head here to set some generic setting

34
00:01:54,000 --> 00:01:58,000
that applies to all our page components.

35
00:01:58,000 --> 00:02:02,000
For example, we could add another meta tag here

36
00:02:02,000 --> 00:02:06,000
with a name of viewport and then our content

37
00:02:06,000 --> 00:02:11,000
of let's say, initial-scale=1.0, width=device-width.

38
00:02:13,000 --> 00:02:17,000
This would be a meta tag which is often added to pages

39
00:02:17,000 --> 00:02:21,000
to ensure that the page is responsive and scales correctly

40
00:02:21,000 --> 00:02:23,000
and we therefore typically wanna add this

41
00:02:23,000 --> 00:02:27,000
to all our pages, not just to some.

42
00:02:27,000 --> 00:02:31,000
So that would be a great example for some head tax,

43
00:02:31,000 --> 00:02:34,000
some head element, which you wanna add to all pages

44
00:02:34,000 --> 00:02:37,000
but which you of course don't wanna copy around manually.

45
00:02:38,000 --> 00:02:41,000
Therefore we can add it once in this app.js file

46
00:02:41,000 --> 00:02:43,000
and if we do so, we see that

47
00:02:43,000 --> 00:02:46,000
if I reload this events page for example,

48
00:02:46,000 --> 00:02:48,000
and I inspect my rendered page,

49
00:02:48,000 --> 00:02:53,000
then here this viewport name is part of this page.

50
00:02:54,000 --> 00:02:55,000
So that works.

51
00:02:55,000 --> 00:02:57,000
Now, this is applied to all the pages

52
00:02:57,000 --> 00:03:01,000
by setting it up once in this _app.js file.