Inflearn クローンコーディング Part 1: Next.jsとNestJSで始める実戦プロジェクト

🔥 講座登録から動画アップロードまで、知識共有者機能をそのまま実装してみる実戦フルスタック講座です。Next.js 15とNestJSを活用して講座作成、カリキュラム構成、サムネイルおよび動画アップロード、詳細紹介作成まで実際のInflearnフローに沿って作りながら、Prismaモデリング、JWT認証、S3 + CloudFrontアップロード、Swagger API設計など実務に近い経験を積むことができます。

難易度 中級以上

受講期間 無制限

AWS
AWS
Docker
Docker
Next.js
Next.js
NestJS
NestJS
Prisma
Prisma
AWS
AWS
Docker
Docker
Next.js
Next.js
NestJS
NestJS
Prisma
Prisma

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

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

4.8

5.0

치현

100% 受講後に作成

フロントエンド開発をしていますが、バックエンドも触ってみたいと思っていたところ、ロ펀様のNext.jsフルスタック講座が良かった記憶があったので受講しました。 個人的にInflearnのようなサイトを作ってみたくて、Inflearnの講座データをクロールしても良いかと正式に問い合わせて断られたこともあったのですが、今回の講座でその願いを叶えることができたように思います。 Nest.jsを初めて触る者として、プロジェクトを進めるならこのように構成すれば良いという感覚を掴める講座でした。「Inflearnプロダクトを覗いてみる」という企画部分も含まれており、アーキテクチャや構造について考えてみることができたと思います。 Part1にはデプロイが含まれていないのが少し残念ですが、早くPart2が出たらデプロイまで加えた完成されたポートフォリオにしたいですね 😊😊

5.0

찬우 이

100% 受講後に作成

私はフロントエンド開発者になるために勉強していますが、以前ロ펀さんのsupabaseの講義を聞いて大変役立ったため、今回のクローンコーディング講義も受講することにしました。 チームプロジェクトでバックエンドの方からAPIを受け取り、Swaggerを参考にフロントコードを作成する際、常にバックエンドではどのようなロジックでデータが流れているのか気になっていましたが、今回の講義を通してその流れを直接経験することができ、本当に有益でした。 NestJS, Prismaなど初めて触れる技術も多く、難しい部分もありましたが、講師の方が実務でよく使う最新技術を分かりやすく説明してくださり、Notionにもよく整理されていたため、ついていきやすかったです。Shadcn UI, TailwindCSS, S3など様々なツールを活用してみる過程も興味深く、実務ですぐに使えるヒントやノウハウをたくさん学ぶことができました。 特に、フロントとバックエンドがどのように接続され、全体的にどのような構造で動作するのかを実際に実装してみることで、フルスタック開発への理解度が確実に高まりました。ポートフォリオとして活用できる完成度の高いプロジェクトを作成したい方や、実務志向のフルスタック開発を学びたい方に、この講義をお勧めします!

5.0

cafe small house

100% 受講後に作成

講義を全て聞き終え、改めて記述します。まず、本当に素晴らしいです。以前は、きれいな講義だな、とだけ思っていましたが、得られるものが多かったです。 まず、私にとってはhey-apiを通じてフロントエンドからバックエンドのスペックを受け取れることを学べてとても良かったと思います。正直、これだけでも講義の価値は十分にありました。 もちろん、graphql、trpcなど、そういった方法はたくさんあると思いますが、結局、就職すると皆rest apiだけで行うので、どうすればそういった方法がないのか、お互いの作業を減らせる方法はないのか、と考えていたのですが、良い方法を知ることができたと思いますし、 nextとnestについても、私が使わずに、もっと良い方法があるのだなと思わせてくれた講義だったので良かったと思います。

受講後に得られること

  • 最新フルスタック開発の流れ (Next.js 15, NestJS, Prisma)

  • ポートフォリオとして活用可能な「自分だけのInflearn」プラットフォーム完成

  • 講義登録、修正、動画アップロード、カリキュラム編集など実サービス機能全般の開発

  • Shadcn UI + TailwindCSS + Cursor AIで実務レベルの感覚的なUI制作

  • Swagger + OpenAPI基盤の自動化されたバックエンド呼び出し構造構成

  • PrismaでデータベースモデリングしてPostgreSQL基盤構造設計する

  • S3 + CloudFront ベースのストリーミングアップロードシステム構築

