Building a Common Layout Component

Let's design a layout for the entire app. In this scenario, we'll create a component that aids in navigating through the app's pages and also provides the option to log out (more on authorization in upcoming chapters).

Back to the Project

Now, let's generate a layout.tsx for the dashboard. Within the /dashboard folder, introduce a new file named layout.tsx and insert the following code:

In this code, a few key actions are happening. Let's take a closer look:

• We are bringing in the <SideNav /> component and making it part of our layout. Any components we import here become part of the overall page design;

• The <Layout /> component has a children prop. This "child" can be either a page or another layout. Specifically, the pages located in /dashboard will be automatically placed within a <Layout />.

Now, attempt to follow the link http://localhost:3000/dashboard and navigate between the dashboard and the invoices page.