강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Next.js(v15) ăn từng miếng nhỏ

Tác phẩm thứ 3 của series Hanip! Đây là khóa học Next.js(15+) thân thiện và chi tiết nhất trên thế giới. Không chỉ App Router mà còn cả Page Router đều được tìm hiểu thông qua dự án thực tế.

(5.0) 524 đánh giá

5,177 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

  • winterlood
Next.js
Next.js
React
React
TypeScript
TypeScript
Next.js
Next.js
React
React
TypeScript
TypeScript

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

5.0

5.0

Next

100% đã tham gia

Tôi đã có thể học được nhiều kiến thức từ các khái niệm cơ bản đến nâng cao của Next.js. Đặc biệt, tôi có thể dễ dàng hiểu những chủ đề phức tạp có thể khó hiểu thông qua các tài liệu trực quan và hoạt hình. Nội dung bài giảng được sắp xếp theo từng giai đoạn, vì vậy ngay cả người mới bắt đầu cũng có thể dễ dàng theo dõi, và tôi nghĩ rằng ngay cả những nhà phát triển cấp trung trở lên cũng có thể học được nhiều điều bổ ích từ khóa học này. Ngoài ra, không chỉ dừng lại ở việc học ngữ pháp, khóa học còn đi sâu vào nguyên lý hoạt động và cơ chế bên trong của Next.js, SSR, SSG, ISR và nhiều phương pháp khác, đồng thời cũng đề cập đến các cách áp dụng vào các dự án thực tế, giúp tôi rất nhiều. Nhờ sự chuẩn bị và nỗ lực chu đáo của giảng viên, quá trình học Next.js thực sự thú vị và bổ ích. Tôi xin chân thành cảm ơn!

5.0

itjustbong

74% đã tham gia

Tôi đang để lại đánh giá vì tôi rất hài lòng với khóa học! Mặc dù tôi là một nhà phát triển front-end nhưng tôi đã bị mắc kẹt trong ngăn xếp Bộ định tuyến Trang trong một thời gian dài. Không phải là tôi chưa thử Bộ định tuyến ứng dụng, nhưng tôi vẫn tiếp tục sử dụng Bộ định tuyến trang, có lẽ vì tôi đã quen với nó... Tuy nhiên, tôi nghĩ mình sẽ bắt kịp những xu hướng mới nhất khi nghe bài giảng này nhưng chất lượng lại cao hơn tôi mong đợi rất nhiều và tôi nghĩ một trong những lý do khiến tôi tiếp tục quay lại Page Router là vì tôi không thực sự hiểu rõ. Bộ định tuyến ứng dụng. Bằng cách tham gia bài giảng này, tôi có thể hiểu cách thức hoạt động của Bộ định tuyến ứng dụng và tôi có thể tin tưởng vào Bộ định tuyến ứng dụng khi thực hiện một dự án nhỏ. Nếu có điều gì bạn muốn xem trong bài giảng tiếp theo, nếu bạn thiết lập Bộ định tuyến ứng dụng, bạn có thể sử dụng hệ thống thiết kế hoặc nhiều thư viện khác không? Có những trường hợp khó cài đặt vì cài đặt không hoạt động bình thường, vì vậy sẽ rất tuyệt nếu có phiên bản thực tế (hoặc phiên bản nâng cao) bao gồm tất cả các cài đặt này! Cảm ơn!

5.0

dla1434

92% đã tham gia

Thông thường tôi không thường xuyên để lại những nhận xét về bài giảng, nhưng tôi rất hài lòng với bài giảng này nên tôi đã bỏ nó đi. Đầu tiên tôi xem một số bài giảng Next, nhưng hầu hết chỉ dạy tôi cách sử dụng những phần khó giải thích trong bài giảng và nói “Bạn có thể sử dụng như thế này nên tôi luôn thắc mắc” Tại sao. Tôi có nên sử dụng nó không? Có gì khác biệt?” Tôi đã tra cứu tài liệu chính thức nhưng có rất nhiều phần không rõ ràng nên tôi không thể hiểu được. Tôi hiểu hầu hết bài giảng này. Trước hết, lời giải thích và tài liệu rất dễ hiểu. Sau khi giải thích lý thuyết, ông lại một lần nữa chứng minh nó bằng thực tế. Tôi nghĩ bài giảng này là một trong những bài giảng hay nhất mà tôi từng xem. Đó là một bài giảng. Bài giảng hiện tại tuy hay nhưng đó là kết quả của việc phản ánh rất nhiều trăn trở và phản hồi. Tôi nghĩ vậy. Tôi thực sự mong chờ bài giảng tiếp theo ~~ Lần sau sẽ rất tuyệt nếu tạo ra một bài giảng giống như một phiên bản thực tế của Next.

