Зміст курсу

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

Challenge: Adding Custom Google Font

We continue our work within the fonts.ts file. Let's import Rubik font with 400 weight and latin subsets. Apply this font to the p element in the app/page.tsx file.

It's best to try solving it on your own. If you need help, refer to the solution below:

app/ui/fonts.ts

import { Poppins, Rubik } from "next/font/google";

export const poppins = Poppins({ weight: ["400"], subsets: ["latin"] });
export const rubik = Rubik({ weight: ["400"], subsets: ["latin"] });

app/page.tsx

// ...
import { rubik } from "./ui/fonts";

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-sky-700 p-4 md:h-52">
        {/* <TradeHubLogo /> */}
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row ">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-neutral-900 px-6 py-10 md:w-2/5 md:px-20">
          <div className={style.circle} />
          <p
            className={`${rubik.className} text-5xl text-white md:text-3xl md:leading-normal`}
          >
            <strong>Welcome to TradeHub!</strong>
          </p>
          {/* ... */}
        </div>
        {/* ... */}
      </div>
    </main>
  );
}

To finalize the use of fonts, uncomment the TradeHubLogo component in the app/page.tsx file, and check the live page.

app/page.tsx

// ...

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-sky-700 p-4 md:h-52">
        <TradeHubLogo />
      </div>
      {/* ... */}
    </main>
  );
}

We should be able to see the following view of our application.

In Practice

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

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

Зміст курсу

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

Challenge: Adding Custom Google Font

We continue our work within the fonts.ts file. Let's import Rubik font with 400 weight and latin subsets. Apply this font to the p element in the app/page.tsx file.

It's best to try solving it on your own. If you need help, refer to the solution below:

app/ui/fonts.ts

import { Poppins, Rubik } from "next/font/google";

export const poppins = Poppins({ weight: ["400"], subsets: ["latin"] });
export const rubik = Rubik({ weight: ["400"], subsets: ["latin"] });

app/page.tsx

// ...
import { rubik } from "./ui/fonts";

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-sky-700 p-4 md:h-52">
        {/* <TradeHubLogo /> */}
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row ">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-neutral-900 px-6 py-10 md:w-2/5 md:px-20">
          <div className={style.circle} />
          <p
            className={`${rubik.className} text-5xl text-white md:text-3xl md:leading-normal`}
          >
            <strong>Welcome to TradeHub!</strong>
          </p>
          {/* ... */}
        </div>
        {/* ... */}
      </div>
    </main>
  );
}

To finalize the use of fonts, uncomment the TradeHubLogo component in the app/page.tsx file, and check the live page.

app/page.tsx

// ...

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-sky-700 p-4 md:h-52">
        <TradeHubLogo />
      </div>
      {/* ... */}
    </main>
  );
}

We should be able to see the following view of our application.

In Practice

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

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