🚀

国内初!

Next.js 15 + NestJS フルスタッククローンコーディング講座

もしかして学校に在学中の学生さんですか?

🔗 学生割引(-40%) Googleフォームリンク🔗


この講義を通じて皆さんは



強力なフルスタックの組み合わせであるNextJS、NestJS

話題のORMであるPrismaを通じて


自分だけのInflearnを作ってみながら

しっかりとした基礎力を持つフルスタック開発者として成長します!


"つまみ食いはもうやめて!本物のフルスタックを体験してください。"

たった一つの講義企画、開発、デプロイまで完成するフルスタックの旅を始めましょう。

"Next.js + NestJSの組み合わせで実務に近いInflearnプラットフォームを最初から直接作ってみます。"

🧩 Next.js + NestJS = 単一言語フルスタック最適の組み合わせ

Next.js 15は、Reactベースのプロジェクトにサーバーコンポーネント・App Router・Server Actionsを追加し、画面レンダリングから簡単なAPIまで一つのコードベースで処理できるようにしてくれます。

NestJSは同じTypeScriptで書かれており、依存性注入とモジュール式構造のおかげで、チーム規模が大きくなってもメンテナンスしやすいバックエンドを構築できます。

2つのフレームワークを一緒に使うと、UIとサーバーが1つの型定義を共有してデータの不整合を減らし、開発者は言語・ツールセットの切り替えなしにフロントエンドとバックエンドを行き来できます。

🔥 Next.js v15 🔥

🔥 Nest.js v10 🔥

🤔 なぜ「Inflearn クローンプロジェクト」なのか?

小さなサンプルアプリではフルスタックの一サイクルを本格的に体験することは難しいです。ログイン機能だけのブログやToDoリストでは「実際のサービスがどのように動作するのか」を肌で感じることができないからです。

そこで私は、Inflearnの核心的な流れをそのまま移植したミニInflearnを作ることにしました。
会員管理から講義の登録、カリキュラムの編集、動画のS3アップロード、そしてCloudFrontでのストリーミングまでの過程を直接実装しながら、設計 → 認証 → メディア処理 → 権限管理を一度に経験できます。

💡 Part 1 紹介

今回のPart 1講座では

  • フロントエンドとバックエンドプロジェクトのセットアップを進行し(Next.js 15 · NestJS · Prisma · Docker)

  • Auth.jsを活用してJWT認証を実装した後

  • 知識共有者機能(講義管理、カリキュラム管理、詳細ページ作成、動画・サムネイルアップロード)を完成させます。

  • TailwindCSS · ShadcnUI、Cursor AIを活用して素早くスタイリングを進め、実際のロジックとフルスタック経験に集中できるように設計しました。

  • 講義を終えると「講義をアップロードしてストリーミングまで可能なプラットフォーム」が手に入り、データモデリングからクラウドストリーミングまでつながるフルスタック能力を自然に習得することになります。

Part 2では、この土台の上に講義検索・受講・受講評価・Q&A機能を載せ、最終的にAWS デプロイまで完了して誰でもアクセスできる本物のサービス"で完成予定です。

Part 1で築いた基礎がPart 2へ自然につながるようにカリキュラムを設計したので、2つのパートを連続して受講すれば設計から運営までフルスタック全過程を完全に体験することができます。

🚀

この講義を受講されるすべての方は

このような成果物を実際に完成させることになります


🥇 国内初!Next.js 15 × NestJS 実戦フルスタック完成

  • App Router、Server Actionなど
    最新のNext機能実習

  • NestJSモジュールアーキテクチャ & REST API設計

  • Prisma + PostgreSQL + Swaggerで実務バックエンド実装


🧑🏻‍💻 私が作る私だけの「ミニInflearn」

  • 講義登録/修正、詳細紹介作成、サムネイルアップロード

  • セクション/講義追加およびカリキュラム構成機能

  • 知識共有者専用管理者機能の直接開発


🎥動画アップロードからストリーミングまで

  • S3 + CloudFrontでセキュリティ処理された動画アップロード

  • Multerを活用した動画アップロード + プレビュー実装

  • リアルタイムアップロード結果表示まで完成


