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

/

Web Development

Next.js 15で完成する実戦YouTube クローン開発

この24時間のチュートリアルでは、自分だけのYouTubeクローンを作る方法を学びます。Next 15とReact 19(tRPCを含む)、サーバーコンポーネントでのプリフェッチ、クライアントコンポーネントでのサスペンス活用、ビデオ処理、バックグラウンドジョブ、AI機能など、高度なトピックを扱います。

  • codewithantonio
youtubeclone
Next.js
React
PostgreSQL
TailwindCSS
drizzle

学習した受講者のレビュー

こんなことが学べます

  • YouTubeのような動画プラットフォームを自分で設計・構築する経験

  • Next.js 15 (App Router) と TypeScript、tRPC を基盤とした最新のフルスタックフレームワークや React 19 を活用した現代的なフルスタックWeb開発技術の習得

  • PostgreSQL + Drizzle ORM を活用した型安全なデータベース管理技術習得

  • Bunランタイムを活用した、高速で効率的なサーバーサイド環境構築経験

  • Clerk認証システムに基づいたユーザー認証および安定性確保方法の学習

  • AI自動化機能と非同期処理設計により、実践レベルのサービス機能を実現

  • 無限スクロールとデータフロー最適化による実践パフォーマンス改善

クローンコーディング、実戦開発を身につける最適な学習法!

クローンコーディングは、実際のサービスの構造と流れを身につける最速の方法です。単なる例ではなく、私たちが知っている実際のアプリを実装すると、技術がどのように組み合わせられ、どのように動作するかが自然に理解されます。

機能一つ一つがなぜ必要なのか、どのような順序で作らなければ効率的なのか直接ぶつかりながら学ぶので、実戦感覚と設計力まで同時に育てることができます。

今回のレッスンでは、YouTubeスタイルのビデオプラットフォームを作成し、Next.js 15、tRPC、Drizzle、Clerk、Bunなど、最新のWebテクノロジで構成された、ビジネスレベルのフルスタックアプリケーションを直接構築します。

実際のサービスレベル
YouTubeを作成できます。

リアルタイム映像処理&AIコンテンツ生成

  • 🎥画質選択が可能なビデオプレーヤー

  • 🎬Muxを活用したリアルタイム映像処理


  • 🖼AIでサムネイル/タイトル/説明を自動生成

  • 📝字幕の自​​動生成


パーソナライズされたフィード&レスポンシブUIデザイン

  • 🗂ユーザーカスタムプレイリスト管理機能

  • 🔄複数のコンテンツフィードの設定

  • 🎯個人別視聴履歴追跡

  • 📱すべてのデバイスに最適化されたレスポンシブデザイン

コメント・いいね・ダッシュボード実装

  • 💬インタラクティブなコメント/返信システム

  • 👍 いいね、購読システム

  • 📊クリエイタースタジオ
    (照会数、いいね、トラフィック管理)

実装に使用したコア技術

  • 📦モジュールベースの構造設計

  • 🗄DrizzleORMベースのPostgreSQL連携

  • 🚀Next.js 15&React 19ベースの最新スタック

  • 🔄tRPCで実装する型安定API

  • 💅 TailwindCSSとShadcnUIを活用

最終結果を直接確認してください!

世界38万人以上の加入者が選んだ
クローンコーディングの専門家、アントニオ!

クローンコーディング教育の最強者が作った2025年最新講義

38万購読者、1,440万視聴数!実務型クローンコーディング教育最強者!
25以上のクローンコーディング講義を設計したアントニオのノウハウを盛り込んだ2025年の最新講義に会いましょう。
完成度の高い機能設計と実装プロセスに従い、実戦プロジェクトを最初から最後まで経験することができます。

Next.js 15など、最近開発者が書く技術の組み合わせそのまま

Next.js 15(App Router)、React 19、Drizzle ORMなど、最近の実務で最も注目されているフルスタックの組み合わせが含まれています。認証、DB、API、ビデオ処理、AIオートメーション、フィード、プレイリスト、コメントシステム、検索、購読、配信まで、YouTubeスタイルのフルスタックサービスを1つ1つ直接作成します。

