Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Mastering Next.js - 2. App Router

Name: Mastering Next.js - 2. App Router
Rating: 5.0 (2 reviews)

Mastering Next.js 2: Building Real-World Full-Stack Dashboards

Created byXiaoqi Zhao

Last updated 2/2026

English

English [Auto],

What you'll learn

Build Full-Stack Dashboards: Master the Next.js App Router to build a production-ready financial dashboard with nested layouts and optimized routing.
Database & SQL Mastery: Connect to a PostgreSQL database, write efficient SQL queries, and implement data streaming to ensure lightning-fast page loads.
Server Actions & Mutations: Handle form submissions and data updates using Server Actions, featuring server-side validation and automatic cache revalidation.
Search & Pagination: Create high-performance, URL-synced search and pagination features that improve SEO and allow for easy state sharing between users.
Authentication & Security: Secure your dashboard with NextAuth.js, implementing protected routes and middleware to manage user sessions and data privacy.

Course content

17 sections • 72 lectures • 15h 53m total length

Introduction18:17
Explore Next.js app router with a practical dashboard including authentication and CRUD operations, guided by a hands-on React foundation based course with setup tips and real-world coding practices.

2.1 Global Styles12:47
Learn to apply global styles in a Next.js app by importing global.css into the root layout, using base styles, resets, utilities, and exploring trailwind, CSS modules, and CLSX.
2.2 Tailwind CSS13:28
Tailwind CSS speeds up development by providing utility classes you apply with class names to style elements, and it integrates with Next.js projects through optional setup and global CSS.
2.3 CSS Modules8:52
Explore CSS modules as locally scoped styles in Next.js, generating unique class names to prevent collisions, and compare them with Tailwind by using Home.module.css in the project.
2.4 Using clsx for Conditional Styling & 2.5 Other Styling Solutions10:45
Use clsx for conditional styling in Next.js, toggling class names based on component state, and compare status-based styling with other options like Tailwind, CSS Modules, and CSS-in-JS.

3.1 Why Optimize Fonts? & 3.2 Adding a Primary Font20:59
Explore why fonts affect performance and SEO, and learn how next/font in next.js optimizes fonts, bundles them as static assets, and eliminates extra requests for faster page rendering.
3.3 Practice: Adding a Secondary Font15:39
Learn to add a secondary font in a Next.js app router project by configuring Lusitana alongside Inter, updating font.ts, applying to paragraph elements, and handling font weights and subsets.
3.4/3.5/3.6 Optimizing Images, & Adding a Desktop Hero Image24:09
Explore how Next.js optimizes images with the next/image component, serves static assets from the public folder, and delivers desktop and mobile hero images with responsive sizing and lazy loading.
3.7 Practice: Adding Mobile Hero Image12:18
Learn to add a responsive mobile hero image in Next.js, switching between desktop and mobile versions with width, height, alt text, and conditional hide/show classes.

4.1 Nested Routing & 4.2 Creating the Dashboard Page13:38
Explore nested routing with Next.js file system routing, create a dashboard page using a nested layout, and apply root layouts and co-located page.tsx for scalable UI.
4.3 Practice: Creating the Dashboard Pages6:44
Create and route additional dashboard pages in Next.js app router, building customers and invoices routes with page.tsx exports, then compare against the solution and plan a dashboard layout.
4.4 Creating the Dashboard Layout & 4.5 Root Layout23:21
Explore creating and wiring a dashboard layout and root layout in the Next.js app router, including shared navigation, site nav components, and page-level tsx files for invoice and customer pages.

5.1 Why Optimize Navigation? & 5.2 The <Link> Component12:57
Learn why navigation optimization matters and how to use a customized Next.js link component for client-side navigation with partial page refreshing and prefetching and code splitting for faster production.
5.3 Pattern: Showing Active Links10:20
Use usePathName in a client nav-link component to show the active link with conditional CLSX styling in the Next.js app router.

