강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Tiếp theo + Tạo dịch vụ SNS bằng React Query

Chúng ta sẽ tạo ra một dịch vụ mạng xã hội tương tự như Twitter (X.com) bằng cách sử dụng React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand stack. Cuối cùng là SSR để tối ưu hóa công cụ tìm kiếm!

(4.5) 126 đánh giá

3,375 học viên

Độ khó Trung cấp trở lên

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

  • zerocho
Next.js
Next.js
React
React
react-query
react-query
next-auth
next-auth
msw
msw
Next.js
Next.js
React
React
react-query
react-query
next-auth
next-auth
msw
msw

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

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

4.5

5.0

부끄

60% đã tham gia

const nói = Tôi sẽ không gặp phải lỗi mà tôi đã từng gặp phải.

5.0

Grit Grit

68% đã tham gia

Đây là bài giảng của Zerocho mà tôi tin tưởng và theo dõi! Mình cũng đã báo cáo về tài liệu chính thức để học Next nhưng mình đọc không kỹ nên mình nghĩ sẽ dễ hiểu hơn nếu xem hết bài giảng rồi đọc tài liệu chính thức. Thông thường, sau khi xem toàn bộ bài giảng và nghiên cứu các chức năng cốt lõi, tôi chỉ nhớ từ khóa của một số chức năng nhất định trong tài liệu chính thức. Nếu tôi cần một chức năng nào đó trong khi làm việc, tôi có xu hướng tìm nó trong tài liệu chính thức và áp dụng nó. Thời lượng bài giảng mỗi tập không quá dài và được phân chia hợp lý nên rất dễ xem khi đi tàu điện ngầm hoặc khi rảnh rỗi, đồng thời cũng rất thuận tiện để xem lại những phần chưa hiểu. Tôi chỉ sử dụng các hàm truy vấn React như một ý tưởng, nhưng tôi nghĩ tôi đã sử dụng chúng tốt hơn sau khi nghe lời giải thích!! Tôi cũng đã sử dụng Zustand lần đầu tiên và tìm hiểu về msw cũng như các thư viện khác nhau như một phần thưởng. Cảm ơn bạn rất nhiều vì đã liên tục tải lên những thông tin bổ sung chất lượng cao như bản phân phối và ổ cắm web hữu ích cần biết trong lĩnh vực này. Hãy tiếp tục làm việc chăm chỉ! cười

5.0

미니버드

53% đã tham gia

Nhờ khóa học này, Next.js đã trở thành công nghệ yêu thích của tôi!!! Cho đến nay, tôi đã nghe các bài giảng trên nhiều nền tảng khác nhau và đây là lần đầu tiên tôi nghe bài giảng của Infrun. Sau khi tham gia bài giảng Tiếp theo này, tôi rất hài lòng nên cuối cùng tôi đã tham gia các bài giảng khác của Infrun! Khóa học này không chỉ về mã hóa sao chép mà còn dạy bạn một cách tử tế, vì vậy tôi nghĩ kỹ năng của mình đang được cải thiện rất nhiều! Cảm ơn bạn đã dạy cho tôi công nghệ Next tốt nhất và tôi hy vọng sẽ nhận được nhiều sự giúp đỡ trong việc phát triển web trong tương lai!

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

  • Phát triển React

  • React + TypeScript

  • React Query

  • Next.js App Router

  • SSR & SEO

  • MSW

  • Next Auth

  • trực tiếp web socket chat

  • tình trạng

  • Phát hành AWS

Không phải x.com của Elon Musk
Hãy tạo z.com trong 0 giây !

Phiên bản mới nhất của khóa học Tiếp theo , đã được tổng cộng 4.400 người tham gia!