🎨UIは美しく、開発は素早く

  • TailwindCSS + ShadcnUIで洗練されたUIを構築

  • Cursor AIでスタイル自動化と高速開発

  • レスポンシブレイアウト、共通コンポーネントの直接設計


🏠

これらすべてを実務レベルの技術スタック

しっかりと完成させていきましょう

フロントエンド

  • Next.js 15 – 最新フロントエンドフレームワーク

  • TailwindCSS – 素早くスタイルを適用できるCSSライブラリ

  • Shadcn/UI – 実戦用UIコンポーネントライブラリ

  • React Query – サーバーデータキャッシュおよびリクエスト状態管理ライブラリ

  • Jotai v2 – 直感的なグローバル状態管理ツール


バックエンド・インフラ

  • NestJS – バックエンドAPIサーバーフレームワーク

  • Prisma – 安全で便利なDB接続用ORM

  • PostgreSQL – 拡張性と安定性を備えた関係型データベース

  • Docker – 一貫した開発・デプロイ環境構築ツール

  • AWS S3 / CloudFr

    ont – 講義動画の保存と高速転送のためのクラウドインフラ


🎯

こんな方に強くおすすめします!

シンプルなToDoアプリから脱却し
本格的なサービスを
作ってフロントエンド開発者

ポートフォリオとして
すぐに活用できるプロジェクトが
必要な転職・就職準備生

講義プラットフォームのような
実サービスを作りたい
1人開発者

授業でこんなことを学びます


セクション1~3
基礎を固めてNext + Nestプロジェクトセットアップ

Next.js 15、TailwindCSS、ShadcnUI、Jotai、React Queryまでフロントサーバーをセットアップし、

NestJS、Prisma、DockerでバックエンドとDBまで一度に準備します。
Cursor AIを活用した実戦型開発ワークフローも一緒に身につけましょう。

セクション 4
本格的なサービスのようにログインから認証まで

Auth.js(next-auth)とJWTの組み合わせで
会員登録、ログイン、セッション維持、権限保護まで全て実装します。

SSR/CSRを考慮した認証処理から
NestJS Auth Guardの適用まで、実戦ですぐに使える認証システムを身につけます。

セクション 5
Inflearn構造を分解して直接企画してみる

本当のサービスを作るために、まずInflearnを分析してみます。

どのような機能とデータモデルが必要かを直接企画し、Course、Section、LectureなどのモデルをPrismaで直接定義し、Seedデータも作成してみましょう。

セクション 6
知識共有者機能実装(講義管理)

知識共有者が直接講義を登録し、修正する全体フローを実装します。

CKEditorを活用して詳細ページを作成し
S3 + CloudFrontの組み合わせで動画とサムネイルのアップロード機能を構築します。(ストリーミングも実装)
Swagger CodegenでAPI呼び出しも自動化します。

📦Part 1とPart 2、このように繋がります

この講義は「Inflearn クローンプロジェクト」シリーズの一部です。
Part 1とPart 2はそれぞれ独立して受講可能ですが、
一緒に受講すれば企画から配布まで、本格的なサービスを一つ完成させることができます。

Part 1

知識共有者機能中心

受講生機能中心

講義登録、カリキュラム構成、動画アップロード

Part 2

講義検索、受講申請、動画視聴、決済、配布

JWT認証、S3アップロード、管理者ページ構成

視聴記録保存、質問/受講評価、決済API、EC2デプロイ

🧑‍🎓

授業を通じて
このようなことを得ることができます


1⃣ プロジェクト構造を最初から最後まで自分で設計できるようになります。

2⃣ サービスに必要な機能をEnd-to-End実装する力が身につきます。

3⃣ AWSを通じて必要なインフラを構築できます。

4⃣ Cursor AIを活用して完成度の高いサービスを構築できます。

5⃣ "自分が欲しいサービスくらいは直接作れる!"という根拠のある自信が生まれます。

🧰

講義構成

7つのセクション、~15時間分、~50個の講義(生涯アップデート)

GitHub サンプルコードおよび参考資料提供

完成したプロジェクトはポートフォリオとして使用可能

🧩

受講前の準備事項

Typescript文法の基礎、React使用経験

Git、Node.jsに対する理解

