Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Master Next.js 15 - Build and Deploy an E-Commerce Project

Thành thạo Next.js 15 - Xây dựng và Triển khai Dự án Thương mại Điện tử

Thành thạo Next.js 15 - Xây dựng và Triển khai Dự án Thương mại Điện tử

Khóa học duy nhất bạn cần để học Next nhanh chóng! Tìm hiểu Stripe, Prisma, Auth.js và shadcn/ui!

4.5
(52 đánh giá)
465 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 399.000đ -87%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
16.0 giờ video
176 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 31/05/2026

Bạn sẽ học được gì

Xây dựng ứng dụng thương mại điện tử sẵn sàng sản xuất bằng Next.js 15 App Router, Server Components và các mẫu full-stack hiện đại
Làm chủ Prisma ORM với PostgreSQL để thao tác cơ sở dữ liệu an toàn kiểu dữ liệu, quan hệ phức tạp và truy vấn hiệu quả
Triển khai xử lý thanh toán Stripe, xác thực NextAuth.js và quản lý tài khoản người dùng với lịch sử đơn hàng
Triển khai ứng dụng Next.js 15 lên môi trường sản xuất với tối ưu hóa SEO, bộ nhớ đệm ISR, xử lý lỗi và các phương pháp thực hành về hiệu suất

Yêu cầu

Kiến thức cơ bản về React (components, hooks, props)
Không cần kinh nghiệm Next.js - bạn sẽ học mọi thứ từ kiến thức cơ bản của App Router đến các mẫu nâng cao

Đối tượng phù hợp

Các nhà phát triển React sẵn sàng làm chủ Next.js 15 để xây dựng các ứng dụng full-stack chuyên nghiệp như nền tảng thương mại điện tử, sản phẩm SaaS hoặc trang web dựa trên dữ liệu

Nội dung khóa học

