Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Next.js & Supabase Mastery: Build 2 Full-Stack Apps

Thành Thạo Next.js & Supabase: Xây Dựng 2 Ứng Dụng Full-Stack Hoàn Chỉnh

Thành Thạo Next.js & Supabase: Xây Dựng 2 Ứng Dụng Full-Stack Hoàn Chỉnh

Từ con số 0 đến triển khai ứng dụng Next.js sẵn sàng cho portfolio với Supabase, làm chủ hệ sinh thái full-stack trong năm 2025.

4.4
(436 đánh giá)
4,253 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đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
24.5 giờ video
206 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Full Stack Development #Next Js #Supabase #Web Development

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

Thiết kế Kiến trúc và Xây dựng Ứng Dụng Full-Stack Sẵn Sàng Cho Production từ Đầu
Làm Chủ Next.js Hiện Đại: Tận Dụng Server Components, Server Actions và Caching Nâng Cao để có Hiệu Suất Cực Nhanh
Xây Dựng Backend Hoàn Chỉnh Trong Vài Phút với Supabase: Triển khai Cơ sở Dữ liệu PostgreSQL, Xác thực Người dùng và Lưu trữ Tệp mà Không Cần Viết Backend Code
Vượt Xa Kiến Thức Cơ Bản: Triển khai SEO Nâng Cao, Tối ưu Hiệu suất và Các Tính năng Chuyên nghiệp như Chế độ Tối (Dark Mode)
Tạo Form Cực Chắc Chắn với Kiểm tra Kiểu Dữ liệu End-to-End và Xác thực Phía Máy chủ bằng Zod
Triển khai Xác thực và Phân quyền Người dùng Cực An toàn, Bao gồm Magic Links và Bảo mật Cấp Hàng (Row Level Security - RLS)
Thiết kế Chiến lược Lấy Dữ liệu Phức tạp cho Mọi Tình huống, Xử lý Dễ dàng Caching và Quản lý Trạng thái
Tạo Giao diện Người dùng (UI) Đẹp, Responsive và Có thể Tùy chỉnh với Tailwind CSS
Triển khai Ứng Dụng của Bạn Lên Thế giới với Vercel, Hiểu rõ Quy trình CI/CD Hoàn chỉnh
Làm Chủ Vòng đời Phát triển Đầy đủ, từ Git và Quản lý Phiên bản đến Triển khai Cuối cùng

Yêu cầu

Bạn nên quen thuộc với kiến thức cơ bản về HTML, CSS và JavaScript. Mọi thứ khác, chúng ta sẽ cùng nhau học.
Đừng lo lắng về việc phải là chuyên gia React. Phần đầu tiên của khóa học là một khóa "React 101" hoàn chỉnh để giúp bạn nhanh chóng bắt kịp.
Không yêu cầu kinh nghiệm trước về Next.js hoặc backend. Khóa học này là một tour hướng dẫn, và chúng tôi sẽ dẫn dắt bạn qua mọi thứ bạn cần biết để thành công.

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

Dành cho các nhà phát triển cảm thấy bị mắc kẹt khi chỉ xây dựng các ứng dụng cơ bản và muốn thăng tiến sự nghiệp với một portfolio chứa các dự án ấn tượng.
Dành cho các lập trình viên front-end muốn trở thành kỹ sư full-stack tự tin và được săn đón.
Dành cho bất kỳ ai muốn học cách xây dựng và đưa ý tưởng của riêng họ thành các ứng dụng web thực tế, đạt cấp độ production.
Dành cho các nhà phát triển muốn thực sự hiểu "lý do tại sao" đằng sau kiến trúc web hiện đại, không chỉ sao chép và dán code.

Nội dung khóa học

