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

/

Web Development

Phát triển clone YouTube thực tế hoàn chỉnh với Next.js 15

Trong hướng dẫn 24 giờ này, bạn sẽ học cách tạo ra một bản sao YouTube của riêng mình. Chúng tôi sẽ đề cập đến các chủ đề nâng cao như Next 15 và React 19 (bao gồm tRPC), pre-fetching trong Server Components, sử dụng Suspense trong Client Components, xử lý video, các tác vụ nền, các tính năng AI, v.v.

(3.8) 12 đánh giá

567 học viên

  • codewithantonio
youtubeclone
Next.js
React
PostgreSQL
TailwindCSS
drizzle

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

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

  • Kinh nghiệm trực tiếp thiết kế và xây dựng nền tảng video như YouTube

  • Nắm vững kỹ thuật phát triển web full-stack hiện đại sử dụng Next.js 15 (App Router), TypeScript, framework full-stack mới nhất dựa trên tRPC và React 19

  • Nắm vững kỹ thuật quản lý cơ sở dữ liệu an toàn kiểu sử dụng PostgreSQL + Drizzle ORM

  • Kinh nghiệm cấu hình môi trường phía server nhanh chóng và hiệu quả sử dụng Bun runtime

  • Tìm hiểu cách xác thực người dùng và đảm bảo ổn định bằng hệ thống xác thực Clerk

  • Triển khai chức năng cấp độ dịch vụ thực chiến với chức năng tự động hóa AI và thiết kế xử lý bất đồng bộ

  • Cải thiện hiệu năng thực tế thông qua cuộn vô hạn và tối ưu luồng dữ liệu

Clone Coding , phương pháp học tốt nhất để học phát triển thực tế!

Mã hóa bản sao là cách nhanh nhất để tìm hiểu cấu trúc và luồng của một dịch vụ thực tế. Bằng cách triển khai các ứng dụng thực tế mà chúng ta hiểu rõ, thay vì các ví dụ đơn giản, chúng ta sẽ hiểu được cách các công nghệ được kết hợp và hoạt động cùng nhau.

Vì bạn sẽ trực tiếp biết được lý do tại sao mỗi chức năng lại cần thiết và nên xây dựng chúng theo thứ tự nào để đạt hiệu quả, nên bạn có thể phát triển cả ý thức thực tế và kỹ năng thiết kế cùng một lúc .

Trong khóa học này, bạn sẽ xây dựng một nền tảng video theo phong cách YouTube và xây dựng một ứng dụng đầy đủ chức năng đạt chuẩn sản xuất bằng các công nghệ web tiên tiến như Next.js 15, tRPC, Drizzle, Clerk và Bun.

Mức dịch vụ thực tế
Bạn có thể tạo một YouTube.

Xử lý video thời gian thực và tạo nội dung AI

  • 🎥 Trình phát video có thể lựa chọn chất lượng

  • 🎬 Xử lý video thời gian thực bằng Mux


  • 🖼 Tự động tạo hình thu nhỏ/tiêu đề/mô tả bằng AI

  • 📝 Tự động tạo phụ đề


Nguồn cấp dữ liệu được cá nhân hóa & Thiết kế giao diện người dùng đáp ứng

  • 🗂 Tính năng quản lý danh sách phát tùy chỉnh

  • 🔄 Cấu hình nhiều nguồn cấp nội dung

  • 🎯 Theo dõi lịch sử xem cá nhân của bạn

  • 📱 Thiết kế đáp ứng được tối ưu hóa cho mọi thiết bị

Triển khai bình luận, lượt thích và bảng thông tin

  • 💬 Hệ thống bình luận/trả lời tương tác

  • 👍 Hệ thống thích và đăng ký

  • 📊 Studio sáng tạo
    (Lượt xem, Lượt thích, Quản lý lưu lượng truy cập)

Các công nghệ chính được sử dụng trong quá trình triển khai

  • 📦 Thiết kế kết cấu theo mô-đun

  • 🗄 Tích hợp PostgreSQL dựa trên DrizzleORM

  • 🚀 Stack mới nhất dựa trên Next.js 15 & React 19

  • 🔄 API an toàn kiểu được triển khai với tRPC

  • 💅 Sử dụng TailwindCSS và ShadcnUI

