강의

멘토링

커뮤니티

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

452 học viên

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

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

  • 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,978

Học viên

166

Đánh giá

94

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ả

38 đánh giá

4.4

38 đánh giá

  • Hyungjin님의 프로필 이미지
    Hyungjin

    Đánh giá 21

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Next.js와 TailwindCSS, Shadcn을 활용해 반응형 컴포넌트 구현을 실습할 수 있어서 많은 도움이 되었습니다.

    • 도도(코딩루팡)
      Giảng viên

      수강 감사합니다. 더 나은 강의로 찾아뵙겠습니다. !!

  • 주민규님의 프로필 이미지
    주민규

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • 코틀린자바님의 프로필 이미지
      코틀린자바

      Đánh giá 21

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      next js 에서 캐싱처리나 음.. 최적화 같은 성능 관련 내용은 많아서 개인적으로 ui 공부가 필요했는데 html css 강의를 듣자니 끌리지 않고 그랬는데 마침 이 강의가 있어서 수강했는데 실력이 넘사네요..ㄷㄷ 근데 생각보다 따라치다보니 몸에 익어서 그런가 실력이 늘었다고 느껴졌습니다 shadcn 테일윈드 배우기 좋았습니다 파트2 도 곧 나오길 기다릴게요

      • zmlee12님의 프로필 이미지
        zmlee12

        Đánh giá 2

        Đánh giá trung bình 4.0

        3

        100% đã tham gia

        너무 좋았어요 다만.. 마지막부분이 너무 급하게 끝난거 같아서 좀 아쉽네요

        • 수강해주셔서 감사합니다.~ 좀 더 체계적으로 전달드려야 했는데 더 나은 강의로 뵙도록 하겠습니다.

      • Moon님의 프로필 이미지
        Moon

        Đánh giá 13

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        nextjs 강의중 최고인거 같아요~ 좋은 강의 잘들었습니다~

        • 100% 수강 감사합니다.! 더 업그레이드 된 강의로 추후 찾아 뵙겠습니다. ~~

      985.574 ₫

      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!