Khóa học thứ 14 tiếp theo đã được cập nhật thành khóa học thứ 15 tiếp theo!

  • Twitter đổi tên thành X.com nên tôi cũng đổi từ Nordbird thành Jet.com.

  • Bạn không cần phải biết Tiếp theo. Tôi sẽ kể cho bạn mọi thứ trong bài giảng này. Bạn phải biết React.

  • Bộ định tuyến ứng dụng Next.js được sử dụng theo mặc định. ( Khóa học Nordbird trước đây là Next Page Router)

  • Vì chúng tôi đã tải lên phiên bản này nên chúng tôi cũng đã cập nhật tất cả các phiên bản thư viện lên React Query 5, Next Auth 5 và MSW 2.

  • 14 tính năng tiếp theo như Server Action được đưa vào một cách tự nhiên.

  • Triển khai tính năng cuộn vô hạn, bộ nhớ đệm dữ liệu, cập nhật tối ưu, khôi phục, v.v. với React Query.

  • Trò chuyện trong thời gian thực được triển khai bằng cách sử dụng websockets + truy vấn phản ứng.

  • Hãy thay thế API bối cảnh bằng Zustand.

  • Bài giảng thực hiện theo quy trình tương tự như thực tế (khi người lập kế hoạch lập kế hoạch xong -> khi back-end dev chưa tạo API -> khi back-end dev đã hoàn thiện API)

Bạn có thể tạo ra kết quả như thế này 🙋‍♀

Làm cách nào để thay đổi địa chỉ trong khi bật lên phương thức??

Hãy sử dụng các tính năng mới nhất của bộ định tuyến như các tuyến song song và các tuyến chặn.

Hãy thử nó với chất lượng cao!

Các chức năng và tuyến đường chính của x.com gần như giống hệt nhau!

Hãy chú ý đến chiều cao cuộn!!

Tìm hiểu cách thực hiện cuộn vô hạn để truy xuất dữ liệu vô hạn.

Hãy nhìn tốc độ phản ứng của trái tim!!!

Cập nhật lạc quan cho phép phản hồi ngay lập tức trong khi truyền dữ liệu đến máy chủ!

  • Bạn sẽ có thể xem xét kế hoạch và xác định cấu trúc thư mục.

  • Việc phát triển API có thể được thực hiện mà không cần nhà phát triển phụ trợ.

  • Dữ liệu có thể được quản lý hiệu quả dựa trên API.

  • Bạn có thể chuẩn bị tự mình triển khai một máy chủ phía trước.

  • Trò chuyện thời gian thực có thể được thực hiện.

Bạn học được gì 📚

Bạn có tò mò về vai trò của những thư mục đó không?

Tận dụng tối đa lợi thế của Bộ định tuyến ứng dụng tiếp theo

Rất nhiều thư mục khác nhau và thú vị đã được thêm vào thư mục Next App Router() @folder, thư mục (..), thư mục (..), thư mục (...), thư mục [], _folder...

Việc định tuyến có thể được thực hiện dễ dàng nếu bạn có cấu trúc thư mục tốt. Chúng ta hãy cùng nhau học hỏi.

Tạo máy chủ API giả bằng MSW

Nhà phát triển phụ trợ của bạn chưa tạo API? Thế là lịch trình cứ bị lùi lại à? Tuy nhiên, bạn không nên chỉ mút ngón tay! Trước tiên hãy phát triển giao diện người dùng bằng cách tạo máy chủ API giả bằng MSW. Với những chú mèo dễ thương!

Chú mèo dễ thương 😺 Đang phát triển với dữ liệu giả!

Chúng tôi đã chuẩn bị không chỉ API mà còn cả tài liệu!

Triển khai một dịch vụ với phần phụ trợ đã được chuẩn bị sẵn

Sau khi làm việc chăm chỉ trên MSW, tôi nghe nói rằng nhà phát triển phụ trợ đã hoàn thành API! Bây giờ hãy phát triển giao diện người dùng bằng API thực tế.

Tôi đã chuẩn bị mọi thứ cho phần phụ trợ. Chỉ cần gọi tại quầy lễ tân và sử dụng nó! Hãy nhập dữ liệu từ phần phụ trợ vào React Query và thực hiện lưu vào bộ đệm, cũng như cuộn vô hạn và cập nhật tối ưu.

Chuẩn bị triển khai thông qua SSR

Tôi đã phân phối trước trên z.nodebird.com . Hãy quan tâm đến SEO của bạn thông qua SSR và đảm bảo trang chủ của bạn hiển thị tốt khi được chia sẻ trên mạng xã hội.

Nó cũng được chia sẻ rất tốt trên KakaoTalk.

Trò chuyện trực tiếp với Elon Musk!!