Hãy tự mình kiểm tra kết quả cuối cùng nhé!

Được lựa chọn bởi hơn 380.000 người đăng ký trên toàn thế giới
Chuyên gia mã hóa bản sao, Antonio!

Bài giảng mới nhất năm 2025 được biên soạn bởi những người giỏi nhất trong lĩnh vực giáo dục mã hóa bản sao

380 nghìn người đăng ký, 14,4 triệu lượt xem! Chương trình đào tạo lập trình bản sao thực tế tốt nhất!
Hãy cùng xem bài giảng mới nhất của Antonio vào năm 2025, trong đó có chia sẻ bí quyết của ông trong việc thiết kế hơn 25 bài giảng về mã hóa bản sao.
Bạn có thể trải nghiệm một dự án thực tế từ đầu đến cuối, theo dõi toàn bộ quy trình thiết kế và triển khai chức năng.

Sự kết hợp công nghệ tương tự được các nhà phát triển sử dụng ngày nay, chẳng hạn như Next.js 15

Nó bao gồm các kết hợp đầy đủ đang phổ biến nhất trong thực tế hiện nay, bao gồm Next.js 15 (App Router), React 19 và Drizzle ORM. Chúng tôi sẽ đích thân tạo ra dịch vụ đầy đủ theo phong cách YouTube, từng cái một, từ xác thực, DB, API, xử lý hình ảnh, tự động hóa AI, nguồn cấp dữ liệu, danh sách phát, hệ thống bình luận, tìm kiếm, đăng ký và phân phối.

Thêm khả năng AI tạo sinh vào dịch vụ của bạn

Chúng tôi đang triển khai một chức năng tự động tạo hình thu nhỏ, tiêu đề và mô tả bằng AI tạo hình, giống như YouTube. Thay vì chỉ thêm các chức năng AI, chúng tôi thiết kế các quy trình công việc nền tự động xử lý sự chậm trễ và lỗi, đồng thời tạo ra một hệ thống AI hoạt động đáng tin cậy ở cấp độ dịch vụ thực tế .

Với 11 công nghệ tiên tiến
Hoàn thành một dịch vụ.

Sự kết hợp đầy đủ và thiết thực nhất

Next.js 15 + React 19 + TypeScript

Định tuyến dựa trên tệp trong Next.js 15 (App Router) và React 19 là sự kết hợp mạnh mẽ phản ánh xu hướng web mới nhất. Việc thêm TypeScript vào đây sẽ giúp giảm lỗi, bảo trì dễ dàng hơn và sẵn sàng sử dụng thực tế. Vì đây là sự kết hợp được sử dụng phổ biến nhất hiện nay nên bạn có thể học được những kiến ​​thức cơ bản cũng như khiếu thẩm mỹ thiết kế thực tế.

Giao tiếp API an toàn theo kiểu

tRPC

Một khuôn khổ dựa trên kiểu cho phép bạn tự động kết nối giao diện người dùng và giao diện quản trị mà không cần thông số kỹ thuật API.
Nó tối đa hóa sức mạnh của TypeScript và đảm bảo tính nhất quán của mã giữa phần đầu và phần cuối, giúp việc bảo trì dễ dàng hơn. Đây là công nghệ hợp thời đang được chú ý trong các dự án thực tế vì nó có thể đạt được cả tốc độ và năng suất cao.

Thiết kế nhanh như mã
Giao diện người dùng TailwindCSS + Shadcn UI

Sự kết hợp giữa Tailwind giúp bạn không phải lo lắng về CSS và Shadcn UI có các thành phần phức tạp được tối ưu hóa để triển khai giao diện người dùng chất lượng cao một cách nhanh chóng. Nó cung cấp trải nghiệm thực tế cho phép tùy chỉnh linh hoạt trong khi vẫn duy trì hướng dẫn về phong cách, vượt qua ranh giới giữa phát triển và thiết kế một cách tự nhiên.