#Next.js #Nest.js #NextJS #NestJS #Fullstack #フルスタック #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #クローンコーディング #Node.js #AWS #S3 #Cloudfront

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ブログ、Todoアプリはもう十分!サービス全般を直接実装してみたいフロントエンド開発者

  • NestJS バックエンド設計を実戦で身につけたいジュニア〜ミドル開発者

  • 転職、ポートフォリオのための完成度の高いプロジェクトが必要な就活生

  • 一つの講義で実戦スタックをA to Zまで身につけたい実務志向の受講生

  • 単一言語ベースのフルスタック構造を最初から最後まで習得したい実務志向の受講生

前提知識、
必要でしょうか?

  • HTML/CSS/JS基本文法

  • React基礎使用経験

  • REST API、Node.jsに対する理解

こんにちは
lopunです。

3,768

受講生

229

受講レビュー

64

回答

4.9

講座評価

7

講座

🚀 「トレンドの技術スタックで実践的なサービスを作る過程を包み隠さずお見せします」

理論よりもプロジェクト中心の実務講義を通じて、現場ですぐに役立つ内容を提供します。

  • (現) ネカラクベ在職

  • (現) 7年目フルスタックエンジニア

  • (講義) スパルタコーディングクラブ講師

  • (教育) 韓国科学技術院 (KAIST) 電算学科 卒業

もっと見る

カリキュラム

全体

55件 ∙ (14時間 42分)

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

講座掲載日: 
最終更新日: 

受講レビュー

全体

40件

4.8