サービスに生成型AI機能を加える

YouTubeのように生成型AIを活用してサムネイルとタイトル・説明(description)を自動生成する機能を実装します。単にAI機能をのせるレベルではなく、遅延やエラーを自動的に処理するバックグラウンドワークフローまで設計し、実際のサービスレベルで安定して動作するAIシステムを作成します。

11の最新技術
一つのサービスを完成させます。

最も実践的な最新のフルスタックの組み合わせ

Next.js 15 + React 19 + TypeScript

Next.js 15(App Router)のファイルベースのルーティングとReact 19は、最新のWebトレンドを反映した強力な組み合わせです。ここにTypeScriptまで加えると、エラーを減らしてメンテナンスが容易になり、実務投入にもすぐに活用できます。最近最も使われる組み合わせなので、基本機と一緒に実戦設計感覚まで一緒に身につけることができます。

タイプセーフAPI通信

tRPC

APIの指定がなくてもフロントとバックエンドを自動的に接続できるタイプベースのフレームワークです。
タイプスクリプトの強みを最大化し、フロントとバックエンド間のコードの一貫性を確保してメンテナンスが容易になります。速いスピードと生産性を同時に手に入れることができ、最近実務プロジェクトで脚光を浴びているトレンディな技術です。

デザインまでコードのようにすばやく
TailwindCSS + Shadcn UI

CSSを心配する必要がないようにするTailwindと、スタイリッシュなコンポーネントを備えたShadcn UIの組み合わせは、高速なクオリティのUIを実装するために最適化されています。スタイルガイドを守りながらも柔軟なカスタマイジングが可能で、開発とデザインの境界を自然に行き来できる実戦経験を提供します。

安全性と生産性の両方を備えたDB設計
PostgreSQL + Drizzle ORM

検証済みのオープンソースDBであるPostgreSQLの信頼性と、タイプベースでコードを設計できるDrizzle ORMの生産性が出会い、データ層をより安全かつ効率的に構成できます。 SQLとコード間の矛盾なく管理でき、データ中心のサービスに必要な設計能力を積み重ねることができます。

複雑な認証を簡単に実装
Clerk

ソーシャルログイン、電子メール認証、セッション管理など、実際のサービス用の認証システムをわずか数行のコードで実装できます。直接実装すると、複雑でセキュリティの問題も多くの認証ロジックをSaaSに簡単に置き換えることができ、迅速なMVP開発や安定性を重視するサービスでますます広く使われています。

Youtube級映像処理経験
Mux

映像をアップロードすると自動的にトランスコードされ、各デバイスに合わせてストリーミングまで処理される強力なメディアプラットフォームです。 YouTubeのようなサービスで必要なコア機能をクローンしながら映像処理全般を直接設計・構築してみる経験は、実務でメディアサービスを扱う際に強力な競争力になります。

最近注目されるランタイム、Bunも出会えますよ!

Bunは速い実行速度とビルド性能で、最近のプロジェクトで注目されているJavaScriptランタイムです。

受講前にご確認ください! 📢

この講義は、Code with Antonio YouTubeチャンネルにも公開されていますが、
実際にクローンコードを完成させるには有料学習資料が必須です。
(フルコードベース、設定ファイル、構造化コンポーネントを含む)

💬は、Inflearn講義でのみ提供されます!

  • 23時間の長い映像を体系的なカリキュラムに分けました。好きな部分をすばやく見つけて学習し、いつでも楽に復習できます。

  • 英語が見知らぬ人でも心配しないでください!

    韓国語のダビングが提供されて楽に聞くことができます。

  • 学んだ内容、ちょうどめくりません🙂

    中途半端なAIクイズで楽しく復習してみることができますよ!


こんな方に
おすすめです

学習対象は
誰でしょう?

  • 最新のウェブ開発トレンドを学んで、実際のプロジェクトに適用したいエンジニア

  • Next.js 15, React 19, tRPC に基づいたモダンアプリ設計を経験したいエンジニア

  • YouTubeクローンプロジェクトを自分で完成させてみたい開発者

  • ポートフォリオを強化したいジュニア開発者

