Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Học mã hóa bản sao YTMusic Next từ những điều cơ bản (với next.js 14, UI Master)

Sao chép trang web YoutubeMusic với React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand. Bạn có thể nắm vững kiến ​​thức cơ bản về mặt tiền web, bắt đầu với kiến ​​thức cơ bản về NextJS và tập trung vào giao diện người dùng.!

(4.4) 36 đánh giá

445 học viên

  • dodocoding
실습 중심
클론코딩
Next.js
React
TailwindCSS
zustand
Clone Coding

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

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

  • Bộ định tuyến ứng dụng Next.js

  • (Lý thuyết) Phản ứng hồi hộp (Truyền phát, Hydrat hóa dần dần)

  • (Lý thuyết) Phương thức kết xuất Next.js và CSR, SSR, Hydration

  • Next.js RSC, RCC, sử dụng ứng dụng khách

  • TailwindCSS, RadixUI, Shadcn

  • Mã hóa trình phát nhạc YT

  • Quản lý trạng thái Zustand

  • Khái niệm cơ bản về gõ Typescript

  • Cách phát triển giao diện người dùng đáp ứng

Công nghệ NextJS đang được các nhà phát triển FE săn đón hiện nay!
Chúng tôi chỉ bao gồm những phần bạn cần để thực hành NextJS 🍭

Sau khi học React, sẽ rất khó để tiếp tục một dự án sử dụng NextJS nếu chỉ xem tài liệu chính thức.
Vì vậy, thông qua mã hóa YoutubeMusic Clone, nó nhanh chóng và dễ dàng,
Chỉ trong một ngày! Chúng tôi đã tạo ra một khóa học giúp bạn thành thạo NextJS.
Khóa học này có thể đóng vai trò là nền tảng cho dự án NextJS của riêng bạn.

Các tính năng của khóa học này

📌 Hướng dẫn ghi chú bài giảng : Mục tiêu từng chương, điểm ôn tập và nhiều thông tin khác (tài liệu chính thức, khái niệm, v.v.)

📌 Cung cấp các điểm kiểm tra bài giảng : Đừng lo lắng nếu bạn không tuân thủ quy tắc! Có các nhánh cụ thể theo từng chương.

📌 10% lý thuyết, 90% thực hành : Chúng tôi giải thích những khái niệm khó nhất về kết xuất, thành phần máy chủ và hydrat hóa.

📌 Danh mục đầu tư : Bạn có thể nhận được kết quả thông qua mã hóa bản sao.

Tôi giới thiệu điều này cho những người này

Từ React đến Next
Tôi muốn mở rộng!

Tôi biết cách sử dụng React, nhưng
Nếu bạn bị kẹt ở Next,
Khóa học này thật hoàn hảo!

Dự án Next.js
Tôi muốn làm điều đó!

Dựa trên Next.js
Nếu bạn cần thực hiện một dự án ngay lập tức,
Đây sẽ là một hướng dẫn hữu ích.

Dễ dàng với mã hóa bản sao
Chúc bạn học vui vẻ!

Dựa trên cơ sở mã phù hợp
Mở rộng dự án của bạn theo cách của riêng bạn!

Sau giờ học

  • Bạn có thể sao chép bất kỳ trang web nào bạn thấy bằng Next.js. 😲

  • Bạn có thể tiếp tục dự án của mình thông qua Next.js AppRouter.

  • Bạn có thể quản lý trạng thái toàn cầu bằng Zustand.

  • Bạn sẽ tìm hiểu về nhiều phương pháp kết xuất khác nhau, bao gồm PageRouter, React CSR, SSR và Hydration.

  • Vercel cho phép tôi giới thiệu các dự án tôi đã tạo ra với người khác.

  • Sự kết hợp TailwindCSS + Radix UI + Shadcn cho phép bạn phát triển UI nhanh hơn bất kỳ ai khác.


Học những điều này 🏄🏾‍♀️

Next.js 14 AppRouter & ServerComponent

Bạn sẽ học cách cấu trúc toàn bộ dự án của mình với AppRoute. Bạn cũng sẽ tìm hiểu lý thuyết về thời điểm và lý do nên sử dụng các thành phần máy chủ. Thông qua sự phát triển của FE rendering, bạn sẽ tìm hiểu về lịch sử của Vanilla JS > React > NextJS PageRouter > AppRoute.