6.1 Creating a Github Repository & 6.2 Cretae a Vercel Account12:34
Explore setting up the Next.js app router by creating a GitHub repository, a Wazelle account, linking to PostgreSQL, and seeding initial data for deployments.
6.3 Connect and Deploy Your Project to Vercel12:25
Connect and deploy your Next.js project from a git repository to a Warsaw account by importing from GitHub, GitLab, or Bitbucket, authorizing access, and viewing instant deployment previews.
6.4 Create a Postgres Database14:41
Create and configure a Postgres database on the WordCell platform for a Next.js app, manage env.local and secrets safely, and integrate with your project via .env and gitignore.
6.5 Seeking Your Database6:51
Seed your PostgreSQL database in a Next.js app using the app router, test the seed script and API route to populate an initial dataset and verify the connection.
6.6 Executing Queries - (1)10:13
Explore executing queries to seed a local PostgreSQL database for a Next.js app, creating users, invoices, and revenue tables, and running seed scripts via root.ts.
6.6 Executing Queries - (2) further troubleshooting2:53
Troubleshoot executing queries in a Next.js app by restarting services, inspecting console errors, and validating local inventory connections, preparing to link a local database with SQL in chapter 7.
6.6 Executing Queries - (3) Executing Query to Local PG Database26:39
Explore troubleshooting steps to execute queries against a local PostgreSQL database in a Next.js app, including configuring the .env, disabling SSL, using pgAdmin, and seeding data.

7.1 Choose How to Fetch Data23:34
Explore four data-fetching approaches in Next.js app router—api layer, database query, server components, and SQL directly—and learn when to use each while protecting database secrets.
7.2 Fetching Data for the Dashboard Overview Page11:03
Fetch data for the dashboard overview using server components in Next.js app router. Implement an async database query and render the dashboard page with updated content.
7.3 Fetching data from <RevenueChart />18:56
Learn to fetch revenue data and render the revenue chart component in the dashboard using the app router, including async data handling and mapping last 12 months.
7.4 Fetching Data from <LatestInvoices />19:56
Fetch the latest five invoices by date with a SQL join to customers for names and images, and render them in the revenue dashboard using app router async components.
7.5 Practice: Fetch Data for <Card>30:33
Fetch data for four dashboard cards using fetchCardData in Next.js app router, compute totals and pending invoices, then render a responsive grid and discuss static rendering.
7.6 What are Request Waterfalls? & 7.7 Parallel Data Fetching9:04
Compare request waterfall and parallel data fetching in Next.js app router, showing sequential vs parallel fetch patterns with revenue, invoices, and card data, and highlight performance implications.

8.1 What is Static Rendering? & 8.2 What is Dynamic Rendering?15:31
Compare static and dynamic rendering, explain static site generation and incremental static regeneration, and explore real-time, user-specific content through server-side and client-side rendering.
8.3 Simulating a Slow Data Fetch5:43
Simulate a three-second slow data fetch to compare static and dynamic rendering, and examine how await fetching and delays affect user experience.

9.1 What is Streaming?8:09
Explore streaming in Next.js app router to progressively render components from server to client, using suspend boundaries and load state to avoid blocking and improve user experience.
9.2 Streaming Page with "loading.tsx" - 0. add the loading.tsx6:47
Learn to implement a page-wide streaming loading.tsx in Next.js app router for the dashboard. Display a loading skeleton during data fetching and understand how suspense-based fallback improves user feedback.
9.2 Streaming Page with "loading.tsx" - 1. Adding Loading Skeletons7:09
Add loading skeletons in a Next.js app router page by building loading.tsx that renders dashboard skeletons and various component skeletons to placeholder content while streaming from server to client.
9.2 Streaming Page with "loading.tsx" - 2. Fix the Loading Steketon Bug7:48
Fix the loading skeleton bug in Next.js app router 9.2 by using root groups and parentheses to confine loading.tsx to the dashboard overview, preventing it from affecting other subpages.
9.2 Streaming Page with "loading.tsx" - 3. Streaming a Component11:35
Master Next.js app router streaming by implementing component-level suspense with loading.tsx, replacing full-page skeletons with granular loading for revenue charts, dashboards, and cards.
9.2 Streaming Page with "loading.tsx" - 4. Practice: Streaming <LatestInvoices>13:37
Practice streaming the latest invoices by moving fetch logic into the latest invoice component, wrapping it in a suspend boundary with a skeleton fallback in loading.tsx.
9.3 Grouping Components & 9.4 Deciding Suspense Boundaries12:41
Learn to group components with a card wrapper, add skeletons, and place suspense boundaries to optimize streaming data in Next.js app router.

Requirements