前提知識、
必要でしょうか?

  • JavaScriptとReactに関する基本知識

こんにちは
です。

567

受講生

12

受講レビュー

4

回答

3.8

講座評価

1

講座

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

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

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

 

カリキュラム

全体

40件 ∙ (23時間 41分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

12件

3.8

12件の受講レビュー

  • goodsosbva4133님의 프로필 이미지
    goodsosbva4133

    受講レビュー 5

    平均評価 3.6

    修正済み

    3

    20% 受講後に作成

    Poor Korean description

    • jojoldu2inflab

      Hello Hyunseong This is Hyangro from Inflab. We are truly sorry for the inconvenience. If you could tell us what you mean by the Korean explanation being insufficient, we will try to improve it. Regarding the quality issues with translation and dubbing, we have thoroughly reviewed everything again and improved the deficient system issues, resulting in several improvements being applied. We will continue to keep your feedback in mind and work to create a better system. Thank you very much for using Inflearn, and we will repay you with better service.

  • ej90611066님의 프로필 이미지
    ej90611066

    受講レビュー 2

    平均評価 5.0

    修正済み

    5

    10% 受講後に作成

    It's hard to call it 'clone coding' because it has such diverse features and explains well why each tech is used, allowing you to grasp design principles too. Among YouTube clone coding courses, this one is personally meaningful as it lets you utilize AI and various stacks in diverse ways!

    • codewithantonio
      知識共有者

      Thank you so much for the thoughtful review! I’m really glad you found the explanations helpful and meaningful, especially around architecture and AI usage. Hope the course continues to inspire you as you explore different stacks 🙏 Translation (I used ChatGPT): 정성스러운 리뷰 정말 감사합니다! 설계나 AI 활용 부분에서 설명이 도움이 되셨다니 너무 기쁩니다. 앞으로도 다양한 스택을 탐색하실 때 이 강의가 좋은 영감이 되길 바랍니다 🙏

  • divdivdivv님의 프로필 이미지
    divdivdivv

    受講レビュー 4

    平均評価 5.0

    5

    30% 受講後に作成

    I'm enjoying the lecture!

    • codewithantonio
      知識共有者

      Thank you so much! I'm really glad to hear you're enjoying the lecture 🙏 Translation (I used ChatGPT): 정말 감사합니다! 강의를 즐기고 계시다니 저도 정말 기쁩니다 🙏

  • dydals34402231님의 프로필 이미지
    dydals34402231

    受講レビュー 6

    平均評価 5.0

    修正済み

    5

    30% 受講後に作成

    Listening to the lectures I had only encountered on YouTube, translated into Korean through Inflearn, felt much newer and different. Thanks to that, I feel like my understanding has also increased! In the future, I'm curious if you have plans to create lectures that proceed not only with the method of handling both front and server solely with Next.js but also by building a monorepo environment with server frameworks like NestJS, Express, and Hono!

    • codewithantonio
      知識共有者

      Thank you so much for the thoughtful feedback! I'm really happy to hear that the Korean-translated lectures helped deepen your understanding. I also appreciate your suggestion. Lectures covering monorepo environments and frameworks like NestJS, Express, and Hono sound like a great idea. I’ll definitely keep that in mind for future content. Translation (I used ChatGPT): 정성스러운 피드백 정말 감사합니다! 한국어로 번역된 강의가 이해에 도움이 되었다니 저도 정말 기쁩니다. 또한 제안해 주신 내용도 정말 좋네요. NestJS, Express, Hono 같은 서버 프레임워크를 활용한 모노레포 환경에 대한 강의는 확실히 가치 있는 주제라고 생각합니다. 앞으로 콘텐츠 제작 시 꼭 참고하겠습니다!

  • haeyul님의 프로필 이미지
    haeyul

    受講レビュー 19

    平均評価 4.6

    5

    18% 受講後に作成

    ¥6,530

    似ている講座

    同じ分野の他の講座を見てみましょう!