Custom App component

[00:00 - 00:05] Custom up component. Now that we've created all the components we need, let's use them in our application layout.

[00:06 - 00:15] What if we just include these components in Pages, Indexed TSX? This would work, but then we would have to include them into every page we're going to create.

[00:16 - 00:21] In addition to inconvenience, this will also violate the dry principle. Don't repeat yourself.

[00:22 - 00:27] For this problem, next has a solution. We can create a wrapper component for every page that next is going to render.

[00:28 - 00:32] This component is called App. Next uses the App component to initialize Pages.

[00:33 - 00:49] We can override it and control page initialization, which lets us persist the layout between page changes, keep the state when navigating Pages, inject additional data, and add global CSS. Let's create this component and see how can we use it in our application.

[00:50 - 00:58] Inside of the Pages folder, create new file, underscore app, TSX. Here Expert Default, a new function, we can call it myApp.

[00:59 - 01:06] It's going to receive a component and page props. We'll return the following layout.

[01:07 - 01:13] First of all, we want to provide a theme for all our pages. Add the theme provider, pass in the theme.

[01:14 - 01:18] We get it from Shared Theme. Inside we're under the global style, pass the theme to it as well.

[01:19 - 01:29] We'll allow that render head block with a title that says what's next. All our Pages must have title, so we will render it in the App component.

[01:30 - 01:42] Then we render the header component and below it the main block with the centered component that will render the page props. Here we'll render our page components with the page props provided by Next.

[01:43 - 01:59] And below the main block, we'll render our footer. Now our Pages rendered as component into the App will be wrapped into a theme provider, we'll have global styles defined on them, head block with a title saying what's next, header, footer, and the main wrapper around the content.