Зміст курсу
Next.js 14
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.
Дякуємо за ваш відгук!