40件の受講レビュー

  • nochikk님의 프로필 이미지
    nochikk

    受講レビュー 9

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    フロントエンド開発をしていますが、バックエンドも触ってみたいと思っていたところ、ロ펀様のNext.jsフルスタック講座が良かった記憶があったので受講しました。 個人的にInflearnのようなサイトを作ってみたくて、Inflearnの講座データをクロールしても良いかと正式に問い合わせて断られたこともあったのですが、今回の講座でその願いを叶えることができたように思います。 Nest.jsを初めて触る者として、プロジェクトを進めるならこのように構成すれば良いという感覚を掴める講座でした。「Inflearnプロダクトを覗いてみる」という企画部分も含まれており、アーキテクチャや構造について考えてみることができたと思います。 Part1にはデプロイが含まれていないのが少し残念ですが、早くPart2が出たらデプロイまで加えた完成されたポートフォリオにしたいですね 😊😊

    • lopun
      知識共有者

      チヒョン様、心のこもったご受講レビュー、本当にありがとうございます! Inflearnのようなサイトをご自身で作ってみたいという願いを、今回の講義で少しでも実現されたとのこと、嬉しく思います 😊😊 Nest.jsは初めてだったとのことですが、構造を理解して感覚を掴まれたということで、講義を作った立場としても大変嬉しいです! おっしゃる通り、Part1にはデプロイが含まれておらず、物足りなさを感じられたかと思いますが、Part2ではデプロイと合わせて、より完成度の高いポートフォリオを構築していただけるよう、最大限しっかりと準備を進めてまいります。ご期待ください! 😊 改めて貴重なご受講レビュー、ありがとうございます!

  • upustream6450님의 프로필 이미지
    upustream6450

    受講レビュー 4

    平均評価 5.0

    5

    71% 受講後に作成

    Part1とPart2を一緒に購入しました。 実務者として現在会社に導入する技術力を模索中、nestとnextフレームワークを使用した技術が必要で導入しようとしています。講義を通じて様々な技術を知ることができ、取り入れています。流れも良く、使用するライブラリや何とかなるプロジェクトではなく、効率的に開発/管理/運営に直接的な影響を与える構成だと思うので、講義は満点中百万点です。良い講義に感謝いたします。 ところで先生... 先生がご存知のことを私たち受講生は知らないから学びたくて講義を聞いているのです...この講義は初級ではありません... 受講している大部分はおそらく公式ドキュメントを見ても「一体私は何を見ればいいのか?」という考えをします..よく分からないからです...😊 突然「この部分がこの部分を代替するので削除します。」とおっしゃると、受講生の大部分はこの部分とこの部分が一体何なのかをしばらく考えなければならず、見つけ出すことに非常に困難を感じるようになると思います.. 先生の講義が良いです。 私が必要とするもの、私が望むものを全て構成してくださっています。 ち...ちょっとだけ、本当にちょっとだけです。 まだ一人で呼吸することもうまくできない「だめなじゃがいも」たちが受講していると思ってくださると感謝いたします。

    • lopun
      知識共有者

      良いご意見をいただき、ありがとうございます!おっしゃっていただいた内容を反映して、初心者の方々も比較的もっと簡単についてこられるよう努力いたします😊 ご質問や詰まってしまう部分がございましたら、いつでもSlackでお問い合わせください。完走まで頑張ってください!

  • tomorrowcho님의 프로필 이미지
    tomorrowcho

    受講レビュー 16

    平均評価 4.8

    修正済み

    5

    100% 受講後に作成

    Next.jsベースだったので、慣れてスムーズに始められました。NestJSとPrismaは初めてでしたが、興味を持って取り組めました。 実際のサービスのようなクローンプロジェクトだったので、実務感覚も養えて満足でした! Part 2も楽しみです! 😊

    • chanwoolee747485님의 프로필 이미지
      chanwoolee747485

      受講レビュー 2

      平均評価 5.0

      修正済み

      5

      100% 受講後に作成

      私はフロントエンド開発者になるために勉強していますが、以前ロ펀さんのsupabaseの講義を聞いて大変役立ったため、今回のクローンコーディング講義も受講することにしました。 チームプロジェクトでバックエンドの方からAPIを受け取り、Swaggerを参考にフロントコードを作成する際、常にバックエンドではどのようなロジックでデータが流れているのか気になっていましたが、今回の講義を通してその流れを直接経験することができ、本当に有益でした。 NestJS, Prismaなど初めて触れる技術も多く、難しい部分もありましたが、講師の方が実務でよく使う最新技術を分かりやすく説明してくださり、Notionにもよく整理されていたため、ついていきやすかったです。Shadcn UI, TailwindCSS, S3など様々なツールを活用してみる過程も興味深く、実務ですぐに使えるヒントやノウハウをたくさん学ぶことができました。 特に、フロントとバックエンドがどのように接続され、全体的にどのような構造で動作するのかを実際に実装してみることで、フルスタック開発への理解度が確実に高まりました。ポートフォリオとして活用できる完成度の高いプロジェクトを作成したい方や、実務志向のフルスタック開発を学びたい方に、この講義をお勧めします!

      • lopun
        知識共有者

        チャヌさん、大切な受講レビューありがとうございます! 講義が有益だったとおっしゃっていただけて、とてもやりがいがありますね 😊😊 最後まで受講していただき、大変お疲れ様でした。 幸せな一日をお過ごしください! :)

    • rach님의 프로필 이미지
      rach

      受講レビュー 6

      平均評価 5.0

      修正済み

      5

      100% 受講後に作成

      🎯フロントエンド開発者も気軽にフルスタックの流れを習得できる講座 フロントエンド開発をする中でバックエンド知識の必要性を感じ、以前「フロント開発者のためのバックエンド101」講座を受講したのですが、満足度が高かったため、今回の講座もすぐに続けて受講することにしました。 この講座は、単純な機能実装を超えて、Next.js 15, NestJS, Prisma, React Query, TailwindCSS, Cursor AI, Jotai など最新技術スタックの理論をまず押さえてくれるため、初心者でも十分に付いていける構成でした。実際のサービスをクローンしながら一つ一つ機能を実装してみると、フロントエンド開発者としてバックエンドの流れを一緒に理解したい方々にとって、非常に適した講座だと感じました。 特に印象深かった点は ✅ Prismaを活用したAPI実装とPostgreSQLベースのデータベースモデリング ✅ Swagger + OpenAPIベースの自動化されたバックエンド呼び出し構造の構築 ✅ AWS S3 + CloudFrontベースの動画ストリーミングアップロードシステムの構築など 実務ですぐに活用できるレベルの具体的な実装内容が多かった点です。 また、学習中に疑問に思ったことやフィードバックが必要な部分は、Slackチャンネルを通じて質問を残せば回答を得られるため、学習環境も非常に満足でした。 ただ残念だったのは、CKEditor関連の課題により動画の順序がスムーズでない部分があった点です。大きな流れには支障はありませんが、少し混乱しました。 👉 フロントエンドからバックエンドまで網羅するプロジェクト経験を積みたい方々に、強くお勧めする講座です。 ⭐⭐⭐⭐⭐ 実務感覚、技術スタック、クローン対象全て満足でした。

      lopunの他の講座

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

      似ている講座

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

      ¥20,954