1
00:00:02,000 --> 00:00:04,000
Now the underscore app JS file

2
00:00:04,000 --> 00:00:07,000
is not the only special next JS file,

3
00:00:07,000 --> 00:00:11,000
which allows us to set application wide settings.

4
00:00:11,000 --> 00:00:15,000
There also is the underscore document.JS file,

5
00:00:15,000 --> 00:00:20,000
which we can add just like _app def _document JS

6
00:00:22,000 --> 00:00:25,000
has to be added in the pages folder

7
00:00:25,000 --> 00:00:29,000
directly in the pages folder, not in some sub folder,

8
00:00:29,000 --> 00:00:32,000
but in the root level of the pages folder.

9
00:00:32,000 --> 00:00:33,000
It's not there by default,

10
00:00:33,000 --> 00:00:37,000
but if you add it next JS will take it into account

11
00:00:37,000 --> 00:00:38,000
and we'll use it.

12
00:00:38,000 --> 00:00:41,000
But what does documentary JS do.

13
00:00:41,000 --> 00:00:44,000
App JS is your application shell.

14
00:00:44,000 --> 00:00:48,000
You can imagine app JS as the root component

15
00:00:48,000 --> 00:00:53,000
inside of the body section of your HTML document.

16
00:00:53,000 --> 00:00:55,000
Document JS allows you to customize

17
00:00:55,000 --> 00:00:58,000
the entire HTML document.

18
00:00:58,000 --> 00:01:02,000
So all the elements that make up an HTML document,

19
00:01:02,000 --> 00:01:04,000
if you need to do that,

20
00:01:04,000 --> 00:01:07,000
you can add to the _documented JS file.

21
00:01:07,000 --> 00:01:10,000
And then you need to add a special component in there,

22
00:01:11,000 --> 00:01:14,000
a class-based component, as it turns out,

23
00:01:14,000 --> 00:01:17,000
which you could name my document,

24
00:01:17,000 --> 00:01:19,000
and it has to be a class-based component

25
00:01:19,000 --> 00:01:22,000
because it must extend some component offered

26
00:01:22,000 --> 00:01:25,000
and provided by next JS

27
00:01:25,000 --> 00:01:29,000
for this we need to add an import a import of document

28
00:01:29,000 --> 00:01:31,000
from next slash document.

29
00:01:32,000 --> 00:01:35,000
So we need to extend document here

30
00:01:35,000 --> 00:01:38,000
and therefore we need to use a class based component.

31
00:01:38,000 --> 00:01:41,000
And then in this class based component,

32
00:01:41,000 --> 00:01:44,000
we need to add a render method like we do

33
00:01:44,000 --> 00:01:47,000
in class based react components.

34
00:01:47,000 --> 00:01:50,000
And then here we return some JSX code.

35
00:01:51,000 --> 00:01:54,000
That also should be special JSX code

36
00:01:54,000 --> 00:01:56,000
with a very specific structure.

37
00:01:57,000 --> 00:01:59,000
For this we need to import more components

38
00:01:59,000 --> 00:02:02,000
from next document.

39
00:02:02,000 --> 00:02:06,000
And those components are the HTML component,

40
00:02:06,000 --> 00:02:10,000
the head component, the main component,

41
00:02:10,000 --> 00:02:12,000
and the next script component.

42
00:02:13,000 --> 00:02:16,000
Very important the head component,

43
00:02:16,000 --> 00:02:18,000
which we are importing here

44
00:02:18,000 --> 00:02:22,000
is not the same head component as we import from next head.

45
00:02:22,000 --> 00:02:25,000
These are different components.

46
00:02:25,000 --> 00:02:29,000
Head from next head is important to use it anywhere

47
00:02:29,000 --> 00:02:32,000
in your JSX code to adjust the head content

48
00:02:32,000 --> 00:02:35,000
of the rendered page,

49
00:02:35,000 --> 00:02:37,000
head imported from next document

50
00:02:37,000 --> 00:02:41,000
should only be used in this special document component,

51
00:02:41,000 --> 00:02:42,000
which we are building here.

52
00:02:43,000 --> 00:02:46,000
Now with those components imported