Phần thưởng: Kể cả trò chuyện trực tiếp

Tìm hiểu các ổ cắm web và đảo ngược thao tác cuộn vô hạn trong khi triển khai trò chuyện theo thời gian thực.

Sau khi tìm hiểu công nghệ WebSocket, bạn có thể sử dụng nó không chỉ trong trò chuyện mà còn ở nhiều nơi khác (chẳng hạn như làm mới theo thời gian thực...thông báo...).

Những lưu ý trước khi tham gia khóa học 📢

Môi trường phòng thí nghiệm

  • Hệ điều hành và phiên bản (OS): Windows 11

  • Công cụ được sử dụng: Node.js 22, Next 15


Kiến thức và biện pháp phòng ngừa của người chơi

  • Cần có kiến ​​thức cơ bản về HTML/CSS/JS/React.

  • TypeScript cần thiết cho bài giảng sẽ được cung cấp trong bài giảng.


  • Câu hỏi sẽ được trả lời trong vòng 24 giờ .

  • Bạn có thể sắp xếp nội dung bài giảng trên blog của mình nhưng phải ghi nguồn.

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

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

  • 웹 서비스를 완성하기 위해 React Framework sử dụng

  • Các nhà phát triển && người mong muốn trở thành nhà phát triển && người đang tìm việc làm trong lĩnh vực Front-end

  • Next App Router là ứng dụng mà bạn muốn sử dụng tích cực

  • React Query để quản lý dữ liệu máy chủ

  • SSR, SEO đều muốn chăm sóc

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

  • Kiến thức về HTML, CSS

  • JavaScript kiến thức cho đến ES2022

  • Kiến thức cơ bản về React (Xem khóa học React miễn phí của Zerocho)

  • TypeScript (sẽ được giới thiệu trong bài giảng)

Xin chào
Đây là

67,189

Học viên

1,713

Đánh giá

9,759

Trả lời

4.8

Xếp hạng

23

Các khóa học

Ưu điểm trong các bài giảng của tôi là phần Q&A (Từng 2 lần giành giải Chiến thần giải đáp của Inflearn). Tôi sẽ cố gắng phản hồi trong vòng 24 giờ! Tôi sẽ trả lời với tinh thần như đang cùng bạn giải quyết vấn đề!

Một trong những điểm mạnh chính trong các khóa học của tôi là hỗ trợ Giải đáp thắc mắc (Q&A). (Từng hai lần giành giải thưởng "Vua giải đáp" của Inflearn) Tôi sẽ phản hồi các câu hỏi của bạn trong vòng 24 giờ và cố gắng hết sức để giúp đỡ bạn! Bạn sẽ cảm thấy như chúng ta đang cùng nhau giải quyết các vấn đề.

👉Bài giảng của ZeroCho
Lộ trình đầy đủ cho tất cả các bài giảng của ZeroCho. Lộ trình hoàn chỉnh cho tất cả các khóa học của tôi có sẵn tại đây.

– Tác giả của Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript và TypeScript Textbook 
– Người điều hành ZeroCho.com
– Hiện tại) Đang phát sóng về phát triển phần mềm trên YouTube tại ZeroCho TV 
– Cựu) CTO tại Smoretalk 
– Cựu) CTO của Today's Pickup (Sau khi thương vụ exit với Kakao Mobility, trở thành Trưởng bộ phận phát triển trẻ tuổi nhất tại Kakao Mobility)

  • Tác giả của Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScriptTypeScript Textbook

  • Người điều hành ZeroCho.com

  • Hiện đang vận hành kênh YouTube ZeroCho TV, chuyên về các chủ đề phát triển phần mềm

  • Cựu CTO tại SmoreTalk

  • Cựu CTO tại Today Pickup (được Kakao Mobility mua lại, nơi tôi trở thành trưởng nhóm phát triển trẻ tuổi nhất)

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

Tất cả