Bạn sẽ nhận được điều này sau khi học.

  • Tìm hiểu về các khái niệm Next.js mới nhất (v15 trở lên).

  • Chúng ta sẽ tìm hiểu hầu hết các khái niệm từ Page Router đến App Router.

  • Khám phá các khái niệm đa dạng như Server Component, Page Routing, cấu hình Layout, Data Fetching, Streaming, Deploy và nhiều hơn nữa

로드맵안내_넥스트

Nhấp vào hình ảnh để chuyển đến lộ trình học tập.
> Link lộ trình: https://link.onebitefe.com/r/68zgsv

Link khóa học chuỗi
> Học React từng miếng nhỏ :https://inf.run/v3XAj
>
Học TypeScript từng miếng nhỏ : https://inf.run/FpLm4
>
Học Next từng miếng nhỏ : https://inf.run/v3XAj

Nhờ sự yêu mến của các bạn, khóa học này đã được xuất bản thành sách. Chân thành cảm ơn 🙇‍♂

  • Next.js chia nhỏ từng miếng vừa ăn | Official Trailer

Next.js(15+) chia nhỏ từng miếng vừa ăn

Với thời lượng 15 giờ
từ Page Router đến App Router

💡 Page Router là gì?

Router được sử dụng cho đến trước phiên bản Next.js 13
Cung cấp các tính năng trực quan và ổn định

💡 App Router là gì?

Router mới nhất được công bố sau phiên bản Next.js 13
Cung cấp các tính năng mới nhất như streaming, server action, v.v.

App Router xuất hiện mới từ phiên bản Next.js 13 để bổ sung các nhược điểm của Page Router.
Do đó, nếu không hiểu về Page Router thì sẽ khó có thể dễ dàng hiểu được cơ chế mới của App Router.

Do đó, khóa học này sẽ tiến hành theo trình tự xem xét nhanh Page Router (5 giờ) trước, sau đó tìm hiểu chính thức về App Router (10 giờ). Thông qua đó, bạn sẽ hiểu sâu sắc về những hạn chế của Page Router trước đây và cách App Router khắc phục những hạn chế này như thế nào.

⚠ Tuy nhiên đừng hiểu lầm, khóa học này sẽ tập trung vào App Router.

Đủ rồi với các tài liệu hình ảnh tĩnh
Tìm hiểu Next.js cùng với các hoạt ảnh trực quan

Next.js có nhiều tính năng với cơ chế phức tạp.
Do đó, chỉ với tài liệu hình ảnh tĩnh thì khó có thể giải thích đầy đủ.
Vì vậy, khóa học này đi kèm với các hoạt ảnh trực quan như dưới đây

Tài liệu trực quan liên quan đến App Router Layout

Tài liệu trực quan về React Server Component

Tài liệu trực quan liên quan đến React Server Component

Tài liệu trực quan về Client Router Cache

Cung cấp máy chủ backend tự phát triển để thực hành 🚧
gần giống với tình huống thực tế nhất có thể

Để xem xét các tính năng bộ nhớ đệm khác nhau của Next.js trong môi trường gần với thực tế hơn,
chúng tôi cung cấp cho bạn máy chủ backend tự phát triển.

Tài liệu API máy chủ backend

Cấu trúc khóa học

Phần 1. Giới thiệu về Next.js

Trước khi bắt đầu học chính thức, chúng ta sẽ tìm hiểu Next.js là công nghệ gì
và tại sao ngày nay nó lại nhận được nhiều sự quan tâm như vậy.

Phần 1. Giới thiệu về Next.js.

Phần 1. Giới thiệu Next.js

Phần 2. Tổng hợp cốt lõi về Page Router