Completion of Part 1: A solid grasp of the core concepts covered in "Mastering Next.js 1: React Foundations" or equivalent experience with Next.js basics.
Intermediate React Knowledge: Comfort with React hooks (useState, useEffect), functional components, and the "thinking in React" mental model.
JavaScript/TypeScript Basics: Familiarity with ES6+ syntax (destructuring, arrow functions, async/await) and a basic understanding of TypeScript types.
Development Environment: A computer with Node.js (version 18.17.0 or later) installed and a basic understanding of using the terminal/command line.
GitHub Account: Basic knowledge of Git (cloning repositories and committing code) is required to follow along with the project versioning.

Description

Objective: Go beyond the foundations. Master the App Router, Server Actions, and Database Integration by building a production-ready financial dashboard.

Course Overview

In Part 1, you mastered the React foundations and the core mental models of Next.js. Now, it’s time to put those skills to work.

In this second installment of the Mastering Next.js series, we move away from isolated components and into the world of Full-Stack Development. We will build the "Acme Dashboard"—a complex, feature-rich financial application that uses every advanced feature the Next.js App Router has to offer.

From architecting database schemas to handling complex authentication and real-time search, this course is designed to turn you into a professional Next.js developer who can build, secure, and deploy scalable web applications.

What You Will Learn

The Power of App Router: Deep dive into nested layouts, dynamic routing, and the loading.tsx streaming pattern.
Database & Data Fetching: Set up a PostgreSQL database and learn how to fetch data efficiently using Server Components and SQL.
Server Actions (Mutations): Move beyond APIs. Learn to handle form submissions, validate data with Zod, and revalidate the Next.js cache.
Search & Pagination: Implement high-performance search and pagination using URL state—perfect for SEO and user experience.
Authentication & Security: Secure your dashboard with NextAuth.js and implement middleware to protect sensitive routes.
Accessibility (a11y): Master the art of building inclusive forms and accessible UI patterns.
Performance Optimization: Learn Partial Prerendering (PPR), image optimization, and font best practices to achieve a perfect Lighthouse score.

Course Content

Project Setup & Architecture: Getting the Acme starter ready for scale.
Styling & UI: Tailwind CSS, CSS Modules, and creating a cohesive Dashboard UI.
Optimization: Handling Assets like a pro (Fonts, Images, and Metadata).
Routing & Layouts: Organizing a complex dashboard with nested routes.
The Data Layer: Integrating PostgreSQL and writing efficient Server Components.
Interactive Dashboards: Building Streaming Skeletons and handling async data.
Data Mutations: Creating, Updating, and Deleting invoices with Server Actions.
Form Validation & Handling: Using Zod for type-safe server-side validation.
Security: Implementing NextAuth.js for robust authentication.
Final Deployment: Going live on Vercel with a production-ready environment.

Who Is This Course For?

Students of Part 1: If you finished "React Foundations," this is your natural next step.
React Developers: Those who know the basics but want to learn how to build a "complete" app.
Backend Developers: Developers looking to transition into full-stack work using a modern JavaScript stack.

Who this course is for:

Graduates of Part 1: Students who have completed "Mastering Next.js 1" and are ready to apply their foundational React skills to a complex, real-world project.
Aspiring Full-Stack Developers: React developers who want to move beyond the frontend and learn how to manage databases, authentication, and server-side logic.
Frontend Engineers: Professionals looking to stay ahead of the curve by mastering the Next.js App Router, Server Actions, and modern web optimization techniques.
Web Development Students: Learners who prefer "project-based" education and want a portfolio-ready dashboard to show potential employers.
Backend Developers: Devs familiar with SQL or Node.js who want to see how modern meta-frameworks like Next.js bridge the gap between the server and the UI.

Mastering Next.js - 2. App Router

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 18min

Chapter 1: Getting Started1 lecture • 19min

Chapter 2: CSS Styling4 lectures • 46min

Chapter 3: Optimizing Fonts and Images4 lectures • 1hr 13min

Chapter 4: Creating Layouts and Pages3 lectures • 44min

Chapter 5: Navigating Between Pages2 lectures • 23min

Chapter 6: Setting Up Your Database7 lectures • 1hr 26min

Chapter 7: Fetching Data6 lectures • 1hr 53min

Chapter 8: Static and Dynamic Rendering2 lectures • 21min

Chapter 9: Streaming7 lectures • 1hr 8min

Requirements

Description

Who this course is for: