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

Next.js & React - The Complete Guide

Next.js & React - Hướng dẫn Toàn diện

Next.js & React - Hướng dẫn Toàn diện

Học NextJS từ cơ bản đến nâng cao và xây dựng ứng dụng fullstack ReactJS + NextJS với App Router hoặc Pages Router!

4.7
(24,947 đánh giá)
155,751 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
40.5 giờ video
471 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 21/07/2026

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

Học cách xây dựng ứng dụng React fullstack với NextJS 15 & App Router
Xây dựng dự án thực tế và áp dụng kiến thức đã học qua các bài tập thực hành và ví dụ minh họa
Tìm hiểu các cách tiếp cận khác nhau để xây dựng ứng dụng NextJS - App Router so với Pages Router
Bắt đầu với React Server Components, Client Components, truy xuất dữ liệu & hơn thế nữa!
Xử lý gửi dữ liệu thông qua Server Actions
Nắm vững tất cả tính năng chính của NextJS như pre-rendering, SSR, truy xuất dữ liệu, định tuyến dựa trên file và xác thực
Tham gia toàn bộ khóa học hoặc module "Tóm tắt NextJS" để học nhanh nếu bạn có ít thời gian

Yêu cầu

Kiến thức ReactJS được khuyến khích, nhưng khóa học cũng bao gồm module ôn tập React đầy đủ
KHÔNG yêu cầu kiến thức NextJS trước đó

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

Dành cho lập trình viên React muốn tiến xa hơn và xây dựng ứng dụng React sẵn sàng cho production
Lập trình viên React muốn xây dựng ứng dụng React fullstack
Lập trình viên web nói chung, muốn làm việc với một trong những tech stack phổ biến và được săn đón nhất

Nội dung khóa học