19 phần • 176 bài giảng
1 Chào mừng bạn đến với khóa học!
2 Giới thiệu dự án demo
3 Tại sao chọn khóa học này? Giải thích về "Hướng dẫn còn thiếu"
4 Công nghệ sử dụng và điều kiện tiên quyết
1 Giới thiệu & Mục tiêu của phần
2 Tạo dự án
3 Giới thiệu nhanh về Docker & Docker Compose
4 VSCode & GitHub Copilot (TÙY CHỌN)
5 Chạy Postgres bằng Docker
6 Thiết lập Prisma
7 Tổng kết & Xử lý sự cố
1 Định tuyến dựa trên tệp tin trong App Router
2 Trang chủ và Server Components trong Next.js
3 An toàn kiểu dữ liệu và dữ liệu giả
4 Hiển thị sản phẩm dưới dạng lưới
5 Component hình ảnh mạnh mẽ
6 Hình ảnh đáp ứng
7 Thêm sản phẩm, lưới đáp ứng, tải chậm
8 Định dạng giá
9 Tổng kết
1 Giới thiệu & Mục tiêu của phần
2 Model sản phẩm và migration
3 Sản phẩm & Danh mục: Quan hệ
4 Tạo và chạy script seeding
5 Seeding: Prisma Client, xóa dữ liệu và chèn danh mục
6 Seeding: Thêm sản phẩm
7 Điều đặc biệt của Prisma Client trong Next.js
8 Lấy sản phẩm trong Server Component
9 Tổng kết
1 shadcn/ui là gì?
2 Thiết lập & Hiểu về các kiến thức cơ bản của shadcn/ui
3 Cải thiện Thẻ Sản phẩm
4 Giao diện Loading là gì?
5 Tạo giao diện Loading cho sản phẩm
6 Thêm khung xương loading cho sản phẩm
7 Phân trang sản phẩm
8 Thêm liên kết phân trang
9 Tham số tìm kiếm & API động
10 Sử dụng Suspense với searchParams
11 Tổng kết
1 Sử dụng và hiểu về Server Actions
2 Route động - Trang sản phẩm
3 Trang 404 tùy chỉnh
4 Loading danh mục và cải thiện giao diện trang sản phẩm
5 Trạng thái loading cho sản phẩm
6 Thêm Metadata và Tối ưu hóa SEO
7 Trang sản phẩm với hình ảnh
8 Thêm tồn kho sản phẩm
9 Giao diện tồn kho sản phẩm và sửa lỗi hình ảnh
10 Nút giỏ hàng tạm thời
11 Tổng kết
1 Chế độ tối và sáng: Next Themes
2 Triển khai chuyển đổi chủ đề
3 Thêm thanh điều hướng
4 Thêm biểu tượng vào thanh điều hướng
5 Giải thích Menu điều hướng chỉ dành cho di động
6 Tạo điều hướng di động bằng Sheet
7 Nội dung điều hướng di động
8 Thêm chân trang và sửa lỗi bố cục
9 Cải thiện điều hướng với Breadcrumbs
10 Sửa lỗi bố cục & Thêm khung xương Breadcrumbs
11 Tổng kết
1 Tìm kiếm sẽ hoạt động như thế nào?
2 Tạo và đặt ô nhập tìm kiếm
3 Logic của ô nhập tìm kiếm
4 Tạo trang kết quả tìm kiếm giả
5 Tính năng tìm kiếm hoạt động
6 Sửa lỗi UI/UX
1 Giới thiệu & Mục tiêu của phần
2 Trang sản phẩm theo danh mục
3 Thêm tính năng sắp xếp cơ bản vào danh sách sản phẩm
4 Thanh bên danh mục (sử dụng Suspense)
5 Bố cục lồng nhau với danh mục và sắp xếp
6 Trường hợp sử dụng Server/Client Wrapper
7 Server Wrapper cho CategorySidebar
8 Điều khiển sắp xếp trong bố cục
9 Sắp xếp hoạt động trên trang tìm kiếm
10 Trường hợp trích xuất mã chung
11 Common ProductList và Server Action getProducts
12 Tái cấu trúc các trang để sử dụng getProducts
1 Thiết kế & Di chuyển lược đồ cơ sở dữ liệu giỏ hàng
2 Chiến lược tính năng giỏ hàng: Xử lý người dùng ẩn danh & Cookie
3 Tại sao là Custom Types? Gõ kiểu giỏ hàng của chúng ta bằng GetPayload của Prisma
4 Tìm đúng giỏ hàng: Đọc Cookie bằng tiện ích getCart
5 Bắt đầu mới: Tiện ích cơ sở dữ liệu getOrCreateCart
6 Thêm & Cập nhật mặt hàng: Logic cốt lõi addToCart
7 Kết hợp lại: AddToCartButton
8 Triển khai bộ đếm giỏ hàng trên Navbar
9 Hiểu về bộ nhớ đệm dữ liệu và xác thực lại
10 Bộ đếm giỏ hàng không cập nhật? Xác thực lại Tag
11 Tạm dừng chỉ báo giỏ hàng
1 Tạo trang giỏ hàng
2 Tạo giao diện Component CartEntry
3 CartEntry: Sửa lỗi giao diện
4 Server Action: setProductQuantity
5 Tăng và giảm số lượng mặt hàng trong giỏ
6 Xóa mặt hàng khỏi giỏ
7 Component tổng kết giỏ hàng
8 Thêm giao diện Loading cho mọi thứ liên quan đến giỏ hàng
1 Giới thiệu & Mục tiêu của phần
2 Lược đồ Prisma cho Order & OrderItem
3 Cấu hình Stripe
4 Tại sao chúng ta cần Order trước
5 Server Action createOrder
6 Stripe Checkout Session - Bắt đầu
7 Triển khai createCheckoutSession
8 Chuyển sang quy trình thanh toán hoàn chỉnh
9 Triển khai quy trình thanh toán
10 Xử lý lỗi thanh toán
1 Tạo form thanh toán
2 Thực hiện thanh toán thử nghiệm bằng Stripe
3 Giải thích trạng thái đơn hàng và chuyển hướng Stripe
4 Route Handler hủy thanh toán
5 Route Handler thanh toán thành công
6 Trang trạng thái đơn hàng
7 Cải thiện giao diện trang đơn hàng
8 Stripe Webhook là gì?
9 Triển khai Route Handler Stripe Webhook
10 Cài đặt và chạy Stripe CLI
11 Kiểm tra Stripe Webhook với Stripe CLI
1 Về xác thực
2 Thiết lập Model cơ sở dữ liệu người dùng
3 Cài đặt Auth.js và thiết lập cơ bản
4 Băm mật khẩu
5 Seeding người dùng thử nghiệm
6 Trang đăng nhập - Giao diện cơ bản
7 Trang của Auth.js - Trang đăng nhập
8 Thiết lập Zod và Schema đăng nhập
9 Thiết lập React Hook Form và Form đăng nhập
10 Kết hợp shadcn/ui với React Hook Form
11 Logic của Credentials Provider
12 Hiểu lý do: React Hook Form so với Form đơn giản
13 Kết nối Form đăng nhập
1 Xử lý lỗi đăng nhập
2 Giải thích về Phiên hiện tại, Cookie và JWT
3 Callback Phiên/JWT và Mở rộng kiểu TypeScript
4 Đăng nhập và Chuyển hướng
5 Giao diện trạng thái xác thực và Đăng xuất
6 Menu thả xuống Người dùng
7 Trang đăng ký - Giao diện & Xác thực
8 Sửa kiểu dữ liệu User
9 Server Action đăng ký
10 Kết nối Form đăng ký và Tự động đăng nhập
11 Kết nối đơn hàng với người dùng
12 Kiểm tra tạo đơn hàng
13 Phân quyền: Hiển thị đơn hàng của người dùng
14 Cải thiện trang Đơn hàng & Đơn hàng của tôi
1 Bản dựng sản xuất và Sửa lỗi
2 Thêm Metadata cho SEO
3 Thêm JSON-LD (Dữ liệu có cấu trúc)
4 Tạo Sitemap (Động)
5 Thêm robots.txt
6 Xử lý lỗi và Error Boundaries
7 Dọn dẹp: Xóa log và làm trang động nhanh hơn
1 Hiểu về Incremental Static Regeneration (ISR)
2 Thực hành: ISR trên trang sản phẩm
3 Giải pháp: Partial Pre Rendering (PPR) hay Client Side Fetching (SWR)?
4 Tạo Route API giỏ hàng
5 Hook tùy chỉnh SWR và useCart
6 Cập nhật chỉ báo giỏ hàng
7 Cập nhật mutations của giỏ hàng
8 ISR & SWR: Kết hợp tất cả
1 Cách thực hiện: Tối ưu hóa trang động
2 Khóa và Tag bộ nhớ đệm thông minh
3 Tối ưu hóa: Hàm getProducts
4 Tối ưu hóa: Thêm bộ nhớ đệm số lượng sản phẩm
5 Tối ưu hóa: Bộ nhớ đệm danh mục
6 Bộ nhớ đệm nhất quán và Bài tập
7 Chiến lược vô hiệu hóa bộ nhớ đệm
1 Kế hoạch triển khai
2 Prisma Migrations trong quá trình xây dựng
3 Bộ nhớ đệm nhất quán và Lời khuyên chung về bộ nhớ đệm (bao gồm chi phí)
4 Git & GitHub Cấp tốc
5 Vercel: Triển khai & Postgres
6 Nạp dữ liệu mẫu cho DB & Triển khai lại
7 Trỏ Stripe sang Vercel và xử lý đơn hàng

