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
Setting Up the Next.js Project Understanding the Project File and Folder StructureStyling Approaches in Next.jsAdding the Global CSS FileUsing Tailwind CSS for StylingWorking with CSS ModulesApplying Styles ConditionallyAdding Custom Google FontsChallenge: Implementing a Custom Google FontHandling Images in Next.js
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
Understanding AuthenticationSetting Up the Login RouteUsing NextAuth.js for AuthenticationConfiguring Authentication and Protecting RoutesHashing Passwords and Managing CredentialsImplementing Sign-In FunctionalityConnecting the UI with Authentication LogicImplementing Logout FunctionalityFinal Thoughts and Next Steps
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 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.
Everything was clear?
Thanks for your feedback!
Section 3. Chapter 3