23 phần • 453 bài giảng
1 Chào mừng đến với khóa học!
2 NextJS là gì? Tại sao bạn nên sử dụng nó?
3 Tính năng chính & Lợi ích của NextJS
4 Tạo ứng dụng NextJS đầu tiên
5 NextJS so với "Chỉ React" - Phân tích dự án NextJS
6 Chỉnh sửa ứng dụng đầu tiên
7 Pages Router vs App Router - Một Framework, Hai Cách tiếp cận
8 Cách tận dụng tối đa khóa học này
9 Cộng đồng học tập & Tài nguyên khóa học
10 Thiết lập khóa học
1 Sử dụng Code Snapshot
2 Giới thiệu Module
3 React là gì & Tại sao bạn nên dùng nó?
4 Dự án React - Yêu cầu
5 Tạo dự án React
6 Dự án khởi đầu của chúng ta
7 Hiểu cách React hoạt động
8 Xây dựng Component tùy chỉnh đầu tiên
9 Xuất giá trị động
10 Tái sử dụng Components
11 Truyền dữ liệu vào Components với Props
12 Định dạng CSS & CSS Modules
13 Bài tập & Một Component khác
14 Chuẩn bị ứng dụng cho Quản lý State
15 Thêm Event Listeners
16 Làm việc với State
17 Nâng State lên (Lifting State Up)
18 Prop đặc biệt "children"
19 State & Nội dung có điều kiện
20 Thêm Header chung & Quản lý State nâng cao
21 Thêm nút Form
22 Xử lý gửi Form
23 Cập nhật State dựa trên State trước đó
24 Xuất dữ liệu dạng danh sách
25 Thêm Backend vào React SPA
26 Gửi yêu cầu HTTP POST
27 Xử lý Side Effects với useEffect()
28 Xử lý trạng thái Loading
29 Hiểu & Thêm định tuyến (Routing)
30 Thêm Routes
31 Làm việc với Layout Routes
32 Tái cấu trúc Route Components & Lồng ghép nâng cao
33 Liên kết & Điều hướng
34 Truy xuất dữ liệu qua loader()
35 Gửi dữ liệu với action()
36 Dynamic Routes
37 Tóm tắt Module
38 QUAN TRỌNG -- NỘI DUNG CŨ BÊN DƯỚI
39 Giới thiệu Module
40 ReactJS là gì?
41 Tại sao chọn ReactJS & Demo đầu tiên
42 Xây dựng Ứng dụng Single-Page (SPAs)
43 Các lựa chọn thay thế React
44 Tạo dự án React mới
45 Thiết lập Code Editor
46 React 18
47 Khám phá dự án đã tạo
48 Cách React hoạt động & Hiểu về Components
49 Làm việc thêm với Components & Định dạng với CSS Classes
50 Xây dựng & Tái sử dụng Components
51 Truyền dữ liệu với Props & Nội dung động
52 Xử lý sự kiện
53 Thêm nhiều Components hơn
54 Giới thiệu State
55 Làm việc với "Event Props"
56 Sử dụng đúng phiên bản React Router
57 Thêm định tuyến
58 Thêm Liên kết & Điều hướng
59 Giới hạn phạm vi kiểu Component với CSS Modules
60 Xuất danh sách dữ liệu & Components
61 Thêm nhiều Components hơn nữa
62 Tạo "Wrapper" Components
63 Làm việc với Forms
64 Lấy đầu vào người dùng & Xử lý gửi Form
65 Chuẩn bị ứng dụng cho yêu cầu HTTP & Thêm Backend
66 Gửi yêu cầu HTTP POST
67 Điều hướng theo chương trình
68 Bắt đầu với truy xuất dữ liệu
69 Sử dụng Hook "useEffect"
70 Giới thiệu React Context
71 Cập nhật State dựa trên State trước đó
72 Sử dụng Context trong Components
73 Sử dụng Context nâng cao
74 Tóm tắt Module
75 Tài nguyên Module
1 Giới thiệu Module
2 Thiết lập khởi đầu
3 Hiểu định tuyến dựa trên file & React Server Components
4 Thêm Route khác qua hệ thống file
5 Điều hướng giữa các trang - Cách sai & Cách đúng
6 Làm việc với Pages & Layouts
7 Tên file đặc biệt, Components tùy chỉnh & Cách tổ chức dự án NextJS
8 Tên file được dành riêng
9 Cấu hình Dynamic Routes & Sử dụng Route Parameters
10 Tiếp tục với dự án chính: Ứng dụng Foodies
11 Bài tập: Nhiệm vụ của bạn
12 Bài tập: Lời giải
13 Ôn lại khái niệm Layouts
14 Thêm Component tùy chỉnh vào Layout
15 Định dạng dự án NextJS: Lựa chọn của bạn & Sử dụng CSS Modules
16 Tối ưu hình ảnh với NextJS Image Component
17 Sử dụng thêm Components tùy chỉnh
18 Điền nội dung cho trang chủ
19 Chuẩn bị trình chiếu hình ảnh
20 React Server Components vs Client Components - Khi nào dùng cái gì
21 Sử dụng Client Components hiệu quả
22 Xuất dữ liệu bữa ăn & hình ảnh với kích thước không xác định
23 Thiết lập cơ sở dữ liệu SQLite
24 Truy xuất dữ liệu bằng cách tận dụng NextJS & khả năng fullstack
25 Thêm trang Loading
26 Sử dụng Suspense & Streamed Responses để quản lý trạng thái Loading chi tiết
27 Xử lý lỗi
28 Xử lý trạng thái "Không tìm thấy"
29 Tải & Hiển thị chi tiết bữa ăn qua Dynamic Routes & Route Parameters
30 Ném lỗi Không tìm thấy cho từng bữa ăn
31 Bắt đầu với Form "Chia sẻ bữa ăn"
32 Bắt đầu với Component nhập chọn hình ảnh tùy chỉnh
33 Thêm xem trước hình ảnh vào bộ chọn
34 Cải thiện Component chọn hình ảnh
35 Giới thiệu & Sử dụng Server Actions để xử lý gửi Form
36 Lưu Server Actions trong file riêng
37 Tạo Slug & Làm sạch đầu vào người dùng để bảo vệ khỏi XSS
38 Lưu hình ảnh đã tải lên & Lưu dữ liệu vào cơ sở dữ liệu
39 Quản lý trạng thái gửi Form với useFormStatus
40 Thêm xác thực đầu vào phía máy chủ
41 Sử dụng useFormState()
42 Làm việc với phản hồi Server Action & useFormState
43 Build cho Production & Hiểu về Caching của NextJS
44 Kích hoạt tái xác thực Cache
45 Đừng lưu file cục bộ trên hệ thống file!
46 Bonus: Lưu hình ảnh đã tải lên trên đám mây (AWS S3)
47 Thêm Metadata tĩnh
48 Thêm Metadata động
49 Tóm tắt Module
1 Giới thiệu Module
2 Thiết lập dự án, Tổng quan & Một bài tập!
3 Lời giải bài tập - Phần 1
4 Lời giải bài tập - Phần 2
5 Định dạng ứng dụng & Sử dụng dữ liệu giả
6 Xử lý lỗi "Không tìm thấy" & Hiển thị trang "Không tìm thấy"
7 Thiết lập & Sử dụng Parallel Routes
8 Làm việc với Parallel Routes & Nested Routes
9 Cấu hình Catch-All Routes
10 Catch-All Fallback Routes & Xử lý nhiều phân đoạn đường dẫn
11 Ném lỗi (liên quan đến Route)
12 Xử lý lỗi với Error Pages
13 Server vs Client Components
14 Nested Routes bên trong Dynamic Routes
15 Chặn điều hướng & Sử dụng Interception Routes
16 Kết hợp Parallel & Intercepting Routes
17 Thay thế page.js bằng default.js
18 Điều hướng theo chương trình
19 Định nghĩa tài liệu HTML cơ sở
20 Sử dụng & Hiểu Route Groups
21 Xây dựng API với Route Handlers
22 Sử dụng Middleware
23 Tóm tắt Module
1 Giới thiệu Module
2 Thêm Backend
3 Tùy chọn 1: Truy xuất dữ liệu phía máy khách
4 Tùy chọn 2: Truy xuất dữ liệu phía máy chủ
5 Tại sao dùng Backend riêng? Truy xuất trực tiếp từ nguồn!
6 Hiển thị nội dung dự phòng "Đang tải"
7 Di chuyển toàn bộ ứng dụng sang nguồn dữ liệu cục bộ (Cơ sở dữ liệu)
8 Truy xuất dữ liệu chi tiết với Suspense
1 Giới thiệu Module
2 Dự án khởi đầu & Phân tích các tùy chọn thay đổi dữ liệu
3 Thiết lập Form Action
4 Tạo Server Action
5 Lưu dữ liệu trong cơ sở dữ liệu
6 Cung cấp phản hồi cho người dùng với Hook useFormStatus
7 Sử dụng Hook useFormState
8 Xác thực đầu vào người dùng với sự trợ giúp của Hook useFormState
9 Điều chỉnh Server Actions cho useFormState
10 Lưu Server Actions trong file riêng
11 "use server" không đảm bảo thực thi phía máy chủ!
12 Tải lên & Lưu hình ảnh
13 Các cách khác để sử dụng, cấu hình & kích hoạt Server Actions
14 Tái xác thực dữ liệu để tránh vấn đề Caching
15 Thực hiện cập nhật lạc quan (Optimistic Updates) với NextJS
16 Khác biệt về Caching: Môi trường Phát triển vs Sản phẩm
1 Giới thiệu Module
2 Hiểu rõ các Loại Caching trong NextJS
3 Thiết lập Dự án
4 Xử lý Ghi nhớ Yêu cầu (Request Memoization)
5 Hiểu về Bộ nhớ đệm Dữ liệu & Cài đặt Cache
6 Kiểm soát Bộ nhớ đệm Dữ liệu
7 Hiểu rõ về Bộ nhớ đệm Toàn bộ Route
8 Vô hiệu hóa Cache Theo yêu cầu với revalidatePath & revalidateTag
9 Thiết lập Ghi nhớ Yêu cầu cho Nguồn Dữ liệu Tùy chỉnh
10 Thiết lập Bộ nhớ đệm Dữ liệu cho Nguồn Dữ liệu Tùy chỉnh
11 Vô hiệu hóa Dữ liệu từ Nguồn Dữ liệu Tùy chỉnh
12 Tổng kết Module
1 Giới thiệu Module
2 Sử dụng Component Hình ảnh NextJS
3 Hiểu về Component Hình ảnh NextJS
4 Kiểm soát Kích thước Hình ảnh
5 Làm việc với Hình ảnh Ưu tiên & Các Cài đặt Khác
6 Tải Hình ảnh Không xác định
7 Cấu hình CSS cho Hình ảnh với Thuộc tính "fill"
8 Sử dụng Image Loader & Thay đổi kích thước Cloudinary
9 Metadata Trang - Giới thiệu
10 Cấu hình Metadata Trang Tĩnh
11 Cấu hình Metadata Trang Động
12 Hiểu về Metadata Layout
1 Giới thiệu Module
2 Thiết lập Dự án
3 Đăng ký Người dùng: Trích xuất & Xác thực Đầu vào
4 Lưu trữ Người dùng trong Cơ sở dữ liệu - Cách Sai
5 Mã hóa Mật khẩu & Lưu trữ Dữ liệu Người dùng Đúng cách
6 Kiểm tra Email Trùng lặp
7 Lý thuyết: Xác thực Người dùng Hoạt động như thế nào?
8 Chọn Gói Xác thực Bên thứ ba (Lucia)
9 Tạo một Thể hiện Xác thực Lucia Mới
10 Cấu hình Phiên & Cookie Phiên
11 Thiết lập Phiên Xác thực
12 Xác minh Phiên Xác thực Đang hoạt động
13 Bảo vệ Route trước Truy cập Chưa xác thực
14 Chuyển đổi Chế độ Xác thực bằng Tham số Truy vấn (Search Params)
15 Thêm Đăng nhập Người dùng (qua Server Action)
16 Kích hoạt Server Action Khác nhau qua Tham số Truy vấn
17 Thêm Layout Chỉ dành cho Xác thực
18 Một Root Layout vs Nhiều Root Layout
19 Thêm Đăng xuất Người dùng
1 Tổng kết Khóa học
2 Nhưng vẫn còn Nội dung NextJS Khác!
1 Từ App Router sang Pages Router
2 Sử dụng Ảnh chụp Mã nguồn
3 Giới thiệu Module
4 Thiết lập Ban đầu của Chúng ta
5 "Định tuyến dựa trên Tệp" là gì? Và tại sao Nó Hữu ích?
6 Thêm Trang Đầu tiên
7 Thêm Tệp Route Tĩnh / Được đặt tên
8 Làm việc với Đường dẫn & Route Lồng nhau
9 Thêm Đường dẫn & Route Động
10 Trích xuất Dữ liệu Phân đoạn Đường dẫn Động (Dynamic Routes)
11 Xây dựng Route & Đường dẫn Động Lồng nhau
12 Thêm Route Catch-All
13 Điều hướng với Component "Link"
14 Điều hướng đến Route Động
15 Một Cách Khác để Thiết lập Href của Link
16 Điều hướng Theo chương trình
17 Thêm Trang 404 Tùy chỉnh
18 Tổng kết Module
19 Tài nguyên Module
1 Giới thiệu Module
2 Lập kế hoạch Dự án
3 Thiết lập Các Trang Chính
4 Thêm Dữ liệu Giả & Tệp Tĩnh
5 Thêm Component React Thông thường
6 Thêm Component React Khác & Kết nối Component
7 Tạo kiểu Component trong Dự án Next.js
8 & NextJS 13
9 Thêm Nút & Biểu tượng
10 Thêm Trang "Chi tiết Sự kiện" (Route Động)
11 Thêm Component Bao bọc Layout Chung
12 Làm việc trên Trang "Tất cả Sự kiện"
13 Thêm Biểu mẫu Lọc để Lọc Sự kiện
14 Điều hướng đến Trang "Sự kiện Đã lọc" Theo chương trình
15 Trích xuất Dữ liệu trên Trang Catch-All
16 Bước Cuối cùng
17 Tổng kết Module
18 Tài nguyên Module
1 Giới thiệu Module
2 Vấn đề với Ứng dụng React Truyền thống (và Tải dữ liệu)
3 Cách NextJS Chuẩn bị & Pre-render Trang
4 Giới thiệu Static Generation với "getStaticProps"
5 NextJS Mặc định Pre-render!
6 Thêm "getStaticProps" vào Trang
7 Chạy Mã Phía máy chủ & Sử dụng Hệ thống Tệp
8 Nhìn vào Hậu trường
9 Sử dụng Incremental Static Generation (ISR)
10 ISR: Nhìn vào Hậu trường
11 Xem kỹ "getStaticProps" & Tùy chọn Cấu hình
12 Làm việc với Tham số Động
13 Giới thiệu "getStaticPaths" cho Trang Động
14 Sử dụng "getStaticPaths"
15 "getStaticPaths" & Link Prefetching: Hậu trường
16 Làm việc với Trang Fallback
17 Tải Đường dẫn Động
18 Trang Fallback & Trang "Không tìm thấy"
19 Giới thiệu "getServerSideProps" cho Server-side Rendering (SSR)
20 Sử dụng "getServerSideProps" cho Server-side Rendering
21 "getServerSideProps" và Ngữ cảnh của nó
22 Trang Động & "getServerSideProps"
23 "getServerSideProps": Hậu trường
24 Giới thiệu Tải Dữ liệu Phía máy khách (Và Khi nào Sử dụng)
25 Triển khai Tải Dữ liệu Phía máy khách
26 Lưu ý về useSWR
27 Sử dụng Hook "useSWR" của NextJS
28 Kết hợp Pre-fetching với Tải Dữ liệu Phía máy khách
29 Tổng kết Module
30 Tài nguyên Module
1 Giới thiệu Module
2 Chuẩn bị
3 Thêm Static Site Generation (SSG) trên Trang Chủ
4 Tải Dữ liệu & Đường dẫn cho Trang Động
5 Tối ưu hóa Tải Dữ liệu
6 Làm việc trên Trang "Tất cả Sự kiện"
7 Sử dụng Server-side Rendering (SSR)
8 Thêm Tải Dữ liệu Phía máy khách
9 Tổng kết Module
10 Tài nguyên Module
1 Giới thiệu Module
2 Phân tích Nhu cầu về Metadata "head"
3 Cấu hình Nội dung "head"
4 Thêm Nội dung "head" Động
5 Tái sử dụng Logic bên trong Component
6 Làm việc với Tệp "_app.js" (và Lý do)
7 Hợp nhất Nội dung "head"
8 Tệp "_document.js" (Và Chức năng của nó)
9 Xem kỹ Hình ảnh của Chúng ta
10 Tối ưu hóa Hình ảnh với Component & Tính năng "Next Image"
11 Xem Tài liệu "Next Image"
12 Tổng kết Module
13 Tài nguyên Module
1 Giới thiệu Module
2 "API Routes" là gì?
3 Viết API Route Đầu tiên của Chúng ta
4 Chuẩn bị Biểu mẫu Frontend
5 Phân tích Yêu cầu Đến & Thực thi Mã Phía máy chủ
6 Gửi Yêu cầu đến API Routes
7 Sử dụng API Routes để Lấy Dữ liệu
8 Sử dụng API Routes để Pre-render Trang
9 Tạo & Sử dụng API Routes Động
10 Khám phá Cách khác để Cấu trúc Tệp API Route
11 Tổng kết Module
12 Tài nguyên Module
1 Giới thiệu Module
2 Thiết lập Ban đầu & Thử thách cho Bạn!
3 Thêm Route Newsletter
4 Thêm API Routes Bình luận
5 Kết nối Frontend với API Routes Bình luận
6 Thiết lập Cơ sở dữ liệu MongoDB
7 Chạy Truy vấn MongoDB từ bên trong API Routes
8 Chèn Bình luận vào Cơ sở dữ liệu
9 Lấy Dữ liệu từ Cơ sở dữ liệu
10 Thêm Xử lý Lỗi
11 Thêm Xử lý Lỗi
12 Lưu ý Cuối cùng về Kết nối MongoDB
13 Tổng kết Module
14 Cải thiện: Lấy Bình luận cho Sự kiện Cụ thể
15 Tài nguyên Module
1 Giới thiệu Module
2 State Mục tiêu & Dự án Ban đầu của Chúng ta
3 Tạo React Context Mới
4 Thêm State Context
5 Sử dụng Dữ liệu Context trong Component
6 Ví dụ: Kích hoạt & Hiển thị Thông báo
7 Ví dụ: Xóa Thông báo (Tự động)
8 Giải pháp Thử thách
9 Tổng kết Module
10 Tài nguyên Module
1 Giới thiệu Module
2 Thiết lập Các Trang Cốt lõi
3 Bắt đầu với Trang Chủ
4 Thêm Component "Hero"
5 Thêm Layout & Điều hướng
6 Thời gian Thêm Kiểu dáng & Logo
7 Bắt đầu Làm việc trên Phần "Bài viết Nổi bật"
8 Thêm Lưới Bài viết & Mục Bài viết
9 Hiển thị Dữ liệu Bài viết Giả
10 Thêm Trang "Tất cả Bài viết"
11 Làm việc trên Trang "Chi tiết Bài viết"
12 Hiển thị Markdown dưới dạng JSX
13 Thêm Tệp Markdown làm Nguồn Dữ liệu
14 Thêm Hàm để Đọc & Tải Dữ liệu từ Tệp Markdown
15 Sử Dụng Dữ Liệu Markdown Để Hiển Thị Bài Viết
16 Hiển Thị Trang Bài Viết Động & Đường Dẫn
17 Hiển Thị Phần Tử HTML Tùy Chỉnh Với React Markdown
18 Hiển Thị Hình Ảnh Bằng Component "Next Image" (Từ Markdown)
19 Hiển Thị Đoạn Mã Từ Markdown
20 Chuẩn Bị Biểu Mẫu Liên Hệ
21 Thêm Route API Liên Hệ
22 Gửi Dữ Liệu Từ Client Đến Route API
23 Lưu Trữ Tin Nhắn Với MongoDB Trong Cơ Sở Dữ Liệu
24 Thêm Phản Hồi Giao Diện Bằng Thông Báo
25 Thêm Dữ Liệu "head"
26 Thêm Tệp "_document.js"
27 Sử Dụng React Portals
28 Tổng Kết Module
29 Tài Nguyên Module
1 Giới Thiệu Module
2 Xây Dựng Ứng Dụng NextJS: Các Lựa Chọn Của Bạn
3 Các Bước Triển Khai Quan Trọng
4 Kiểm Tra & Tối Ưu Hóa Mã Nguồn
5 Tệp Cấu Hình NextJS & Làm Việc Với Biến Môi Trường
6 Chạy Build Thử & Giảm Kích Thước Mã
7 Ví Dụ Triển Khai Đầy Đủ (Lên Vercel)
8 Lưu Ý Về Github & Thông Tin Xác Thực Bí Mật
9 Sử Dụng Tính Năng "export"
10 Tổng Kết Module
11 Tài Nguyên Module
1 Giới Thiệu Module
2 Dự Án Bắt Đầu Của Chúng Ta
3 Xác Thực Hoạt Động Như Thế Nào (Trong Ứng Dụng React & NextJS)?
4 Bắt Buộc Đọc: Cài Đặt Đúng Phiên Bản next-auth
5 Sử Dụng Thư Viện "next-auth"
6 Thêm Route API Đăng Ký Người Dùng
7 Gửi Yêu Cầu Đăng Ký Từ Frontend
8 Cải Thiện Đăng Ký Với Địa Chỉ Email Duy Nhất
9 Thêm "Credentials Auth Provider" & Logic Đăng Nhập Người Dùng
10 Gửi Yêu Cầu "Đăng Nhập" Từ Frontend
11 Quản Lý Phiên Hoạt Động (Trên Frontend)
12 Thêm Tính Năng Đăng Xuất Người Dùng
13 Thêm Bảo Vệ Trang Phía Client (Bảo Vệ Route)
14 Thêm Bảo Vệ Trang Phía Máy Chủ (Và Khi Nào Nên Dùng Cách Nào)
15 Bảo Vệ Trang "Auth"
16 Sử Dụng Component "next-auth" Session Provider
17 Phân Tích Các Yêu Cầu Xác Thực Tiếp Theo
18 Bảo Vệ API Routes
19 Thêm Logic "Đổi Mật Khẩu"
20 Gửi Yêu Cầu "Đổi Mật Khẩu" Từ Frontend
21 Tổng Kết Module & Các Bước Cuối Cùng
22 Tài Nguyên Module
1 Giới Thiệu Module
2 NextJS Là Gì?
3 Tính Năng Chính: Render Trang Phía Máy Chủ (Trước)
4 Tính Năng Chính: Định Tuyến Dựa Trên Tệp
5 Tính Năng Chính: Xây Dựng Ứng Dụng Fullstack Dễ Dàng
6 Tạo Dự Án NextJS & Thiết Lập IDE
7 Về "App Router"
8 Phân Tích Dự Án Đã Tạo
9 Thêm Trang Đầu Tiên Vào Dự Án
10 Thêm Trang / Đường Dẫn Lồng Nhau
11 Tạo Trang Động
12 Trích Xuất Dữ Liệu Route Động
13 Liên Kết Giữa Các Trang
14 Tiếp Tục Đến Dự Án Lớn Hơn!
15 Chuẩn Bị Các Trang Dự Án Của Chúng Ta
16 Hiển Thị Danh Sách Meetup (Giả Lập)
17 Thêm Biểu Mẫu Để Tạo Meetup
18 Tệp "_app.js" & Các Component Bao Bọc
19 Điều Hướng Theo Chương Trình
20 Thêm Component Tùy Chỉnh & Tạo Kiểu Với CSS Modules
21 Cách Pre-Rendering Trang NextJS Thực Sự Hoạt Động
22 Giới Thiệu Lấy Dữ Liệu Để Tạo Trang (getStaticProps)
23 Thêm Về Tạo Site Tĩnh (SSG) Với getStaticProps
24 Khám Phá getServerSideProps
25 Làm Việc Với Tham Số Đường Dẫn Động Trong getStaticProps
26 Trang Động & getStaticProps & getStaticPaths
27 Giới Thiệu API Routes
28 Kết Nối & Truy Vấn Cơ Sở Dữ Liệu MongoDB
29 Gửi Yêu Cầu HTTP Đến API Routes
30 Lấy Dữ Liệu Từ Cơ Sở Dữ Liệu (Để Pre-Rendering Trang)
31 Lấy Dữ Liệu Chi Tiết Meetup & Đường Dẫn
32 Thêm Metadata "head" Vào Trang
33 Triển Khai Dự Án NextJS
34 Làm Việc Với Trang Fallback & Triển Khai Lại
35 Tổng Kết Module
36 Tài Nguyên Module
1 Tổng Kết Khóa Học
2 Phần Thưởng!

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

