강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Học Next.js(v15) từng miếng nhỏ

Tác phẩm thứ 3 của series Một miếng! Đây là khóa học Next.js(15+) Kind và chi tiết nhất thế giới. Chúng ta sẽ tìm hiểu không chỉ App Router mà còn cả Page Router thông qua các dự án.

(5.0) 483 đánh giá

4,858 học viên

  • winterlood
이론 실습 모두
next.js13
Next.js
React
TypeScript
kakao-tech

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

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

  • Chúng ta sẽ tìm hiểu về các khái niệm mới nhất của Next.js (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.

  • Chúng ta sẽ tìm hiểu các khái niệm đa dạng như Server Components, Page Routing, Layout 설정, Data Fetching, Streaming, 배포 등

로드맵안내_넥스트

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

Link khóa học series
> React chia nhỏ dễ hiểu :https://inf.run/v3XAj
>
TypeScript chia nhỏ dễ hiểu : https://inf.run/FpLm4
>
Next.js chia nhỏ dễ hiểu : https://inf.run/v3XAj

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

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

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

Với 15 giờ nội dung từ
Page Router đến App Router

💡 Page Router là gì?

Router được sử dụng cho đến 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ì?

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

Từ phiên bản Next.js 13, App Router mới xuất hiện để bổ sung những thiếu sót 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 thứ tự nhanh chóng tìm hiểu Page Router (5 giờ) trước, sau đó tập trung nghiên cứu App Router (10 giờ). Thông qua điều này, 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.

⚠ 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
Khám phá Next.js cùng với các hoạt ảnh trực quan

Next.js có khá 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ôi thì khó có thể giải thích đầy đủ.
Vì vậy, khóa học này sẽ đi kèm với các hoạt hình trực quan như dưới đây

Tài liệu hình ảnh liên quan đến App Router Layout

Tài liệu hình ảnh liên quan đến React Server Component

Tài liệu hình ảnh liên quan đến React Server Component

Tài liệu hình ảnh liên quan đến Client Router Cache

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

Để tìm hiểu các tính năng caching 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 backend server tự phát triển.

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

Cấu trúc bài giảng

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

Trước khi bắt đầu học tập một cách nghiêm túc, chúng ta sẽ tìm hiểu xem 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 Next.js.

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

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

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

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

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

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

Tâm điểm của sự chú ý! Chúng ta sẽ tìm hiểu về App Router. Chúng ta sẽ khám phá App Router là gì, có những khác biệt kỹ thuật nào và cùng 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. Tìm nạp dữ liệu

Chúng ta sẽ tìm hiểu về việc fetch dữ liệu sử dụng Server Components.
Đồng thời cũng sẽ 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. Thu thậ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 Router Cache, hai loại 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 Options - tùy chọn để 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

Chúng ta sẽ tìm hiểu về streaming giúp render ngay lập tức những phần được chuẩn bị nhanh chóng trên trang.
Chúng ta sẽ xem xét cả hai cách: sử dụng file Loading và sử dụng Suspense.

Ngoài ra, chúng ta cũng sẽ tìm hiểu về phương pháp xử lý lỗi và khôi phục trang bằng cách sử dụng tệp Error.

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

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

Phần 7. Server Actions

Chúng ta sẽ tìm hiểu về Server Actions - tính năng đã gây ra phản ứng nóng bỏng khi được công bố.
Chúng ta sẽ khám phá cách sử dụng Server Actions để thêm hoặc xóa dữ liệu, cũng như cách xử lý trạng thái loading và trạng thái lỗi.

Phần 7. Server Action

Phần 7. Server Action

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

Chúng ta sẽ 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ị các trang cụ thể dưới dạng modal mà không làm gián đoạn việc đ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

Chúng ta sẽ tìm hiểu các phương pháp tối ưu hóa hình ảnh, metadata, trang, region, 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 Một miếng

⚖ Nguyên tắc 1. Tài liệu hình ảnh trực quan và phong phú

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 giải thích nhưng có tài liệu trực quan trực quan và hấp dẫn hơn sẽ dễ hiểu hơn.

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

⚖ Nguyên tắc 2. Sự tử tế

Khi xuất hiện các 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. 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 khi nghe bài giảng.

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

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

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

Vì các bạn phải nghe giọng nói của tôi trong thời gian dài, 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 các bạn có thể hiểu được tất cả ngay cả khi phát ở tốc độ 2x.

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

⚖ 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 và tin tức với nhau, cùng nhau phát triển.

Câu hỏi thường gặp Q&A 💬

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

Khóa học này đượ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 các 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, có nhất thiết phải nghe 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à học trực tiếp từ phần 3.
Tuy nhiên, bạn cần có sự tự nhận thức chính xác về việc mình có hiểu rõ các hạn chế và đặc điểm của Page Router hay không.

Portfolio và video cá nhân

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

(Sách) Video giới thiệu React chia nhỏ dễ hiểu

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 Một Miếng

  • Những người mới bắt đầu lần đầu với Next.js

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

  • Những bạn đang tìm kiếm các khóa học Kind 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à

35,794

Học viên

2,381

Đánh giá

1,536

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ả

483 đánh giá

5.0

483 đánh giá

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Đánh giá 14

    Đá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!

          1.014.477 ₫

          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!