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

この24時間のチュヌトリアルでは、自分だけのYouTubeクロヌンを䜜る方法を孊びたす。Next 15ずReact 19tRPCを含む、サヌバヌコンポヌネントでのプリフェッチ、クラむアントコンポヌネントでのサスペンス掻甚、ビデオ凊理、バックグラりンドゞョブ、AI機胜など、高床なトピックを扱いたす。

難易床 初玚

受講期間 無制限

Next.js
Next.js
React
React
PostgreSQL
PostgreSQL
TailwindCSS
TailwindCSS
drizzle
drizzle
Next.js
Next.js
React
React
PostgreSQL
PostgreSQL
TailwindCSS
TailwindCSS
drizzle
drizzle

孊習した受講者のレビュヌ

4.0

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

こんにちは
antonioです。

655

受講生

18

受講レビュヌ

4

回答

4.1

講座評䟡

2

講座

こんにちは、゜フトりェア゚ンゞニアのAntonioです。7幎以䞊の開発経隓があり、プログラミングの䞖界に魅了され、この分野で働けるこずを倧きな幞運だず感じおいたす。

これたで様々なプログラミング蚀語や技術を扱う経隓を通じお、開発者ずしお倧きな成長を遂げるこずができたした。これたでに培った知識や経隓も倧切ですが、私は今もなお孊び、成長するこずに察しお匷い情熱を持っおいたす。

このような経隓ず情熱を糧に、プログラミングぞの愛を分かち合い、共に孊び成長するために「Code With Antonio」ずいうYouTubeチャンネルず孊習プラットフォヌムを運営しおいたす。私が制䜜したチュヌトリアルやむンサむトが倚くの方々の圹に立ち、プログラミングコミュニティにポゞティブな貢献ができるこずを願っおいたす。

䜜成したチュヌトリアルやむンサむトが倚くの方々の圹に立ち、プログラミングコミュニティにポゞティブな貢献ができるこずを願っおいたす。 📺 YouTube 📚 孊習プラットフォヌム

もっず芋る

カリキュラム

党䜓

40件 ∙ (23時間 41分)

講座資料こうぎしりょう:

授業資料
講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

17ä»¶

4.0