Thiết kế DB đảm bảo cả tính an toàn và năng suất
PostgreSQL + Drizzle ORM

Tính ổn định của PostgreSQL, một cơ sở dữ liệu mã nguồn mở đã được chứng minh và năng suất của Drizzle ORM, cho phép bạn thiết kế mã dựa trên các kiểu, kết hợp để xây dựng một lớp dữ liệu an toàn và hiệu quả hơn. Bạn có thể quản lý mà không có sự mâu thuẫn giữa SQL và mã, cho phép bạn xây dựng các khả năng thiết kế cần thiết cho các dịch vụ lấy dữ liệu làm trung tâm.

Dễ dàng triển khai xác thực phức tạp
Clerk

Bạn có thể triển khai hệ thống xác thực thực tế, bao gồm đăng nhập bằng mạng xã hội, xác thực email và quản lý phiên, chỉ bằng một vài dòng mã. Vì logic xác thực phức tạp với nhiều vấn đề bảo mật có thể dễ dàng được thay thế bằng SaaS khi triển khai trực tiếp, nên nó ngày càng được sử dụng nhiều trong các dịch vụ ưu tiên phát triển MVP nhanh chóng hoặc tính ổn định.

Trải nghiệm xử lý video ở cấp độ YouTube
Mux

Đây là nền tảng truyền thông mạnh mẽ có thể tự động chuyển mã và truyền phát video đến từng thiết bị khi bạn tải chúng lên. Kinh nghiệm thiết kế và xây dựng toàn bộ quy trình xử lý video trong khi sao chép các chức năng cốt lõi cần thiết cho các dịch vụ như YouTube sẽ là lợi thế cạnh tranh mạnh mẽ khi xử lý các dịch vụ truyền thông trong lĩnh vực này.

Bạn cũng có thể gặp Bun, một chương trình đang nhận được rất nhiều sự chú ý dạo gần đây!

Bun là một môi trường chạy JavaScript đang được nhiều dự án hiện đại chú ý hiện nay do tốc độ thực thi và hiệu suất xây dựng nhanh.

Vui lòng kiểm tra trước khi tham gia lớp học! 📢

Bài giảng này cũng có sẵn trên kênh YouTube Code with Antonio ,
Trên thực tế, để hoàn thiện mã hóa bản sao, bạn chắc chắn cần tài liệu học tập có trả phí.
(bao gồm toàn bộ cơ sở mã, tệp cấu hình và các thành phần có cấu trúc)

💬 Chỉ có trong các khóa học của Inflearn!

  • Chúng tôi chia video dài 23 giờ thành một chương trình giảng dạy có hệ thống. Bạn có thể nhanh chóng tìm và học những phần mình muốn, đồng thời có thể xem lại chúng một cách thuận tiện bất cứ lúc nào.

  • Đừng lo lắng nếu bạn không giỏi tiếng Anh!

    Có lồng tiếng Hàn để bạn có thể nghe thoải mái.

  • Đừng bỏ qua những gì bạn đã học 🙂

    Thỉnh thoảng bạn có thể ôn tập theo cách thú vị với các bài kiểm tra AI!


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

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

  • Nhà phát triển muốn học hỏi các xu hướng phát triển web mới nhất và áp dụng vào dự án thực tế

  • Nhà phát triển muốn trải nghiệm thiết kế ứng dụng hiện đại dựa trên Next.js 15, React 19, tRPC

  • Lập trình viên muốn tự tay hoàn thành dự án clone YouTube

  • Lập trình viên junior muốn củng cố portfolio

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

  • Kiến thức cơ bản về JavaScript và React

Xin chào
Đây là

567

Học viên

12

Đánh giá

4

Trả lời

3.8

Xếp hạng

1

Khóa học

안녕하세요, 저는 소프트웨어 엔지니어 Antonio입니다. 7년 이상의 개발 경력을 가지고 있으며, 프로그래밍 세계에 매료되어 이 분야에서 일할 수 있다는 것을 큰 행운으로 생각합니다.

