Creating a Common Layout
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 achildren
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.
Layout
component remains unaltered and consistently available to the user, while other pages dynamically update as they are viewed.
¿Todo estuvo claro?
Contenido del Curso
Next.js 14
4. Deployment and Database
Next.js 14
Creating a Common Layout
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 achildren
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.
Layout
component remains unaltered and consistently available to the user, while other pages dynamically update as they are viewed.
¿Todo estuvo claro?