Thiết kế đáp ứng + Web tương tác

Chúng tôi đang giới thiệu một chiến lược hỗ trợ màn hình di động và máy tính bảng. Chúng tôi đã tinh chỉnh giao diện người dùng với kiểu dáng và chi tiết, bao gồm các ngăn kéo chỉ hiển thị trên màn hình di động. Có lẽ bạn có thể gói nó trong một webview và xây dựng một ứng dụng từ đầu?

Trình phát nhạc với Zustand

Tìm hiểu Player bằng công cụ quản lý trạng thái toàn cục Zustand. Công cụ này bao gồm các kỹ năng UI chi tiết để nâng cao trải nghiệm người dùng. Bạn sẽ tích hợp các sự kiện với Zustand để phát nhạc trên bất kỳ trang nào.

Thành phần UI & Typescript

Sắp xếp các giao diện người dùng khác nhau thành các thành phần. Và, nếu cần, hãy học cách áp dụng TypeScript để ngăn ngừa lỗi trong dự án của bạn.

Những điều cần lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Tôi sử dụng Node.js, VS Code và Github.


Tài liệu học tập

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

  • Kiến thức cơ bản về HTML, CSS và React

  • Tạo kiểu với TailwindCSS (+ hướng dẫn tóm tắt 😀 )

  • (*Lúc đầu, tôi ghét TailwindCSS. Nhưng sau quá trình học ban đầu (khoảng một giờ), nó đã cải thiện đáng kể trải nghiệm phát triển của tôi và đẩy nhanh thời gian phát triển! Bạn sẽ không hối hận đâu.)

Người chia sẻ kiến thức
Bạn có quan tâm đến các bài giảng khác không?

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

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

  • Bất cứ ai muốn bắt đầu một dự án với Next.js

  • Bất kỳ ai muốn thành thạo việc xuất bản dựa trên Next.js

  • Những người muốn phát triển nhanh chóng thông qua các thư viện thành phần

  • Nhà phát triển FE đang tìm cách tăng cường công nghệ Next.js

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

  • HTML, CSS, React cấp độ cơ bản

Xin chào
Đây là

3,665

Học viên

145

Đánh giá

85

Trả lời

4.8

Xếp hạng

5

Các khóa học

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

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

Tất cả

80 bài giảng ∙ (7giờ 6phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

36 đánh giá

4.4

36 đánh giá

  • kotlinjava님의 프로필 이미지
    kotlinjava

    Đánh giá 20

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    There's a lot of content about caching and performance optimization in Next.js, so I personally felt the need to study UI, but I wasn't drawn to HTML and CSS lectures. I happened to find this lecture and took it, and the instructor's skills are just on another level...lol. But surprisingly, as I followed along and typed, I felt like I was improving, maybe because it was becoming ingrained in my muscle memory. It was great for learning Shadcn and Tailwind. I'm looking forward to Part 2 coming out soon.

    • zmlee128891님의 프로필 이미지
      zmlee128891

      Đánh giá 2

      Đánh giá trung bình 4.0

      3

      100% đã tham gia

      It was so good, but the ending was a bit abrupt, so it was a little disappointing.

      • dodocoding
        Giảng viên

        Thank you for taking the class. ~ I should have delivered it in a more systematic way, but I will see you again with a better class.

    • smc91191589님의 프로필 이미지
      smc91191589

      Đánh giá 13

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      I think this is the best of the nextjs lectures~ I listened to the good lectures~

      • dodocoding
        Giảng viên

        Thank you 100% for taking the class! I will come back with a more upgraded lecture later. ~~

    • ghee3218844님의 프로필 이미지
      ghee3218844

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      11% đã tham gia

      • sthwin님의 프로필 이미지
        sthwin

        Đánh giá 11

        Đánh giá trung bình 4.4

        3

        100% đã tham gia

        I took the lecture to review React and Tailwind CSS. There were some parts where I felt like the explanation was a bit lacking, but I can't really say anything. There were also parts where I thought it would be better to just unify it with TypeScript. Still, it was very helpful while cloning.

        • dodocoding
          Giảng viên

          Thank you for your review! I will come back with a better lecture next time. Thank you for listening to the lecture, which was lacking. If you have any questions in the future, I will answer them to the end.

      985.013 ₫

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

      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!