Override the Default App Component in Next.js

Instructor: [0:00] If you've worked with traditional React apps, you know that the index.tsx file is your starting file. There's a similar concept in Next.js as well, which is called the app component. Since Next.js works on the concept of pages, every page is initialized by that app component.

[0:18] By default, the app component is hidden, it's internal in Next.js, but we can override it to control the page initialization, if you want to persist layout between page changes, keep the state when navigating pages, if you want to do custom error handling, inject additional data into pages, or add global CSS.

[0:42] To override the default app, we need to create the _app.tsx file into the pages directory. Let's open exercise number seven and let's do that. Right click on pages, newfile_app.tsx. Just like any other page, the app component is an ordinary React component.

[1:07] In this case, we have some specific props that we need to define. Let's import the app props type from next/app, and define our props in the app component. The app props provide us with the component and the page props.

[1:24] Now, we can go ahead and return that component and spread the page props. This is the default configuration of the app component. Let's check it out and run npm run dev. Visit localhost:3000. We can see a heading overriding the app component.

[1:45] Let's visit the index page, and see that we have the overriding the app component here. That means nothing's changed. Everything works the same. Let's take a look at the app component.

[1:57] The component prop is your page component, which in this case, is the home component that we defined on line four. The page props is an object that contains the initial props that were preloaded by the data-fetching methods.

[2:13] If no data-fetching methods were used in that particular page, the page props object will be empty. Let's check it out. We're going to console.log page props. Let's open the console tab and check the output. There we go.

[2:35] We are logging out an object, but it's empty. The page props object represents the props for each page. To demonstrate that, let's add a title in the page props and try to obtain it from the home page.

[2:51] We'll say, "pageprops.title=this is my title." Now, we can go to the home page and obtain the title. The title will be string. We can obtain it from the props. Instead of overriding the app component, we're going to pass the title in the heading. Let's check it out. There we go. We can see, "This is my title."

[3:19] In some of the following lessons, we'll be doing data fetching, that can be either server side or static. The data that we're going to fetch will be passed in our page through the page props object. Let's recap. The _app.tsx is something similar to the index.tsx in traditional React apps.

[3:39] This is how Next.js renders every page. To define the app component properly, we needed to import the app props type from next/app and obtain the component and page props through the props.

[3:52] The component prop is our actual page. The page props is the data that our page receives. If the page receives no data, the page props will be empty.