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

react
react-router-dom
redux-toolkit
vite
sass
nginx
Kakao Address APIの使用
Infinite Scroll
Admin ページの実装
express
cheerio
Oauth2.0
postgresql
web3 storage
filecoin
sendgrid
SNSログイン(Naver、Kakao、Google)
Kakao Payの実装
学習対象は
誰でしょう?
Web開発の基礎を知っている方
5分以上講義を聞くのが難しい方
Colini Web開発ガイドの受講生
ドッカーで開発からProductionまで作ってみたい方
前提知識、
必要でしょうか?
Html、Css、Javascript、Reactの基本
こんにちは、サプルです
🔥2023年11月、Inflearnに新しい講座をローンチし、「何か新しいことを学んでみたい!」と思い、6ヶ月間Rustとウェブデザインにどっぷり浸かっていました。その後すぐにRust、Leptosでの開発を開始して
ついに…! Rust + Leptos + SQLx + Postgres + Docker + GCloud Run このスタックで作ったウェブサービスを2年越しに完成させました。
最近のReactはサーバーコンポーネントの流れに向かっていますが、Leptosは誕生当初から最新のウェブトレンドを反映したRust + WASMベースのフルスタックフレームワークであるため、初期からサーバーコンポーネント構造の形式で開発することができました。
2023年にColini Web開発ガイド、Node Fullstack開発ガイド、Terraform開発ガイドの3つの講義を制作した時から、「価値ある情報を5分以内に伝える」というコンセプトで運営されるプラットフォームを構想していたため、当時リリースした講義はすべて5分以内に編集して公開しました。
これからの私の開発の旅はRustへと続く予定であり、講義や情報の共有もRustで行っていく予定です。
[講義部分]
既存の講義に対する不必要な支出を減らすため、https://5min24.comにて1講義あたり100〜200円で提供されており、全講義を購入する必要がなく、必要な部分だけを選択して受講できるため、より経済的に学習いただけます。
そして〜!!! コンテンツクリエイターを募集しています。
自分が学習した内容を他人に伝えてみると、その知識に対する理解度も大幅に向上します。
私のプラットフォームは、講座全体の完成版ではなく、1つずつ販売可能な構造になっているため、
学んだ知識を他人に伝える練習を https://5min24.com でやってみることをお勧めします。
これを通じて理解度を高め、コーヒー代も稼げたらいいのではないでしょうか?
動画以外にもブログ形式で記事ごとに販売可能ですので、ぜひたくさんご利用ください~~
最後に〜!!
プラットフォームのオープン初期につき、大きな特典を提供中です
- 6ヶ月間、有料販売収益(税引き後)の90%を精算
- 初期クリエイター50名:画面最上部広告5枠 + カード広告露出を6ヶ月間無料
気軽に一度アップして、反応だけでも一緒に見てみましょう〜!!!
全体
240件 ∙ (19時間 19分)
講座資料(こうぎしりょう):
1. 講義案内
03:34
3. バックエンド使用技術紹介(2)
04:34
4. 学習方法
03:50
5. 歴史の流れ(SSR、CSR)
03:05
6. CSRで製作する理由(1)
04:38
7. CSRで製作する理由(2)
03:22
8. [実習]基本設定(1)
05:00
9. [実習]基本設定(2)
04:55
10. [実習]基本設定(3)
03:43
11. sequelize(1)
05:30
12. sequelize(2)
05:56
13. sequelize(3)
05:10
14. sequelize(4)
04:40
15. sequelize(5)
03:19
16. sequelize(6)
03:14
17. sequelize(7)
03:59
18. sequelize(8)
04:13
19. sequelize(9)
05:39
20. sequelize(10)
04:46
21. sequelize(11)
05:58
22. docker(1)
05:56
23. docker(2)
05:56
24. docker(3)
03:24
25. docker(4)
05:48
26. db、gateway(1)
05:30
27. gateway(2)
03:57
28. フロント設定(1)
04:20
29. フロント設定(2)
04:27
32. 実習(1)
05:23
33. 実習(2)
03:29
34. 実習(3)
05:35
35. 実習(4)
05:47
36. 実習(5)
04:38
37. 実習(6)
03:54
38. 実習(7)
04:44
39. 実習(8)
05:23
40. 実習(9)
04:30
41. 実習(10)
05:25
42. 実習(11)
04:15
43. 実習(12)
04:21
44. 実習(13)
05:44
45. 実習(14)
04:34
46. 実習(15)
03:22
47. server.js(1)~(2)
04:55
51. assets フォルダ(2)
04:00
57. Body.jsx(1)
03:18
58. Body.jsx(2)
03:28
59. 実習(1)
04:13
60. 実習(2)
05:59
61. 実習(3)
03:34
62. 実習(4)
04:22
63. 実習(5)
04:22
64. 実習(6)
05:02
65. 実習(7)
05:32
66. 実習(8)
03:26
67. 実習(9)
05:41
68. 実習(10)
05:38
69. 実習(11)
04:23
70. 実習(12)
05:22
71. 実習(13)
05:01
72. 実習(14)
03:38
73. 実習(15)
03:57
74. 実習(16)
05:59
75. 実習(17)
04:40
同じ分野の他の講座を見てみましょう!