(Tùy chọn) Cùng với dự án, chúng ta sẽ nhanh chóng tìm hiểu về Page Router được cung cấp từ những ngày đầu ra mắt của Next.js.
Đồng thời, chúng ta cũng sẽ xem xét những bất tiện và hạn chế kỹ thuật của Page Router.

Phần 2. Giới thiệu về Page Router

Phần 2. Giới thiệu về Page Router

Phần 3. Bắt đầu với App Router

Tìm hiểu về App Router - tâm điểm của sự chú ý! Chúng ta sẽ tìm hiểu App Router là gì, có những khác biệt kỹ thuật nào và cùng nhau tìm hiểu về cách sử dụng cơ bản.

Phần 3. Bắt đầu với App Router

Phần 3. Bắt đầu với App Router

Phần 4. Lấy dữ liệu

Tìm hiểu về data fetching sử dụng Server Component.
Đồng thời cũng tìm hiểu về các loại caching khác nhau mà Next cung cấp (Data Cache, Request Memoization).

Phần 4. Tìm nạp dữ liệu

Phần 4. Tìm nạp dữ liệu

Phần 5. Bộ nhớ đệm trang

Chúng ta sẽ tìm hiểu chi tiết về Full Route CacheClient-side Router Cache, là các cơ chế cache trang trong phiên bản App Router.
Đồng thời, chúng ta cũng sẽ tìm hiểu thêm về Route Segment Config, cho phép thiết lập bắt buộc các tùy chọn cache của trang

Phần 5. Bộ nhớ đệm trang

Phần 5. Bộ nhớ đệm trang

Phần 6. Streaming & Xử lý lỗi

Tìm hiểu về streaming giúp render ngay lập tức các phần sẵn sàng nhanh nhất trên trang.
Chúng ta sẽ xem xét cả hai phương pháp: sử dụng file Loading và sử dụng Suspense.

Ngoài ra, chúng ta cũng sẽ tìm hiểu về cách xử lý lỗi và phục hồi trang bằng cách sử dụng file Error.

Phần 6. Streaming và xử lý lỗi

Phần 6. Streaming và xử lý lỗi

Phần 7. Server Actions

Tìm hiểu về Server Action đã gây được phản ứng nóng hổi khi ra mắt.
Chúng ta sẽ tìm hiểu cách thêm hoặc xóa dữ liệu bằng Server Action và cách xử lý trạng thái loading cũng như trạng thái lỗi.

Phần 7. Server Action

Phần 7. Server Action

Phần 8. Mẫu định tuyến nâng cao (Parallel, Intercepting)

Tìm hiểu về Parallel Routes (định tuyến song song) & Intercepting Routes (định tuyến chặn) được cung cấp mới trong App Router.
Sử dụng chúng để triển khai tính năng hiển thị một trang cụ thể dưới dạng modal mà không làm gián đoạn điều hướng của người dùng.

Phần 8. Các mẫu định tuyến nâng cao

Phần 8. Các mẫu định tuyến nâng cao

Phần 9. Tối ưu hóa và Triển khai

Tìm hiểu các phương pháp tối ưu hóa hình ảnh, metadata, trang, vùng, v.v.
Triển khai dự án đã được tối ưu hóa lên Vercel và tiến hành cải thiện hiệu suất thêm một lần nữa.

Phần 9. Tối ưu hóa và Triển khai

Phần 9. Tối ưu hóa và triển khai

5 nguyên tắc của series Hanip

⚖ Nguyên tắc 1. Tài liệu trực quan phong phú và dễ hiểu

Giống như cùng một món ăn nhưng trông đẹp mắt sẽ cảm thấy ngon hơn,
tôi nghĩ rằng cùng một khái niệm được giải thích nhưng với tài liệu trực quan hấp dẫn và dễ hiểu hơn sẽ dễ tiếp thu hơn.

Vì vậy, tôi đã nỗ lực không ngừng để tạo ra các tài liệu trực quan bao gồm cả hoạt hình.

⚖ Nguyên tắc 2. Sự thân thiện

Khi xuất hiện thuật ngữ hoặc khái niệm mới, tôi không giải thích qua loa rồi bỏ qua, cũng không tự cho rằng các bạn đã biết trước. Tôi đã cố gắng hết sức để các bạn không phải tìm kiếm thêm trên Google trong khi học.

⚖ Nguyên tắc 3. Tính hợp lý

