All language subtitles for 008 The __document.js_ File (And What It Does)_Downloadly.ir_en

Now the underscore app JS file

is not the only special next JS file,

which allows us to set application wide settings.

There also is the underscore document.JS file,

which we can add just like _app def _document JS

has to be added in the pages folder

directly in the pages folder, not in some sub folder,

but in the root level of the pages folder.

It's not there by default,

but if you add it next JS will take it into account

and we'll use it.

But what does documentary JS do.

App JS is your application shell.

You can imagine app JS as the root component

inside of the body section of your HTML document.

Document JS allows you to customize

the entire HTML document.

So all the elements that make up an HTML document,

if you need to do that,

you can add to the _documented JS file.

And then you need to add a special component in there,

a class-based component, as it turns out,

which you could name my document,

and it has to be a class-based component

because it must extend some component offered

and provided by next JS

for this we need to add an import a import of document

from next slash document.

So we need to extend document here

and therefore we need to use a class based component.

And then in this class based component,

we need to add a render method like we do

in class based react components.

And then here we return some JSX code.

That also should be special JSX code

with a very specific structure.

For this we need to import more components

from next document.

And those components are the HTML component,

the head component, the main component,

and the next script component.

Very important the head component,

which we are importing here

is not the same head component as we import from next head.

These are different components.

Head from next head is important to use it anywhere

in your JSX code to adjust the head content

of the rendered page,

head imported from next document

should only be used in this special document component,

which we are building here.

Now with those components imported

in the rendered JSX content here,

we should return a JSX structure

where we have the HTML element as a rapper.

Then we have the head element like this,

and then we have a body HTML element,

so no special component,

but the standard body element and inside of that main,

and next script like this,

that is the default structure, which you should add.

And that's the default structure,

which the default document has if you don't override it.

So if you override it,

you wanna recreate that structure

and you should also of course export the document

as the default.

Now what could be reasons for overriding

that default document?

Well if you want to configure that general document,

for example if you wanna add the Lang attribute

on HTML and set this to en if we don't do this

and save everything and we reload,

we see that there is no Lang attribute

on the rendered HTML element.

If we do that, if we add Lang and set this to en

or to whichever language applies to your page,

then if we restart the Dev Server,

which we need to do here once,

if we reload the page there after we see the Lang attribute,

so I needed to restart the server here

for this to have an effect,

but then we see that this is taken into account.

We could also add other elements here to the body,

like for example a div with an idea of overlays like that.

If we do that and save this,

and we reload we see in the body there is this div

why might we wanna do that?

Well this allows us to add HTML content outside

of our application component tree.

For example for using those elements

with react portals then

we could select this div with a react portal

to portal our modals or overlays to this element.

So having extra HTML elements,

which are outside of our application components tree

can sometimes be useful

because you are next to JS application

is in the end rendered by this main component,

which would therefore must include,

but adding extra elements can sometimes also be beneficial

and therefore If you need to edit the overall HTML document,

you can do this by adding such _document JS file.