Custom document component

[00:00 - 01:20] a custom document component. We have created global styles and a theme. Our app is going to be using a custom font and to load it we can use a custom document component. In next.js a custom document component is used to augment your application's HTML and body tags. So we can include loading the font there and also some global styles. Inside of the pages folder create a new file, underscore document.tsx and here define the class component my document expert default class my document extends document import document from next document. Define the render function in it render return here will render a top level HTML block inside of it will render head with meta tag for description and the link to load the permanent marker font. Then we'll render our styles from the props. These props styles below the head element will render the body. It will have our main content main and also next script. The main and next script blocks are required for the page to be properly rendered. Next script is a service component required for next to work correctly.

[01:21 - 02:31] As you can see we're under the styles from the props. To get them we have to define the get initial props method static async get initial props. It will receive context of type document context. Inside of it we'll get the style sheet from the server and then the original render page. Then here we'll try to render the page inside of the tribe block and regardless of the result if we have an error or do it successfully we call sheet seal. This way we make sure that the sheet object is available for the garbage collection. Now inside of the tribe block we'll want to define the render page as the original render page with enhance app option where we pass the collected styles to the app as props. After we've redefined the render page we get the initial props and then we return an object with initial props plus styles that we get from initial props styles plus style element that we got from the server style sheet. Here we extend the initial props with styles prop to make it available in the render method. As you remember we used it here on line 50.

[02:32 - 02:45] If you launch your application Yarn Dev you should see that the layout contains the meta tag description with next generation of a new feed feed text and it should also include the link to the permanent marker font.