Next.js 14 Mastery for Building Modern Web Apps

Challenge: Create a Skeleton Loader

Your turn! Apply what you've just learned by refactoring the <LatestInvoices> component.

Move the fetchLatestInvoices() function down from the page to the <LatestInvoices> component;
Surround the component with a <Suspense> boundary, providing a fallback called <LatestInvoicesSkeleton>.

In Practice

Everything was clear?

Thanks for your feedback!

Section 5. Chapter 7

Ask AI

Ask anything or try one of the suggested questions to begin our chat

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