17件の受講レビュヌ

  • dydals34402231님의 프로필 읎믞지
    dydals34402231

    受講レビュヌ 8

    ∙

    平均評䟡 5.0

    修正枈み

    5

    30% 受講埌に䜜成

    YouTubeでしか觊れるこずのできなかった講矩を、Inflearnを通しお韓囜語翻蚳で聞くず、たた違った感芚でずおも新しく感じたした。おかげで理解床もさらに高たった気がしたす 今埌は、Next.js䞀぀でフロントずサヌバヌの䞡方を凊理する方匏だけでなく、NestJS、Express、Honoのようなサヌバヌフレヌムワヌクず共にモノレポ環境を構築しお進める講矩も制䜜蚈画があるか気になりたす

    • codewithantonio
      知識共有者

      䞁寧なフィヌドバック、本圓にありがずうございたす韓囜語に翻蚳された講矩が、より深い理解に繋がったず䌺い、倧倉嬉しく思っおおりたす。 ご提案いただいた内容に぀いおも感謝いたしたす。monorepo環境や、NestJS、Express、Honoずいったフレヌムワヌクを扱う講矩は、倧倉興味深いアむデアだず感じたした。今埌のコンテンツ䜜成の際に、必ず参考にさせおいただきたす。

  • ej90611066님의 프로필 읎믞지
    ej90611066

    受講レビュヌ 2

    ∙

    平均評䟡 5.0

    修正枈み

    5

    10% 受講埌に䜜成

    「クロヌンコヌディング」ず蚀うには機胜が本圓に倚様で、各技術をなぜ䜿うのかの説明もよくされおいるので、蚭蚈感芚たで身に぀くず思いたす。 YouTubeクロヌンコヌディングの䞭でもAI掻甚、様々なスタックを倚様に掻甚しおみるこずができる講矩なので、個人的には意味があるず思いたす

    • codewithantonio
      知識共有者

      䞁寧なレビュヌ、本圓にありがずうございたす 特にアヌキテクチャやAI掻甚に関する説明が、お圹に立ち、有意矩だず感じおいただけたようで、倧倉嬉しく思いたす。 今埌も様々なスタックを探求される際に、このコヌスが匕き続きむンスピレヌションずなれば幞いです🙏

  • lisia님의 프로필 읎믞지
    lisia

    受講レビュヌ 1

    ∙

    平均評䟡 1.0

    修正枈み

    1

    35% 受講埌に䜜成

    翻蚳の品質がひどすぎたすね。 YouTubeにある講矩を韓囜語で楜に聞こうず思っお賌入したのに 'mux'を뚹슀、맥슀、最倧ずいうように、でたらめに吹き替えおいたすね。 'snake_case'を'섞우넀읎튞 쌀읎슀'ず吹き替えおいお 'bunx'を'뱅크'ず吹き替えおいお  機械翻蚳を䜿ったずしおも、ある皋床チェックしおからリリヌスすべきではないでしょうか

    • DH様、こんにちは。 Inflabのヒャンロです。 ご䞍䟿をおかけし、誠に申し蚳ございたせん。 改めお党䜓的に確認を行い、おっしゃっおいた単語、文章の翻蚳ず、吹き替え再生に関する問題点を改善いたしたした。その他、䞀般的な翻蚳システムでは把握できない技術的な郚分に぀いおも、開発チヌムが共に確認し察応いたしたした。 いただいたフィヌドバックを匕き続き参考にしながら、より良いシステム構築のため努力しおたいりたす。 Inflearnをご利甚いただき、誠にありがずうございたす。より良いサヌビスでお応えいたしたす。

  • instudy님의 프로필 읎믞지
    instudy

    受講レビュヌ 1

    ∙

    平均評䟡 1.0

    1

    10% 受講埌に䜜成

    翻蚳の品質がひどすぎたす。 自動生成された英語字幕をAIで翻蚳しお、少しだけ手盎ししたようなレベルですが、人間が䜜った字幕では芋られない問題があたりにも倚く芋られたす。 「'bunx'」が「'banx'」になるなど 「'/feed/123'」が「'スラッシュ feed スラッシュ 123'」になるなど 「'123'」が「'1、2、3'」や「'one, two, three'」になるなど 「'lucide-react'」が「'Lucid React'」になるなど 「'true'」が「'truth'」になるなど 「'duration'」ず蚀ったり「'持続時間'」ず蚀ったり 韓囜語の音声は抜け萜ちおいる郚分もあり ハングルだったり英語だったり、倧文字小文字が混圚したり、ハむフンが入ったり抜かれたり 序盀だけ芋たしたが、講矩䞭ずっずこの調子なので、ずおも疲れたす。 Inflearnの講矩キュレヌションペヌゞがかなり印象的だったので賌入した講矩ですが、このような翻蚳になっおいるずは信じられたせん。

    • goodsosbva4133님의 프로필 읎믞지
      goodsosbva4133

      受講レビュヌ 5

      ∙

      平均評䟡 3.6

      修正枈み

      3

      20% 受講埌に䜜成

      ハングルの説明が足りない

      • こんにちは、현성様 Inflabの향로です。 ご䞍䟿をおかけし、倧倉申し蚳ございたせん。 韓囜語の説明が䞍十分ずのこず、具䜓的にどのような点かお教えいただけたすでしょうか。改善に努めさせおいただきたす。 翻蚳ず吹き替えの品質問題に぀いおは、党䜓的に再床怜蚌を行い、䞍十分だったシステムの問題を改善いたしたしたので、様々な改善が適甚されおおりたす。 いただいたフィヌドバックを垞に念頭に眮きながら、より良いシステムを構築できるよう努めおたいりたす。 Inflearnをご利甚いただき、誠にありがずうございたす。より良いサヌビスでお応えできるよう努めたす。

    䌌おいる講座

    同じ分野の他の講座を芋おみたしょう