1 00:00:02,000 --> 00:00:05,000 Now, another thing we could add to this page, 2 00:00:05,000 --> 00:00:10,000 to this site is the underscore document JS file 3 00:00:10,000 --> 00:00:12,000 in the pages folder. 4 00:00:12,000 --> 00:00:15,000 We did also learn about that earlier in the course. 5 00:00:15,000 --> 00:00:19,000 It allows us to define the general structure of our page. 6 00:00:19,000 --> 00:00:23,000 And for example, set an attribute on the HTML element itself 7 00:00:23,000 --> 00:00:26,000 or add extra entry points, 8 00:00:26,000 --> 00:00:27,000 extra elements 9 00:00:27,000 --> 00:00:31,000 which we could use with react portal. 10 00:00:31,000 --> 00:00:33,000 And I wanna use a portal in the next lecture. 11 00:00:33,000 --> 00:00:36,000 So I will add this document here. 12 00:00:37,000 --> 00:00:40,000 In here we should add a class based component 13 00:00:40,000 --> 00:00:42,000 which we could call my document, 14 00:00:42,000 --> 00:00:47,000 which should extend a component provided by next JS. 15 00:00:48,000 --> 00:00:52,000 There we import from next slash document 16 00:00:52,000 --> 00:00:56,000 and we import the document component. 17 00:00:56,000 --> 00:00:57,000 And whilst we're here, 18 00:00:57,000 --> 00:01:00,000 we can also already import a couple of other components. 19 00:01:00,000 --> 00:01:05,000 These are imports we should add between curly braces though. 20 00:01:05,000 --> 00:01:08,000 And that would be the HTML and the head component 21 00:01:08,000 --> 00:01:12,000 which is different from the head component we just used. 22 00:01:12,000 --> 00:01:14,000 This head component here should only be used 23 00:01:14,000 --> 00:01:17,000 for setting up this document here. 24 00:01:17,000 --> 00:01:21,000 And then also import main and next script. 25 00:01:21,000 --> 00:01:24,000 And then my document should extend document. 26 00:01:24,000 --> 00:01:26,000 And here we then add a render method. 27 00:01:26,000 --> 00:01:29,000 Since it's a class-based component. 28 00:01:29,000 --> 00:01:34,000 There we then return the HTML component used as a component. 29 00:01:35,000 --> 00:01:38,000 Since we imported it, add the head, 30 00:01:38,000 --> 00:01:39,000 add the body 31 00:01:39,000 --> 00:01:44,000 and in there, then main and then next to that next script 32 00:01:44,000 --> 00:01:47,000 so that everything can be rendered correctly. 33 00:01:47,000 --> 00:01:50,000 You should make sure you don't break that structure. 34 00:01:50,000 --> 00:01:54,000 And then we export this component as a default. 35 00:01:55,000 --> 00:01:57,000 And now we can, for example, 36 00:01:57,000 --> 00:02:00,000 go to the HTML element and add delaying attribute 37 00:02:00,000 --> 00:02:03,000 to set this to E N. 38 00:02:03,000 --> 00:02:05,000 And that's something which we can't do otherwise 39 00:02:05,000 --> 00:02:07,000 but which we can now do 40 00:02:07,000 --> 00:02:10,000 thanks to this underscore documented JS file. 41 00:02:10,000 --> 00:02:13,000 And hence, if we do that and we then quit the Def server 42 00:02:13,000 --> 00:02:14,000 and restart it, 43 00:02:14,000 --> 00:02:15,000 which is required 44 00:02:15,000 --> 00:02:19,000 if you added your own underscore document JS file. 45 00:02:19,000 --> 00:02:21,000 At least for me at the moment it is required. 46 00:02:21,000 --> 00:02:24,000 If you then reload that single post page 47 00:02:24,000 --> 00:02:26,000 and you view the page source 48 00:02:26,000 --> 00:02:31,000 then you see this lang attribute on the HTML element. 49 00:02:31,000 --> 00:02:33,000 So that now also works. 50 00:02:33,000 --> 00:02:36,000 And therefore adding this extra metadata 51 00:02:36,000 --> 00:02:38,000 with the head component 52 00:02:38,000 --> 00:02:41,000 and adding this underscore documentary JS file 53 00:02:41,000 --> 00:02:44,000 is something you typically also wanna do, 54 00:02:44,000 --> 00:02:46,000 to make sure that you do prepare your page 55 00:02:46,000 --> 00:02:49,000 not just visually for your visitors, 56 00:02:49,000 --> 00:02:50,000 so what they can see 57 00:02:50,000 --> 00:02:53,000 but that you also set the correct metadata.