그동안 다양한 프로그래밍 언어와 기술을 다루는 경험을 통해 개발자로서 많은 성장을 이룰 수 있었습니다. 지금까지 쌓은 지식과 경험도 소중하지만, 저는 여전히 배우고 성장하는 데에 큰 열정을 가지고 있습니다.

이러한 경험과 열정을 바탕으로, 프로그래밍에 대한 애정을 나누고 함께 배우며 성장하기 위해 "Code With Antonio" 유튜브 채널과 학습 플랫폼을 운영하고 있습니다. 제가 만든 튜토리얼과 인사이트가 많은 분들께 도움이 되고, 프로그래밍 커뮤니티에 긍정적인 기여를 할 수 있기를 바랍니다.

 

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

Tất cả

40 bài giảng ∙ (23giờ 41phú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ả

12 đánh giá

3.8

12 đánh giá

  • 현성님의 프로필 이미지
    현성

    Đánh giá 5

    Đánh giá trung bình 3.6

    Đã chỉnh sửa

    3

    20% đã tham gia

    한글 설명이 부실함

    • 향로

      안녕하세요 현성님 인프랩 향로입니다. 불편을 드려 정말 죄송합니다. 혹시 한글 설명이 부족하다는 것이 어떤 것인지 말씀해주시면 개선해보겠습니다. 번역과 더빙에 대한 퀄리티 문제는 전체적으로 다시 검수를 하고 부족했던 시스템의 이슈를 개선해두어서 여러 개선사항이 적용되었습니다. 남겨주신 피드백 계속 상기하면서 더 나은 시스템을 만들기 위해 노력하겠습니다. 인프런 사용해주셔서 정말 감사드리며 더 나은 서비스로 보답하겠습니다.

  • ㄱㅇ님의 프로필 이미지
    ㄱㅇ

    Đánh giá 2

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    10% đã tham gia

    '클론코딩'이라고 하기엔 기능이 진짜 다양하고, 각 기술을 왜 쓰는지 설명도 잘 돼 있어서 설계 감각까지 잡을 수 있을 거 같아요. 유튜브 클론 코딩 중에서도 AI 활용, 여러 스택을 다양하게 활용해볼 수 있는 강의라 개인적으로는 의미가 있을 거 같습니다!

    • antonio
      Giảng viên

      정성스러운 리뷰 정말 감사합니다! 설명이 도움이 되고 의미있었다니 기쁩니다, 특히 설계 및 AI 활용에 대해요. 앞으로 다양한 스택을 탐색하실 때 이 강의가 계속 영감을 주길 바랍니다 🙏

  • 미묘한채널님의 프로필 이미지
    미묘한채널

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    강의 재밌게 듣고 있습니다~

    • antonio
      Giảng viên

      정말 감사합니다! 강의를 즐기고 계신다니 정말 기쁩니다 🙏

  • 김용민님의 프로필 이미지
    김용민

    Đánh giá 6

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    30% đã tham gia

    유튜브에서만 접했던 강의를 인프런을 통해 한국어 번역으로 들으니, 또 다른 느낌으로 훨씬 새롭게 다가왔습니다. 덕분에 이해도도 더 높아진 기분입니다! 앞으로는 Next.js 하나로 프론트와 서버를 모두 처리하는 방식뿐만 아니라, NestJS, Express, Hono 같은 서버 프레임워크와 함께 모노레포 환경을 구축하여 진행하는 강의도 제작 계획이 있으신지 궁금합니다!

    • antonio
      Giảng viên

      정성스러운 피드백 정말 감사합니다! 한국어로 번역된 강의가 이해를 심화하는 데 도움이 되었다니 정말 기쁩니다. 제안해주신 내용도 감사합니다. 모노레포 환경과 NestJS, Express, Hono 같은 프레임워크를 다루는 강의는 좋은 생각인 것 같습니다. 앞으로 콘텐츠 제작 시 꼭 염두에 두겠습니다.

  • haeyul님의 프로필 이미지
    haeyul

    Đánh giá 19

    Đánh giá trung bình 4.6

    5

    18% đã tham gia

    1.164.107 ₫

    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!