Next.js 15로 완성하는 실전 YouTube 클론 개발
antonio
이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.
초급
Next.js, React, PostgreSQL
リアルタイムAIエージェント、会議内容の要約、そして通話後機能を備えたAIベースのビデオ会議アプリケーションを作りましょう。
一つの完成型AIサービスをエンドツーエンドで完成
Next.js 15ベースのAI × SaaSサービス構造設計
リアルタイム対話型AIエージェントの実装
リアルタイム音声・映像処理パイプライン構築(ビデオ通話を含む)
イベント駆動型のAI要約パイプライン構築
認証・サブスクリプション・使用量ベースの課金などSaaS全体のフロー実装(Polar + Better Auth)
Inngestでバックグラウンド作業自動化構成
CodeRabbit AIレビューによるコード品質の改善
AIサービス、一度作ってみたいけど
どこからどう始めればいいのか途方に暮れていませんか?
AI機能を実装してみる講義は多いですが
「ちゃんとしたAIサービスを作る講義」は多くありません。
今回の講義では
リアルタイム音声・映像処理、自動要約・整理、会議Q&AなどのAI機能から
認証・サブスクリプション・使用量ベースの課金構造まで、SaaSサービスが備えるべき
全体のフローを一つのアプリ内で直接実装してみます。
ポートフォリオ以上の体験、
Point 1
リアルタイム会話、自動要約、Q&Aまでサービスにすぐ適用できる3つのAI機能を実装します。
ストリーミングレスポンス
通話が始まったらすぐに参加してストリーミングで応答するReal-time AIエージェント実装
マルチモーダル処理
音声・テキスト入力をすべて処理し、音声で応答するマルチモーダル対話フローを設計
AIペルソナ設定
プロンプト(instructions)で口調と役割を定義し、状況に合ったキャラクター型AI応答を生成
イベント駆動型AIパイプラインの自動化
会議終了イベントをトリガーに
スクリプト生成 → 要約 → DB保存まで
一度に処理される自動化パイプライン
非同期処理構造で素早く結果物を生成
ユーザーリクエストと分離された
非同期作業で遅延を減らし、
要約結果を素早く提供するバックエンド設計
GPTスタイルのインターフェース実装
Stream Chat SDKで実装する
ChatGPTスタイルの
Q&Aインターフェース
会議専用アシスタント
会議の要約・文字起こしを基に、
会議の文脈を理解し
フォローアップ質問に答えるAIアシスタントの役割
ログイン・サブスクリプション決済・使用量ベースのアップグレードなど
サブスクリプション型SaaSサービスの基本的な流れを体験できます。
Stripe/Clerkの組み合わせよりも軽量で開発者フレンドリーな
オープンソースPolar + Better Authの組み合わせで
認証からサブスクリプション決済までの全体フローを設計します。
ここで、使用量を基準に無料体験の上限をチェックし、
超過時には料金プランのアップグレードを促す
一般的なSaaS課金体系まで一緒に実装してみます。
実務でよく使うGitHub FlowにAIコードレビューを加えました。
講義はGitHub Flowをベースに実習を進め、
PRごとにCodeRabbit AIがどのようなレビューを残すか
確認できるように設定します。
この過程で
コードスタイル、潜在的なバグ、改善ポイントまで
AIと協業するコードレビュー過程を経験できます。
CodeRabbit AIとは?
CodeRabbit AIは、GitHub Pull Requestに自動的に参加し、コードスタイルやバグ、リファクタリングのアイデアまでリアルタイムで提案してくれるAIベースのコードレビューツールです。
• AIベースのリアルタイムビデオ通話
• リアルタイムカスタムエージェント
• 会議内容に関するAI Q&A
• OpenAI連動
• リアルタイムビデオ通話SDK(Stream Video)
• リアルタイムチャットSDK(Stream Chat)
• 要約、全体スクリプト、録画本の生成
• 動画再生機能
• 検索およびキーワードハイライト
• 会議記録及び状態管理
• サブスクリプション決済(Polar連携)
• ログイン/認証システム (Better Auth)
rul x Eqnm x u to Qnm x Qqnm xr=Qnm x Qnm x Qnm x Qnm x Qqnm x A quelle Qnm x Qnm x Qnm x Qnm x Qqnm x Qqnmx
• Next.js 15 + React 19
• Tailwind CSS v4 + Shadcn UI
• Inngestベースのバックグラウンドジョブ
• CodeRabbit AIコードレビュー自動化
この講義はCode with Antonio YouTubeチャンネルでも公開されていますが、
実際にクローンコーディングを完成させるには有料学習資料が必ず必要です。
(全体のコードベース、設定ファイル、構造化されたコンポーネントを含む)
💬 Inflearn講座でのみ提供されます!
13時間の長い映像を体系的なカリキュラムに分けました。希望する部分を素早く見つけて学習し、いつでも気軽に復習できます。
英語が不慣れでも心配しないでください!
韓国語吹き替えが提供されているので、快適に聞くことができます。
学んだ内容、そのまま流さないでください 🙂
途中途中AIクイズで楽しく復習できます!
学習対象は
誰でしょう?
AI機能を実際のサービスに適用してみたい方
Next.js 15ベースのAI × SaaSの流れを体験したい方
完成型AIプロジェクトでポートフォリオを強化したい方
AIコードレビュー(CodeRabbit)環境を体験してみたい方
前提知識、
必要でしょうか?
JavaScriptとReactに関する基本知識
596
受講生
17
受講レビュー
4
回答
3.9
講座評価
2
講座
안녕하세요, 저는 소프트웨어 엔지니어 Antonio입니다. 7년 이상의 개발 경력을 가지고 있으며, 프로그래밍 세계에 매료되어 이 분야에서 일할 수 있다는 것을 큰 행운으로 생각합니다.
그동안 다양한 프로그래밍 언어와 기술을 다루는 경험을 통해 개발자로서 많은 성장을 이룰 수 있었습니다. 지금까지 쌓은 지식과 경험도 소중하지만, 저는 여전히 배우고 성장하는 데에 큰 열정을 가지고 있습니다.
이러한 경험과 열정을 바탕으로, 프로그래밍에 대한 애정을 나누고 함께 배우며 성장하기 위해 "Code With Antonio" 유튜브 채널과 학습 플랫폼을 운영하고 있습니다. 제가 만든 튜토리얼과 인사이트가 많은 분들께 도움이 되고, 프로그래밍 커뮤니티에 긍정적인 기여를 할 수 있기를 바랍니다.
全体
30件 ∙ (13時間 23分)
期間限定セール
¥27,500
50%
¥6,854
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!