Custom App component
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)