28 phần • 206 bài giảng
1 Bạn Sẽ Học Gì, Bạn Sẽ Xây Dựng Gì và Thiết lập!
1 Tạo Dự án Next.js
2 Cấu trúc Dự án Next.js
1 Giới thiệu Phần: React 101
2 React là gì?
3 Hiểu Cú pháp JSX
4 Components như Những Khối Xây dựng UI Cơ bản
5 Component Props (Truyền Dữ liệu vào Components)
6 Phản hồi với Sự kiện
7 Duy trì Trạng thái Component bằng Hooks (useState)
8 Render Có điều kiện
9 Render Danh sách Các phần tử
10 Import và Export Components
1 Giới thiệu Phần: Định tuyến, Trang & Bố cục
2 Định tuyến Hệ thống Tệp & Tạo Trang
3 Bố cục (UI Chia sẻ Giữa các Trang)
4 Liên kết và Điều hướng
5 Hiểu về Prefetching và Caching
6 Đường dẫn Động với Tham số
1 Giới thiệu Phần: Lấy Dữ liệu (và Caching!)
2 Cách Lấy Dữ liệu Hoạt động trong Next.js (Giải thích và Khuyến nghị)
3 Chạy một Máy chủ JSON Giả lập
4 Thực sự Lấy Dữ liệu với `fetch` bên trong một Server Component
5 Hiểu về Data Cache và Request Memoization
6 Fetch Cache trong Thực tế
1 Giới thiệu Phần: Xử lý Nguồn Dữ liệu Chậm
2 Một Nguồn Dữ liệu Chậm Có thể Chặn Toàn bộ Trang của Bạn Như thế nào!
3 Loading UI và Streaming
4 Loading UI và React Suspense
5 Khi nào Nên Dùng React Suspense? Khi nào Dùng Loading UI? Khác biệt?
6 Về Streaming và SSR
1 Giới thiệu Phần: Định dạng với Tailwind và CSS Modules
2 Tùy chọn Định dạng trong Next.js
3 Bắt đầu với Tailwind CSS
4 Flex Container & Thiết kế Responsive
5 Thêm CSS Module và Sử dụng Tailwind Bên trong
6 Định vị Các phần tử với Flex
7 Sử dụng Grid và Tạo Các Component Có thể Tùy chỉnh
1 Giới thiệu Phần: Quản lý Lỗi trong Next
2 Xử lý Lỗi trên Trang
3 Error Boundaries
4 Hệ thống Phân cấp Lỗi - Lỗi được Bắt ở Đâu?
5 Bố cục Lồng nhau
6 Xử lý Lỗi trong Bố cục và trong Bố cục Gốc
7 Khôi phục từ Lỗi
8 Trang Không Tìm thấy (404) Tùy chỉnh
1 Giới thiệu Phần: Hình ảnh và Tối ưu Hình ảnh
2 Vấn đề với Hình ảnh
3 Core Web Vitals, LCP, CLS và Tối ưu Hình ảnh
4 Thêm Bộ sưu tập Hình ảnh (Chưa được Tối ưu!)
5 Sử dụng Component `Image` của Next để Tự động Tối ưu
6 Kích thước Hình ảnh Responsive
7 Placeholders & Chất lượng Hình ảnh
8 Đo lường Trang với Lighthouse
1 Giới thiệu Phần: Phông chữ, OpenGraph, Scripts, Metadata
2 Tối ưu Phông chữ với Next.js (Phông chữ Google và Phông chữ Cục bộ!)
3 Tối ưu Scripts (Kết nối với Dịch vụ Bên ngoài như Analytics, Chatbots)
4 Giới thiệu về Metadata
5 Tổng quan về Các thuộc tính Metadata
6 Metadata Tĩnh
7 Metadata Động
8 Tạo Hình ảnh (OpenGraph) Động
1 Giới thiệu Phần: Markdown và MDX
2 Thiết lập Markdown và MDX và Trang MDX Đầu tiên!
3 Định dạng MDX - Tailwind Typography
4 MDX Remote (Render bất kỳ Markdown nào)
5 Tải MDX Từ Tệp (Bài đăng Blog)
1 Giới thiệu Phần: Dự án Blog: Metadata, Frontmatter, Danh sách Bài đăng
2 Metadata #1 - Frontmatter là gì và Thời gian Tái cấu trúc #1
3 Metadata #2 - Trích xuất Frontmatter và Nội dung, Thời gian Tái cấu trúc #2
4 Danh sách Bài đăng Blog - Lấy Metadata của Tất cả Tệp
5 Danh sách Bài đăng Blog - Liên kết
1 Giới thiệu Phần: Caching, Lọc, Sắp xếp, Phân trang
2 Cải thiện Hiệu suất và Tái cấu trúc - Sử dụng `cache` cho Memoization
3 Thẻ và Lọc Sử dụng Tham số Truy vấn Tìm kiếm
4 Sắp xếp Bài đăng - Sử dụng Query Params cho Trạng thái #1
5 Thay đổi Thứ tự Sắp xếp - Sử dụng Query Params cho Trạng thái #2
6 Thêm Phân trang - Sử dụng Query Params cho Trạng thái #3
7 Component Phân trang - Trang #1
8 Component Phân trang - Liên kết #2
1 Giới thiệu Phần: HTML Tùy chỉnh, Thẻ, Chế độ Tối, Cookies
2 Tùy chỉnh HTML được Tạo từ Markdown
3 Thẻ trên Bài đăng Blog
4 Bật/Tắt Chế độ Tối - Component #1
5 Bật/Tắt Chế độ Tối - Custom Hook, Thiết lập Chế độ Tối/Sáng #2
6 Bật/Tắt Chế độ Tối - Sử dụng Cookies trong Next #3
7 Lưu ý về Cookies trong Server Components và Dynamic Rendering
8 Hoàn thiện Dự án - Trang Chủ
1 Giới thiệu Phần: Đưa lên Mạng! + Mẹo & Thủ thuật Hiệu suất
2 Bạn Đã Biết Git Chưa?
3 Dynamic Functions Buộc Trang Render Động
4 Sử dụng `generateStaticParams()` để Pre-render Trang
5 SearchParams và Static Pre-Rendering?
6 Tạo Tài khoản Vercel và Triển khai Lên Mạng!
7 Xử lý Metadata Base và Thảo luận về Edge vs Node Runtimes
1 Giới thiệu Phần: Tạo UI và Components
2 Tạo Dự án và Playground
3 Component Header
4 Component Xu hướng Tài chính
5 Component Xu hướng Tài chính - Nhiều hơn hay Ít Tiền hơn?
6 Hook Định dạng Tiền tệ
7 Component Mục Giao dịch
8 Component Tóm tắt Giao dịch
9 Tạo Các Nút bấm
10 Định dạng Đầu vào Form
11 Component Đầu vào Form React Tùy chỉnh
1 Giới thiệu Phần: Chế độ Tối, Lấy và Hiển thị Dữ liệu
2 Thêm Nút bật/tắt Chế độ Sáng/Tối
3 Thêm JSON Server làm Nguồn Dữ liệu Tạm thời
4 Hiển thị Danh sách Giao dịch
5 Nhóm Giao dịch theo Ngày
6 Dấu phân cách & Loading Skeleton
7 Bọc Transaction Loading trong Suspense
8 Lấy Xu hướng Tài chính
9 Tạo Fallback Suspense cho Xu hướng
1 Giới thiệu Phần: Form, Xác thực, Server Actions
2 Thêm Trang Giao dịch & Liên kết
3 Thêm Đánh dấu Form Giao dịch
4 Giới thiệu React Hook Form
5 Xác thực Form trong React Hook Form
6 Giới thiệu Thư viện Zod
7 Thêm Schema Zod cho Giao dịch
8 Sử dụng Biến Môi trường
9 Lưu trữ Dữ liệu Form
10 Server Actions trong Hành động
11 Giải thích về Server Actions
12 Component Lỗi Form
1 Giới thiệu Phần: Thêm Supabase, Seeding Data, Xử lý Lỗi
2 Supabase là gì?
3 Thiết lập và Kết nối Dự án Next.js với Supabase!
4 Thêm Cột vào Bảng Giao dịch
5 Đọc Giao dịch từ Postgres
6 Tạo Dữ liệu Seed
7 Thêm Dữ liệu vào Postgres
8 Server Actions - Xử lý Lỗi
9 Server Actions - Xác thực Dữ liệu Máy chủ
10 Error Boundary cho Xu hướng và Loại bỏ JSON Server
1 Giới thiệu Phần: Form Phức tạp hơn, Xác thực và Truy vấn Cơ sở dữ liệu
2 Form Động Trung cấp
3 Biến đổi và Xác thực Phức tạp với Zod
4 Xu hướng Tài chính - Hàm Postgres Tính SUM
5 Xu hướng Tài chính - Gọi Hàm Postgres sử dụng RPC
6 Phạm vi Ngày Giao dịch - Chọn Tùy chọn
7 Phạm vi Ngày Giao dịch - Lấy Tổng Hiện tại & Trước đó trong Postgres
8 Phạm vi Ngày Giao dịch - Hiển thị Xu hướng
1 Giới thiệu Phần: Lọc và Phân trang Giao dịch
2 Lấy Giao dịch Sử dụng Hàm Postgres
3 Tái cấu trúc thành Client Component với Server Component Wrapper
4 Load More Functionality (Pagination)
5 UX Improvements (No More Data, Loading Spinner etc)
1 Section Introduction: Updating and Deleting Data
2 Naive Implementation of Delete Transaction Button
3 Delete Confirmation & Loading UI
4 Removing Transaction from the List
5 Handling the Pagination Shift
6 Transaction Editing Page & Fetching Transaction Data
7 Transaction Editing Form and Handling 404
8 Update Transaction Server Action (Updating Data in Supabase)
9 Loading UI for the Edit Form
1 Giới Thiệu Phần: Xác Thực Người Dùng
2 Bố Cục và Trang Xác Thực
3 Biểu Mẫu Đăng Nhập & Gọi Server Action Thông Qua Gửi Biểu Mẫu
4 Trạng Thái Đang Xử Lý Của Biểu Mẫu
5 Xử Lý Lỗi Server Action Từ Biểu Mẫu
6 Tổng Quan về Supabase Auth và Xác Thực Không Cần Mật Khẩu (Magic Links)
7 Cơ Chế Xác Thực Hoạt Động Như Thế Nào Trong Supabase (Và Nói Chung)
8 Route Handler Là Gì?
9 Route Handler Đăng Nhập
10 Cấu Hình Mẫu Email Supabase và Kiểm Tra Quy Trình Xác Thực
11 Người Dùng Đã Được Xác Thực Chưa?
12 Middleware Là Gì? Tạo Middleware Làm Mới Token Supabase
13 Đăng Xuất Người Dùng
1 Giới Thiệu Phần: Phân Quyền Người Dùng
2 Phân Quyền Là Gì?
3 Bảo Vệ Routes Trong Middleware
4 Postgres RLS Là Gì? Cách Nó Tích Hợp Với Supabase Auth?
5 Liên Kết Người Dùng Với Giao Dịch và Chính Sách RLS INSERT
6 Thêm Chính Sách RLS Cho SELECT, UPDATE và DELETE
7 Cập Nhật Script Tạo Dữ Liệu Mẫu Với Người Dùng
1 Giới Thiệu Phần: Tải Lên và Quản Lý Tệp
2 Bố Cục Cài Đặt và Thanh Điều Hướng Bên
3 Supabase Storage, Buckets và RLS
4 Tạo Bucket và Thiết Lập Chính Sách Bảo Mật
5 Biểu Mẫu Tải Lên Hình Ảnh
6 Server Action Tải Lên Hình Ảnh
7 Tạo Kiểu Cho Ô Nhập Tệp
8 Cập Nhật Metadata Người Dùng
9 Hiển Thị Ảnh Đại Diện Người Dùng (Signed URLs)
10 Thành Phần Thông Báo (Alert)
11 Xử Lý Lỗi Tinh Tế Hơn Trong Server Actions
12 Xóa Tệp (Ảnh Đại Diện Cũ)
1 Giới Thiệu Phần: Cài Đặt Người Dùng, Xác Thực Biểu Mẫu Phía Máy Chủ
2 Thành Phần Thông Báo Thành Công và Lỗi - Tái Cấu Trúc
3 Tạo Khung Trang và Biểu Mẫu Cài Đặt
4 Cài Đặt Người Dùng - Ô Nhập Liệu và Giao Diện Đang Tải
5 Cài Đặt Người Dùng - Lưu và Áp Dụng Cài Đặt
6 Cài Đặt Người Dùng - Xác Thực Dữ Liệu Phía Máy Chủ Bằng Zod
7 Hiển Thị Lỗi Xác Thực (Phía Máy Chủ)
1 Triển Khai Lên Môi Trường Thực!
1 Giới Thiệu Phần: Giới Thiệu Về Git và GitHub
2 Giới Thiệu Về Git
3 Cài Đặt Git Trên Mac
4 Cài Đặt Git Trên Windows
5 Cài Đặt Git Trên Linux
6 Commit Thay Đổi Trong Git
7 GitHub, Remote Repository, Đẩy Thay Đổi

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

Build and deploy real, production-grade Next.js apps with Supabase and modern full-stack best practices.

If you’re tired of basic to-do list tutorials and disconnected examples, this course is your direct path to professional-grade full-stack development. We’ll bridge the gap between “learning to code” and building real applications that stand out in your portfolio and get you hired quickly.

This is not just another Next.js tutorial — it’s a career-focused, project-based course that teaches you to think like a senior developer. You’ll understand the why behind every decision, from folder structure to data fetching strategies, so you can confidently build and scale your own applications without guesswork or confusion.

You’ll build and deploy two portfolio-ready projects from scratch:

1. Modern Blog & Portfolio Site

  • Server-side rendering with Next.js

  • Content management with MDX

  • Advanced performance optimization

  • Responsive UI with Tailwind CSS

2. Full-Stack Personal Finance Tracker

  • Supabase backend with PostgreSQL

  • Secure authentication & Row Level Security

  • Complex database relationships

  • File uploads & dynamic dashboards

By the end of this course, you’ll have mastered Next.js, Supabase, and full-stack architecture, while creating two production-ready apps you can confidently showcase to employers or clients. This is your fast track to becoming a confident, job-ready full-stack developer in 2025.

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 Supabase
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 😊