강의

멘토링

로드맵

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) 388 đánh giá

4,261 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

Dịch cái này sang tiếng Việt

  • 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, 배포 등

로드맵안내_넥스트

Bạn có thể chuyển đến lộ trình bằng cách nhấp vào hình ảnh.
> Link lộ trình : https://link.onebitefe.com/r/68zgsv

시리즈 강의 링크
> 한 입 크기로 잘라먹는 리액트 :https://inf.run/v3XAj
한 입 크기로 잘라먹는 타입스크립트 : https://inf.run/FpLm4
한 입 크기로 잘라먹는 넥스트 : 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 chia nhỏ từng miếng vừa ăn | Official Trailer

Học Next.js(15+) 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 hạn chế 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ự xem qua nhanh Page Router (5 giờ) trước, sau đó tìm hiểu kỹ lưỡng về 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.

Hãy dừng việc sử dụng 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 animation 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 trực quan liên quan đến Client Router Cache

Gần nhất với tình huống thực tế 🚧
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 chính thứ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

Trung tâm của chủ đề! Chúng ta sẽ tìm hiểu về App Router. 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 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. 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 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 để 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 - tính năng giúp render ngay lập tức những phần đã sẵn sàng 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 sôi nổi khi được công bố.
Chúng ta sẽ xem xét 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 những tính năng này để triển khai chức 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à nhiều yếu tố khác.
Triển khai dự án đã được tối ưu hóa lên Vercel và tiến hành một lần nữa công việc cải thiện hiệu suất.

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 hình ảnh 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 dễ hiểu 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 mọi thứ 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.

예상 질문 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 xuyên 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 cắt nhỏ vừa một miếng

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à

31,732

Học viên

1,877

Đánh giá

1,369

Trả lời

4.9

Xếp hạng

5

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ả

388 đánh giá

5.0

388 đánh giá

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Đánh giá 14

    Đánh giá trung bình 5.0

    5

    25% đã tham gia

    Next.js lecture? Lee Jung-hwan. React.js lecture? Lee Jung-hwan. TypeScript lecture? Lee Jung-hwan. It's official. Memorize it. It'll hit your head with visual materials and dictionaries. Still not paying? It's hard to read. If there are concepts that are difficult or confusing to answer the questions below, please pay. It'll help. 1. Please explain the differences between React and Next.js from the perspective of TTV and TTI. 2. Please explain Next.js pre-rendering. 3. Please explain Next.js prefetching. 4. When does Next.js hydration occur? 5. When does Next.js data fetching occur? I didn't know anything, but now I can answer. It kindly feeds you visual materials. If you forget, it'll be brought up for review and hammered into your head. I originally didn't want to leave a review like this, but I couldn't help but leave a review because it was obvious that you were trying to improve the quality of the lectures. The really scary thing is that you can get this much from the lectures, even though it's only the beginning. (Let's stop worrying and go pay. I don't think anyone would do it, right?)

    • rhs199813739님의 프로필 이미지
      rhs199813739

      Đánh giá 9

      Đánh giá trung bình 5.0

      5

      8% đã tham gia

      Front-end lecture === Lee Jeong-hwan

      • dev8678

        I agree!!

    • bibipapa님의 프로필 이미지
      bibipapa

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Don't bother digging, just watch this lecture

      • dla14347593님의 프로필 이미지
        dla14347593

        Đánh giá 4

        Đánh giá trung bình 4.3

        5

        92% đã tham gia

        I don't usually leave course reviews...but I'm so satisfied with this lecture that I'm leaving one. First of all, I've watched several Next lectures, but most of the time, they just tell you how to use it and move on when it's hard to explain in the lectures, so I always wondered why I should use it and what's different. Even when I looked at the official documentation, there were many ambiguous parts, so there were parts that I didn't understand. But after watching this lecture, I understood most of it. First of all, the explanations and materials are easy to understand, and after explaining the theory, they showed it again through practice, so this lecture was the best lecture I've seen by Jeong-Hwan. The previous lectures were good, but I think it's the result of a lot of thought and feedback. I'm really looking forward to the next lecture~~ I think it would be good if Next produced a practical lecture.

        • seungwoo님의 프로필 이미지
          seungwoo

          Đánh giá 5

          Đánh giá trung bình 5.0

          5

          74% đã tham gia

          I am leaving a review because I was very satisfied with the lecture! I am a front-end developer, but I have been stuck on the Page Router stack for a long time. I have tried App Router, but I kept using Page Router because of my familiarity with it... But I thought I would try to follow the latest trends by taking this lecture, and the quality was much higher than I expected. One of the reasons I kept going back to Page Router was that I didn't understand App Router properly. By taking this lecture, I was able to understand how App Router works, and I gained confidence in App Router while working on a small project. If I had any wishes for the next lecture, it would be nice to have a practical (or advanced) version that includes all the settings because sometimes when you set up App Router, the design system or other libraries don't work properly, making it difficult to set up! Thank you!

          Ưu đãi có thời hạn

          29 ₫

          23%

          1.016.807 ₫

          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!