53
00:02:46,000 --> 00:02:49,000
in the rendered JSX content here,

54
00:02:49,000 --> 00:02:53,000
we should return a JSX structure

55
00:02:53,000 --> 00:02:57,000
where we have the HTML element as a rapper.

56
00:02:57,000 --> 00:03:00,000
Then we have the head element like this,

57
00:03:00,000 --> 00:03:04,000
and then we have a body HTML element,

58
00:03:04,000 --> 00:03:07,000
so no special component,

59
00:03:07,000 --> 00:03:11,000
but the standard body element and inside of that main,

60
00:03:11,000 --> 00:03:14,000
and next script like this,

61
00:03:15,000 --> 00:03:18,000
that is the default structure, which you should add.

62
00:03:18,000 --> 00:03:20,000
And that's the default structure,

63
00:03:20,000 --> 00:03:24,000
which the default document has if you don't override it.

64
00:03:24,000 --> 00:03:26,000
So if you override it,

65
00:03:26,000 --> 00:03:28,000
you wanna recreate that structure

66
00:03:28,000 --> 00:03:31,000
and you should also of course export the document

67
00:03:31,000 --> 00:03:33,000
as the default.

68
00:03:33,000 --> 00:03:36,000
Now what could be reasons for overriding

69
00:03:36,000 --> 00:03:38,000
that default document?

70
00:03:38,000 --> 00:03:42,000
Well if you want to configure that general document,

71
00:03:42,000 --> 00:03:46,000
for example if you wanna add the Lang attribute

72
00:03:46,000 --> 00:03:51,000
on HTML and set this to en if we don't do this

73
00:03:52,000 --> 00:03:55,000
and save everything and we reload,

74
00:03:55,000 --> 00:03:57,000
we see that there is no Lang attribute

75
00:03:57,000 --> 00:03:59,000
on the rendered HTML element.

76
00:04:01,000 --> 00:04:04,000
If we do that, if we add Lang and set this to en

77
00:04:04,000 --> 00:04:08,000
or to whichever language applies to your page,

78
00:04:08,000 --> 00:04:11,000
then if we restart the Dev Server,

79
00:04:11,000 --> 00:04:13,000
which we need to do here once,

80
00:04:13,000 --> 00:04:17,000
if we reload the page there after we see the Lang attribute,

81
00:04:17,000 --> 00:04:19,000
so I needed to restart the server here

82
00:04:19,000 --> 00:04:20,000
for this to have an effect,

83
00:04:20,000 --> 00:04:23,000
but then we see that this is taken into account.

84
00:04:24,000 --> 00:04:27,000
We could also add other elements here to the body,

85
00:04:27,000 --> 00:04:32,000
like for example a div with an idea of overlays like that.

86
00:04:34,000 --> 00:04:35,000
If we do that and save this,

87
00:04:37,000 --> 00:04:41,000
and we reload we see in the body there is this div

88
00:04:41,000 --> 00:04:42,000
why might we wanna do that?

89
00:04:42,000 --> 00:04:47,000
Well this allows us to add HTML content outside

90
00:04:47,000 --> 00:04:50,000
of our application component tree.

91
00:04:50,000 --> 00:04:52,000
For example for using those elements

92
00:04:52,000 --> 00:04:54,000
with react portals then

93
00:04:54,000 --> 00:04:57,000
we could select this div with a react portal

94
00:04:57,000 --> 00:05:01,000
to portal our modals or overlays to this element.

95
00:05:01,000 --> 00:05:04,000
So having extra HTML elements,

96
00:05:04,000 --> 00:05:07,000
which are outside of our application components tree

97
00:05:07,000 --> 00:05:09,000
can sometimes be useful

98
00:05:09,000 --> 00:05:12,000
because you are next to JS application

99
00:05:12,000 --> 00:05:14,000
is in the end rendered by this main component,

100
00:05:14,000 --> 00:05:16,000
which would therefore must include,

101
00:05:16,000 --> 00:05:20,000
but adding extra elements can sometimes also be beneficial

102
00:05:20,000 --> 00:05:25,000
and therefore If you need to edit the overall HTML document,

103
00:05:25,000 --> 00:05:29,000
you can do this by adding such _document JS file.