Giới thiệu khóa học

Build Production-Ready Next.js 15 Apps!

Stop learning Next.js through disconnected tutorials. Master the entire framework by building one comprehensive e-commerce platform that demonstrates every essential Next.js 15 pattern.

What You'll Build

A complete e-commerce application featuring:

  • Product catalog with server-side pagination and category filtering

  • Dynamic product pages with SEO optimization and static generation

  • Shopping cart with persistent state and Server Actions

  • User authentication system with NextAuth.js

  • Order management with Stripe payment integration

  • Protected user accounts with order history

  • Mobile-responsive design with modern UI components

Master Next.js 15's Core Features

App Router & Rendering Patterns

  • Server Components for fast initial page loads and SEO

  • Client Components for interactive UI elements

  • Static Site Generation with generateStaticParams

  • Incremental Static Regeneration for cached content updates

  • Streaming with Suspense for progressive loading

Advanced Data Handling

  • Server Actions replacing traditional API routes

  • Prisma ORM with complex database relationships

  • Type-safe database queries with full TypeScript integration

  • Efficient caching strategies using Next.js built-in tools

Production-Ready Features

  • Dynamic SEO with generateMetadata and structured data

  • Payment processing with Stripe checkout sessions and webhooks

  • Authentication & authorization with role-based access

  • Error handling and loading states

  • Production deployment to Vercel with PostgreSQL

Complete Tech Stack You'll Master

  • Next.js 15: App Router, Server Components, Server Actions, ISR

  • TypeScript: End-to-end type safety

  • Prisma & PostgreSQL: Modern database layer with relationships

  • Stripe: Production-ready payment processing

  • NextAuth.js: Complete authentication system

  • Tailwind CSS + Shadcn/UI: Modern component library

  • React Hook Form + Zod: Type-safe form handling

From Development to Production

Learn the complete development lifecycle:

  • Database design and migrations with Prisma

  • Performance optimization with caching and ISR

  • SEO implementation with metadata and sitemaps

  • Production builds and deployment strategies

  • Error boundaries and graceful error handling

Who This Course Is For

  • Developers who know React basics but want to master Next.js 15

  • Those tired of toy examples and ready for production patterns

  • Anyone building e-commerce, SaaS, or data-driven applications

  • Developers who want to understand modern full-stack architecture

What Makes This Different

One comprehensive project that teaches everything interconnected, not isolated features. You'll understand how Server Components, database queries, authentication, and payments work together in a real application.

Production-focused: Every pattern taught is one you'll actually use in professional projects.

Modern Next.js 15: Built specifically for the latest App Router patterns and Server Components.

Ready to build Next.js applications with confidence? Join the course and master the framework through hands-on practice.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Full Stack Development
Hiển thị tất cả khoá học Next Js
Hiển thị tất cả khoá học Stripe
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