Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Building a Common Layout Component | Building Pages and Layouts in Next.js
Next.js 14 Mastery for Building Modern Web Apps
course content

Course Content

Next.js 14 Mastery for Building Modern Web Apps

Next.js 14 Mastery for Building Modern Web Apps

1. Introduction to Next.js
2. Setting Up a Next.js Project
3. Building Pages and Layouts in Next.js
4. Deploying a Next.js App and Setting Up a Database
5. Fetching and Displaying Data in Next.js
6. Advanced Next.js Features and Optimizations
7. Implementing Authentication in Next.js

book
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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 3
We're sorry to hear that something went wrong. What happened?
some-alt