Để duy trì sự hứng thú của các học viên, khi có nội dung mới xuất hiện trong bài giảng, tôi luôn suy nghĩ về tính liên kết - liệu nó có liên quan đến nội dung trước đó hay không, liệu các bạn có cảm thấy luồng bài giảng bị gián đoạn đột ngột hay không, và đã xây dựng bài giảng với sự cân nhắc kỹ lưỡng về tính mạch lạc này.

⚖ Nguyên tắc 4. Phát âm và khẩu hình tốt

Vì bạn phải nghe giọng nói của tôi trong thời gian dài nên tôi luôn nỗ lực để có phát âm và khẩu hình tốt.
Để làm được điều này, tôi đã sản xuất bài giảng sao cho bạn có thể nghe rõ ngay cả khi phát ở tốc độ 2x.

Hãy thử nghe! Link phát tốc độ 2x

⚖ Nguyên tắc 5. Giao tiếp

Tập hợp tại cộng đồng dành riêng cho học viên để chia sẻ kiến thức, tin tức và cùng nhau phát triển.

Hỏi đáp dự kiến 💬

Đối tượng học viên của khóa học này là ai?

Đây là khóa học được tối ưu hóa cho những người có kiến thức cơ bản về React.js và TypeScript.
Tuy nhiên, đối với TypeScript, chúng tôi sẽ cung cấp giải thích bổ sung và tài liệu học tập bổ sung trong suốt khóa học,
vì vậy bạn có thể theo dõi mà không gặp khó khăn ngoại trừ phần viết type.

Q. Tôi chỉ muốn học App Router thôi, liệu có nhất thiết phải học cả phần Page Router không?

Nếu bạn đã thành thạo Page Router thì có thể bỏ qua phần 2 và bắt đầu học từ phần 3.
Tuy nhiên, bạn cần có sự nhận thức chính xác về việc mình đã hiểu rõ các hạn chế và đặc điểm của Page Router hay chưa.

Portfolio và video cá nhân

INFCON2023 - Tại sao TypeScript lại như vậy?

(Sách) Video giới thiệu React cắn từng miếng vừa ăn

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Các bạn học viên của loạt bài Hanip

  • Những bạn mới bắt đầu làm quen với Next.js

  • Những người muốn học với phiên bản Next.js mới nhất (15+)

  • Những người đang tìm kiếm khóa học thân thiện và chi tiết

Cần biết trước khi bắt đầu?

  • React.js (cơ bản)

  • TypeScript (cơ bản)

Xin chào
Đây là

37,213

Học viên

2,605

Đánh giá

1,600

Trả lời

4.9

Xếp hạng

13

Các khóa học

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

Chương trình giảng dạy

Tất cả

