Now, another thing we could add to this page,
to this site is the underscore document JS file
in the pages folder.
We did also learn about that earlier in the course.
It allows us to define the general structure of our page.
And for example, set an attribute on the HTML element itself
or add extra entry points,
extra elements
which we could use with react portal.
And I wanna use a portal in the next lecture.
So I will add this document here.
In here we should add a class based component
which we could call my document,
which should extend a component provided by next JS.
There we import from next slash document
and we import the document component.
And whilst we're here,
we can also already import a couple of other components.
These are imports we should add between curly braces though.
And that would be the HTML and the head component
which is different from the head component we just used.
This head component here should only be used
for setting up this document here.
And then also import main and next script.
And then my document should extend document.
And here we then add a render method.
Since it's a class-based component.
There we then return the HTML component used as a component.
Since we imported it, add the head,
add the body
and in there, then main and then next to that next script
so that everything can be rendered correctly.
You should make sure you don't break that structure.
And then we export this component as a default.
And now we can, for example,
go to the HTML element and add delaying attribute
to set this to E N.
And that's something which we can't do otherwise
but which we can now do
thanks to this underscore documented JS file.
And hence, if we do that and we then quit the Def server
and restart it,
which is required
if you added your own underscore document JS file.
At least for me at the moment it is required.
If you then reload that single post page
and you view the page source
then you see this lang attribute on the HTML element.
So that now also works.
And therefore adding this extra metadata
with the head component
and adding this underscore documentary JS file
is something you typically also wanna do,
to make sure that you do prepare your page
not just visually for your visitors,
so what they can see
but that you also set the correct metadata.