Next.js vừa tầm một miếng ăn
Tác phẩm thứ 3 trong series "Một miếng"! Đây là khóa học Next.js chi tiết và tận tâm nhất thế giới. Chúng ta sẽ cùng tìm hiểu không chỉ App Router mà cả Page Router thông qua các dự án thực tế.
5,658 học viên
Độ khó Cơ bản
Thời gian Không giới hạn
･
Đã chỉnh sửa
Ghi chú vá lỗi một miếng) Thông tin về cập nhật của Next.js 15 bài giảng liên quan
Xin chào các bạn học sinh Hanbite Next , tôi là Jeonghwan Lee.
Vào ngày 21 tháng 10 năm 2024, Next.js phiên bản 15 cuối cùng đã được phát hành chính thức (mới nhất) 🎉
15 link tài liệu chính thức liên quan tiếp theo: https://nextjs.org/blog/next-15
Vì bài giảng của chúng tôi được biên soạn dựa trên phiên bản 15 RC (15.0.0-rc.0)
Không có sự khác biệt đáng kể so với phiên bản 15 mới nhất hiện đang được phát hành.
Tuy nhiên, chúng tôi gửi cho bạn thông tin này vì có một số khác biệt so với nội dung bài giảng hiện có.
Thay đổi chức năng) searchParams và params hiện được cung cấp không đồng bộ.
Học viên thi Next 15 RC trước ngày 21/10/2024
Bạn sẽ sử dụng searchParams và params một cách đồng bộ như thế này:
// searchParams 꺼내오기 export default async function Page({ searchParams, }: { searchParams: { q: string }; }) { const { q } = searchParams; return {q}Tuy nhiên, bắt đầu từ phiên bản Next 15 (mới nhất), được phát hành chính thức vào ngày 21, searchParams và params được cho là được cung cấp không đồng bộ. Do đó, từ giờ trở đi, bạn cần đặt giá trị cần truy xuất bằng async và chờ đợi như sau. Một số chương được ghi lại trong bài giảng để phản ánh nội dung.
// searchParams 꺼내오기 export default async function Page({ searchParams, }: { searchParams: Promise<{ q: string }>; }) { const { q } = await searchParams; return {q}Ngoài ra, người ta nói rằng tất cả dữ liệu dựa trên yêu cầu nhận được từ trình duyệt, chẳng hạn như cookie và tiêu đề, sẽ được cung cấp không đồng bộ trong tương lai. Mặc dù chúng tôi không đề cập đến cookie và tiêu đề trong bài giảng của mình nhưng bạn nên biết về chúng vì đây là những chức năng mà bạn có thể sẽ sử dụng khi thực hiện các dự án cá nhân trong tương lai. Dưới đây là các liên kết đến các bài viết liên quan.
https://nextjs.org/blog/next-15#async-request-apis-break-change
Cập nhật bài giảng) Bài giảng đã được sửa đổi để phản ánh những thay đổi trên.
Để phản ánh những thay đổi trên, một số chương (video clip) đã được ghi lại và cập nhật.
Sau đây là hướng dẫn thay đổi cho từng chương. Tôi nghĩ sẽ là một ý kiến hay nếu bạn tham khảo và kiểm tra lại một số phần 😃
3.1) Khởi động bộ định tuyến ứng dụng
Thời gian thay đổi: Video được chỉnh sửa trong khoảng thời gian từ 02 phút 26 giây đến 4 phút 29 giây.
Đã thay đổi: Tạo ứng dụng Next.js mới không còn sử dụng phiên bản RC nữa. Điều này đã thay đổi lệnh tạo ứng dụng từ craete-next-app@rc thành create-next-app@latest .
3.2) Thiết lập định tuyến trang
Thời gian thay đổi: 06 phút 16 giây đến hết
Thay đổi: searchParams và params hiện được cung cấp không đồng bộ. Vì vậy, cách chúng ta xử lý searchParams và params trong bài giảng đã thay đổi.
7.2) Triển khai tính năng bổ trợ đánh giá
Thời gian thay đổi: 14 phút 57 giây ~ 16 phút 57 giây
Thay đổi: Bắt đầu từ phiên bản Next 15, các thông báo trước đây được hiển thị dưới dạng cảnh báo đơn giản trên bảng điều khiển giờ đây xuất hiện dưới dạng lớp phủ. Để giải quyết những bất tiện gây ra trong quá trình luyện tập, chúng tôi đã bổ sung thêm hướng dẫn về cách khắc phục lỗi.
9.2) Tối ưu hóa công cụ tìm kiếm
Thời gian thay đổi: 07 phút 18 giây đến hết
Thay đổi: searchParams và params hiện được cung cấp không đồng bộ. Do đó, cách xử lý searchParams và params trong hàm generateMetadat cũng đã thay đổi.
Tóm lại
Cuối cùng, chúng tôi xin cảm ơn tất cả các bạn đã yêu mến và quan tâm đến Next.js.
Chúng tôi sẽ tiếp tục làm việc chăm chỉ để trả lại sự quan tâm của bạn 🙇♂
Dù thời tiết khá lạnh nhưng chúng tôi vẫn gửi tin tới bạn với tấm lòng ấm áp.
Cảm ơn bạn luôn.
Giấc mơ của Jeonghwan Lee