81 bài giảng ∙ (14giờ 28phú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ả

126 đánh giá

4.5

126 đánh giá

  • dongry님의 프로필 이미지
    dongry

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    60% đã tham gia

    const nói = Tôi sẽ không gặp phải lỗi mà tôi đã từng gặp phải.

    • minsukweb0331님의 프로필 이미지
      minsukweb0331

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      68% đã tham gia

      Đây là bài giảng của Zerocho mà tôi tin tưởng và theo dõi! Mình cũng đã báo cáo về tài liệu chính thức để học Next nhưng mình đọc không kỹ nên mình nghĩ sẽ dễ hiểu hơn nếu xem hết bài giảng rồi đọc tài liệu chính thức. Thông thường, sau khi xem toàn bộ bài giảng và nghiên cứu các chức năng cốt lõi, tôi chỉ nhớ từ khóa của một số chức năng nhất định trong tài liệu chính thức. Nếu tôi cần một chức năng nào đó trong khi làm việc, tôi có xu hướng tìm nó trong tài liệu chính thức và áp dụng nó. Thời lượng bài giảng mỗi tập không quá dài và được phân chia hợp lý nên rất dễ xem khi đi tàu điện ngầm hoặc khi rảnh rỗi, đồng thời cũng rất thuận tiện để xem lại những phần chưa hiểu. Tôi chỉ sử dụng các hàm truy vấn React như một ý tưởng, nhưng tôi nghĩ tôi đã sử dụng chúng tốt hơn sau khi nghe lời giải thích!! Tôi cũng đã sử dụng Zustand lần đầu tiên và tìm hiểu về msw cũng như các thư viện khác nhau như một phần thưởng. Cảm ơn bạn rất nhiều vì đã liên tục tải lên những thông tin bổ sung chất lượng cao như bản phân phối và ổ cắm web hữu ích cần biết trong lĩnh vực này. Hãy tiếp tục làm việc chăm chỉ! cười

      • ehdgus37262456님의 프로필 이미지
        ehdgus37262456

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        53% đã tham gia

        Nhờ khóa học này, Next.js đã trở thành công nghệ yêu thích của tôi!!! Cho đến nay, tôi đã nghe các bài giảng trên nhiều nền tảng khác nhau và đây là lần đầu tiên tôi nghe bài giảng của Infrun. Sau khi tham gia bài giảng Tiếp theo này, tôi rất hài lòng nên cuối cùng tôi đã tham gia các bài giảng khác của Infrun! Khóa học này không chỉ về mã hóa sao chép mà còn dạy bạn một cách tử tế, vì vậy tôi nghĩ kỹ năng của mình đang được cải thiện rất nhiều! Cảm ơn bạn đã dạy cho tôi công nghệ Next tốt nhất và tôi hy vọng sẽ nhận được nhiều sự giúp đỡ trong việc phát triển web trong tương lai!

        • nack1400님의 프로필 이미지
          nack1400

          Đánh giá 10

          Đánh giá trung bình 5.0

          5

          31% đã tham gia

          Là nhà phát triển năm thứ nhất, tôi muốn nghiên cứu nextjs theo xu hướng. Tuy nhiên, sau khi phiên bản 13 ra mắt, bài giảng phiên bản 12 hiện có không đủ nên tôi phải tự học qua các tài liệu chính thống nhưng gặp khó khăn trong việc học do thiếu kinh nghiệm và kỹ năng. Tôi muốn sử dụng các thư viện phù hợp với xu hướng nên đã áp dụng nhiều thứ khác nhau, nhưng tôi cũng nghi ngờ liệu mình có sử dụng đúng điểm mạnh của thư viện hay không vì tôi không biết nhiều về chúng. Vào lúc này, tôi đang háo hức chờ đợi bài giảng phiên bản nextjs 14 của Zerocho và một bài giảng sử dụng hầu hết các thư viện mà tôi hằng mong muốn sử dụng hợp lý sắp ra mắt. Bây giờ tôi đã đi được nửa chặng đường và hầu hết các câu hỏi của tôi về từng phần đều đã được giải đáp. Cảm ơn bạn rất nhiều haha

          • zerocho
            Giảng viên

            Cảm ơn Nếu bạn có bất kỳ câu hỏi nào, vui lòng hỏi bất cứ lúc nào ~

        • roider23164240님의 프로필 이미지
          roider23164240

          Đánh giá 8

          Đánh giá trung bình 5.0

          5

          100% đã tham gia

          Cảm ơn bạn ~!

          1.440.111 ₫

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

          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!