강의

멘토링

커뮤니티

Programming

/

Web Development

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

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

難易度 初級

受講期間 無制限

  • antonio
Next.js
Next.js
React
React
PostgreSQL
PostgreSQL
TailwindCSS
TailwindCSS
drizzle
drizzle
Next.js
Next.js
React
React
PostgreSQL
PostgreSQL
TailwindCSS
TailwindCSS
drizzle
drizzle

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

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

3.9

5.0

ㄱㅇ

10% 受講後に作成

「クローンコーディング」と言うには機能が本当に多様で、各技術をなぜ使うのかの説明もよくされているので、設計感覚まで身につくと思います。 YouTubeクローンコーディングの中でもAI活用、様々なスタックを多様に活用してみることができる講義なので、個人的には意味があると思います!

5.0

김용민

30% 受講後に作成

YouTubeでしか触れることのできなかった講義を、Inflearnを通して韓国語翻訳で聞くと、また違った感覚でとても新しく感じました。おかげで理解度もさらに高まった気がします! 今後は、Next.js一つでフロントとサーバーの両方を処理する方式だけでなく、NestJS、Express、Honoのようなサーバーフレームワークと共にモノレポ環境を構築して進める講義も制作計画があるか気になります!

5.0

미묘한채널

30% 受講後に作成

講義を楽しく聞いています

受講後に得られること

  • 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に関する基本知識

こんにちは
です。

641

受講生

17

受講レビュー

4

回答

4.0

講座評価

2

講座

こんにちは、ソフトウェアエンジニアのAntonioです。7年以上の開発経験があり、プログラミングの世界に魅了され、この分野で働けることを大きな幸運だと感じています。

これまで様々なプログラミング言語や技術を扱う経験を通じて、開発者として大きな成長を遂げることができました。これまでに培った知識や経験も大切ですが、私は今もなお学び、成長することに対して強い情熱を持っています。

このような経験と情熱を糧に、プログラミングへの愛を分かち合い、共に学び成長するために「Code With Antonio」というYouTubeチャンネルと学習プラットフォームを運営しています。私が制作したチュートリアルやインサイトが多くの方々の役に立ち、プログラミングコミュニティにポジティブな貢献ができることを願っています。

作成したチュートリアルやインサイトが多くの方々の役に立ち、プログラミングコミュニティにポジティブな貢献ができることを願っています。 📺 YouTube 📚 学習プラットフォーム

カリキュラム

全体

40件 ∙ (23時間 41分)

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

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

受講レビュー

全体

16件

3.9

16件の受講レビュー

  • ej90611066님의 프로필 이미지
    ej90611066

    受講レビュー 2

    平均評価 5.0

    修正済み

    5

    10% 受講後に作成

    「クローンコーディング」と言うには機能が本当に多様で、各技術をなぜ使うのかの説明もよくされているので、設計感覚まで身につくと思います。 YouTubeクローンコーディングの中でもAI活用、様々なスタックを多様に活用してみることができる講義なので、個人的には意味があると思います!

    • codewithantonio
      知識共有者

      丁寧なレビュー、本当にありがとうございます! 特にアーキテクチャやAI活用に関する説明が、お役に立ち、有意義だと感じていただけたようで、大変嬉しく思います。 今後も様々なスタックを探求される際に、このコースが引き続きインスピレーションとなれば幸いです🙏

  • dydals34402231님의 프로필 이미지
    dydals34402231

    受講レビュー 8

    平均評価 5.0

    修正済み

    5

    30% 受講後に作成

    YouTubeでしか触れることのできなかった講義を、Inflearnを通して韓国語翻訳で聞くと、また違った感覚でとても新しく感じました。おかげで理解度もさらに高まった気がします! 今後は、Next.js一つでフロントとサーバーの両方を処理する方式だけでなく、NestJS、Express、Honoのようなサーバーフレームワークと共にモノレポ環境を構築して進める講義も制作計画があるか気になります!

    • codewithantonio
      知識共有者

      丁寧なフィードバック、本当にありがとうございます!韓国語に翻訳された講義が、より深い理解に繋がったと伺い、大変嬉しく思っております。 ご提案いただいた内容についても感謝いたします。monorepo環境や、NestJS、Express、Honoといったフレームワークを扱う講義は、大変興味深いアイデアだと感じました。今後のコンテンツ作成の際に、必ず参考にさせていただきます。

  • divdivdivv님의 프로필 이미지
    divdivdivv

    受講レビュー 4

    平均評価 5.0

    5

    30% 受講後に作成

    講義を楽しく聞いています

    • codewithantonio
      知識共有者

      本当にありがとうございます! 講義を楽しんでいただけていると聞いて、本当に嬉しいです 🙏

  • blueyelow09782597님의 프로필 이미지
    blueyelow09782597

    受講レビュー 5

    平均評価 5.0

    5

    60% 受講後に作成

    • p5747374710님의 프로필 이미지
      p5747374710

      受講レビュー 2

      平均評価 4.0

      4

      100% 受講後に作成

      ¥6,799

      antonioの他の講座

      知識共有者の他の講座を見てみましょう!

      似ている講座

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