This course teaches you the latest version of Next.js and covers both the "App Router" and "Pages Router" (and explains what these two approaches are).


Join this bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS!

This course covers both the NextJS "App Router" & the "Pages Router" - two different approaches for building fullstack apps with React! And, of course, you'll learn what these two approaches are, why two different approaches exist and how each approach works!


I created the bestselling Udemy course on React, now I'm super excited to share this NextJS with you - an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js!

Next.js is the production-ready, fullstack-capable framework for ReactJS - the most popular JavaScript library you can learn these days!

Too many buzzwords for your taste?

Fair enough - but indeed, NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!

Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!

In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It's a breeze with NextJS!

Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.

This course will take you from NextJS beginner to advanced level in no time!

We'll start at the very basics, no NextJS knowledge is required at all, and we'll then dive into all the core features that make up NextJS. Both in theory as well as with multiple real projects where all concepts will be applied step-by-step.

For this course, you'll need basic React knowledge, though the course does come with a "React refresher" module in case it's been some time since you last worked with React.

This course also includes a "NextJS Summary" module for the Pages router and a "NextJS Essentials" module for the App router - which allow you to always come back to the course in the future and refresh your knowledge without going through the full course again. Or you just take those summary modules (and skip the rest for now) to learn about all the core features in as little time as possible.

After finishing this course, you'll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!

In detail, this course will cover:

  • What is NextJS? And why would you use it?

  • Why is just React (in many cases) not enough?

  • Creating NextJS projects from the ground up & understanding these projects

  • Working with file-based routing

  • Adding dynamic routes and catch-all routes

  • Implementing different forms of page pre-rendering and server-side rendering

  • Working with data and adding data fetching + pre-fetching to your apps

  • Handling form submissions with Server Actions

  • Handling File upload

  • Pre-generating dynamic and static pages

  • Adding optimizations like metadata to pages

  • Optimizing images with the NextJS Image component

  • Building fullstack apps with API routes or Server Actions

  • Managing app-wide state with React context (in NextJS apps)

  • Adding authentication to NextJS apps

  • Multiple complete apps where we'll apply all these core concepts!

  • A complete React.js refresher module (so that we're all on the same page)

  • A NextJS summary module so that you can refresh what you learned or just explore the core features quickly

  • And much more!

I can't wait to start this journey together with you! :)

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 Frontend Development
Hiển thị tất cả khoá học Next Js
Hiển thị tất cả khoá học React
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 😊