Next.js 14 Mastery for Building Modern Web Apps

Challenge: Implementing a 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.

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

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

In Practice

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 9

some-alt

Next.js 14 Mastery for Building Modern Web Apps

0%

1. Introduction to Next.js

Let's discuss what you need to learn before diving into the Next.js framework, what to expect from this course, and what you'll build.

Welcome to the Course

Project Overview

Course Prerequisites

How This Course Is Structured

2. Setting Up a Next.js Project

We will set up the project, inspect ways to add styling to our app and cover visual aspects such as images, fonts, pages, and layouts.

Setting Up the Next.js Project

Understanding the Project File and Folder Structure

Styling Approaches in Next.js

Adding the Global CSS File

Using Tailwind CSS for Styling

Working with CSS Modules

Applying Styles Conditionally

Adding Custom Google Fonts

Challenge: Implementing a Custom Google Font

Handling Images in Next.js

3. Building Pages and Layouts in Next.js

Learn how to easily create and manage a new view for your app and navigate through all pages seamlessly with an incorporated routing system.

How Next.js Routing Works

Challenge: Creating a New Page

Building a Common Layout Component

Optimizing Navigation in Next.js

Creating and Managing Active Links

4. Deploying a Next.js App and Setting Up a Database

Deploy the Next.js app using GitHub and Vercel accounts. Additionally, establish a database to supply the app with the necessary data.

Setting Up GitHub and Vercel Accounts

Deploying the Next.js App to Vercel

Setting Up a Project Database

Populating the Database with Initial Data

5. Fetching and Displaying Data in Next.js

Consider how to obtain and show data to the user clearly and efficiently.

How to Fetch Data in Next.js

Working with the Dashboard Page

Challenge: Retrieving and Displaying Data

Dynamic vs. Static Rendering in Next.js

Understanding Loaders

Implementing Specific Part Loaders

Challenge: Create a Skeleton Loader

Optimizing Loaders with Component Grouping

6. Advanced Next.js Features and Optimizations

Discover how to implement modern web features such as pagination, CRUD operations, global search, form validation, and more.

Building the Invoices Page

Developing the Search Functionality

Adding Pagination to a Next.js App

Using Server Actions in Next.js

Creating a New Item in the Database

Updating an Item in the Database

Deleting an Item in the Database

Challenge: Implementing Form Validation

7. Implementing Authentication in Next.js

Authentication implementation in Next.js.

Understanding Authentication

Setting Up the Login Route

Using NextAuth.js for Authentication

Configuring Authentication and Protecting Routes

Hashing Passwords and Managing Credentials

Implementing Sign-In Functionality

Connecting the UI with Authentication Logic

Implementing Logout Functionality

Final Thoughts and Next Steps