66 bài giảng ∙ (15giờ 33phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

524 đánh giá

5.0

524 đánh giá

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Đánh giá 15

    Đánh giá trung bình 5.0

    5

    25% đã tham gia

    Còn bài giảng Next.js thì sao? Lee Jeonghwan. Bài giảng React.js cũng vậy? Lee Jeonghwan. Bài giảng TypeScript nữa à? Lee Jeonghwan. Đó là chính thức. Hãy ghi nhớ nó. Nó đánh vào đầu bạn bằng hình ảnh và cách diễn đạt. Vẫn chưa trả tiền? Đọc và đọc. Nếu bạn gặp khó khăn khi trả lời các câu hỏi dưới đây hoặc có khái niệm khó hiểu, vui lòng thanh toán. Nó giúp ích. 1. Vui lòng giải thích sự khác biệt giữa React và Next.js về TTV và TTI. 2. Vui lòng giải thích về kết xuất trước của Next.js. 3. Vui lòng giải thích việc tìm nạp trước Next.js. 4. Quá trình hydrat hóa Next.js xảy ra vào thời điểm nào? 5. Quá trình tìm nạp dữ liệu Next.js diễn ra vào thời điểm nào? Tôi không biết gì cả, nhưng bây giờ tôi có thể trả lời. Họ vui lòng đút cho chúng tôi những tài liệu trực quan. Nếu bạn quên điều gì đó, anh ấy sẽ mang nó đến cho bạn để xem xét và ghi nhớ nó vào đầu bạn. Ban đầu tôi không định để lại một bài đánh giá như thế này, nhưng tôi không thể không để lại một bài đánh giá vì rõ ràng là bạn đã bỏ ra rất nhiều công sức để nâng cao chất lượng bài giảng của mình. Điều thực sự đáng sợ là vẫn chỉ mới bắt đầu khóa học nhưng bạn vẫn có thể đạt được nhiều như vậy. (Bây giờ hãy ngừng lo lắng và đi trả tiền. Không có ai sẽ không làm điều này sao?)

    • rhs199813739님의 프로필 이미지
      rhs199813739

      Đánh giá 9

      Đánh giá trung bình 5.0

      5

      8% đã tham gia

      Bài giảng front-end === Jeong-Hwan Lee

      • dev8678

        Đồng ý!!

    • bibipapa님의 프로필 이미지
      bibipapa

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Đừng vội, hãy xem bài giảng này.

      • dla14347593님의 프로필 이미지
        dla14347593

        Đánh giá 4

        Đánh giá trung bình 4.3

        5

        92% đã tham gia

        Thông thường tôi không thường xuyên để lại những nhận xét về bài giảng, nhưng tôi rất hài lòng với bài giảng này nên tôi đã bỏ nó đi. Đầu tiên tôi xem một số bài giảng Next, nhưng hầu hết chỉ dạy tôi cách sử dụng những phần khó giải thích trong bài giảng và nói “Bạn có thể sử dụng như thế này nên tôi luôn thắc mắc” Tại sao. Tôi có nên sử dụng nó không? Có gì khác biệt?” Tôi đã tra cứu tài liệu chính thức nhưng có rất nhiều phần không rõ ràng nên tôi không thể hiểu được. Tôi hiểu hầu hết bài giảng này. Trước hết, lời giải thích và tài liệu rất dễ hiểu. Sau khi giải thích lý thuyết, ông lại một lần nữa chứng minh nó bằng thực tế. Tôi nghĩ bài giảng này là một trong những bài giảng hay nhất mà tôi từng xem. Đó là một bài giảng. Bài giảng hiện tại tuy hay nhưng đó là kết quả của việc phản ánh rất nhiều trăn trở và phản hồi. Tôi nghĩ vậy. Tôi thực sự mong chờ bài giảng tiếp theo ~~ Lần sau sẽ rất tuyệt nếu tạo ra một bài giảng giống như một phiên bản thực tế của Next.

        • seungwoo님의 프로필 이미지
          seungwoo

          Đánh giá 7

          Đánh giá trung bình 5.0

          5

          74% đã tham gia

          Tôi đang để lại đánh giá vì tôi rất hài lòng với khóa học! Mặc dù tôi là một nhà phát triển front-end nhưng tôi đã bị mắc kẹt trong ngăn xếp Bộ định tuyến Trang trong một thời gian dài. Không phải là tôi chưa thử Bộ định tuyến ứng dụng, nhưng tôi vẫn tiếp tục sử dụng Bộ định tuyến trang, có lẽ vì tôi đã quen với nó... Tuy nhiên, tôi nghĩ mình sẽ bắt kịp những xu hướng mới nhất khi nghe bài giảng này nhưng chất lượng lại cao hơn tôi mong đợi rất nhiều và tôi nghĩ một trong những lý do khiến tôi tiếp tục quay lại Page Router là vì tôi không thực sự hiểu rõ. Bộ định tuyến ứng dụng. Bằng cách tham gia bài giảng này, tôi có thể hiểu cách thức hoạt động của Bộ định tuyến ứng dụng và tôi có thể tin tưởng vào Bộ định tuyến ứng dụng khi thực hiện một dự án nhỏ. Nếu có điều gì bạn muốn xem trong bài giảng tiếp theo, nếu bạn thiết lập Bộ định tuyến ứng dụng, bạn có thể sử dụng hệ thống thiết kế hoặc nhiều thư viện khác không? Có những trường hợp khó cài đặt vì cài đặt không hoạt động bình thường, vì vậy sẽ rất tuyệt nếu có phiên bản thực tế (hoặc phiên bản nâng cao) bao gồm tất cả các cài đặt này! Cảm ơn!

          999.261 ₫

          Khóa học khác của winterlood

          Hãy khám phá các khóa học khác của giảng viên!

          Khóa học tương tự

          Khám phá các khóa học khác trong cùng lĩnh vực!