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件の受講レビュー

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

    受講レビュー 5

    平均評価 3.6

    修正済み

    3

    20% 受講後に作成

    한글 설명이 부실함

    • 향로

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

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

    受講レビュー 2

    平均評価 5.0

    修正済み

    5

    10% 受講後に作成

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

    • antonio
      知識共有者

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

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

    受講レビュー 4

    平均評価 5.0

    5

    30% 受講後に作成

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

    • antonio
      知識共有者

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

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

    受講レビュー 6

    平均評価 5.0

    修正済み

    5

    30% 受講後に作成

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

    • antonio
      知識共有者

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

  • haeyul님의 프로필 이미지
    haeyul

    受講レビュー 19

    平均評価 4.6

    5

    18% 受講後に作成

    ¥6,566

    似ている講座

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