Зміст курсу

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

Project Set Up Project File-Folder Strcture Styling Approaches Adding the Global CSS File Tailwind Styling CSS Modules Conditionally Applying Styles Custom Google Fonts Challenge: Adding Custom Google Font Images

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

How to Fetch Data Working with the Dashboard Page Practice and Challenge: Retrieving Data Dynamic vs Static Rendering Loaders Specific Parts Loaders Challenge: Skeleton Loader Grouping Components for Loaders

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Understanding Authentication Login Route NextAuth.js Authentication Configuration & Route Protection Password Hashing & Credentials Sign-in Functionality Connecting UI & Functionality Logout Functionality What's Next?

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

Most of the components have already been created for you, so you can focus solely on exploring the features of Next.js. If you are unsure about the origin of a particular UI element, it is recommended that you inspect all the components on the current page and navigate through different sections to break them down and understand them better.

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:

app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-80">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

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.

This is where the beauty of Next.js shines through. The Layout component remains unaltered and consistently available to the user, while other pages dynamically update as they are viewed.

Все було зрозуміло?

Секція 3. Розділ 3

Зміст курсу

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Next.js 14

Creating a Common Layout

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:

app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-80">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

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.

This is where the beauty of Next.js shines through. The Layout component remains unaltered and consistently available to the user, while other pages dynamically update as they are viewed.

Все було зрозуміло?

Секція 3. Розділ 3