강의

멘토링

로드맵

BEST
Programming

/

Full-stack

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

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

  • lopun
실습 중심
인프런
AWS
Docker
Next.js
NestJS
Prisma

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

こんなことが学べます

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

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

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

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

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

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

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

🚀

国内初!

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

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

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

🔥 Part 2 リリース記念アーリーバード割引中 🔥

👉Part 2へ直行👈


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



強力なフルスタック組み合わせである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へ自然に繋がるようにカリキュラムを設計したので、二つのパートを連続して受講すれば設計から運営までフルスタック全過程を完全に体験することができます。

🚀

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

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


🥇国内初!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呼び出しも自動化します。

🧑‍🎓

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


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

[[SPAN_1]]2⃣[[/SPAN_1]] 서비스에 필요한 기능을 [[SPAN_2]][[STRONG_3]]End-to-End[[/STRONG_3]][[/SPAN_2]]로 [[STRONG_4]]구현하는 힘[[/STRONG_4]]이 생겨요.

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

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

[[SPAN_1]]5⃣[[/SPAN_1]] “[[SPAN_2]][[STRONG_3]]내가 원하는 서비스[[/STRONG_3]][[/SPAN_2]] 하나쯤은 직접 만들 수 있다!”는 [[STRONG_4]]근거있는 자신감[[/STRONG_4]]이 생겨요.

🧰

講義構成

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に対する理解

こんにちは
です。

3,558

受講生

197

受講レビュー

64

回答

4.9

講座評価

6

講座

🚀 “핫한 스택으로 실전 서비스를 만드는 과정을 숨김없이 보여드립니다.”

이론보다는 프로젝트 위주의 실무 강의로 현업에 바로 도움이 될 수 있는 내용을 제공합니다.

  • (현) 네카라쿠배 재직

  • (현) 7년차 풀스택 개발

  • (강의) 스파르타 코딩클럽 강사

  • (교육) 한국과학기술원(KAIST) 전산학과 졸업

カリキュラム

全体

55件 ∙ (14時間 42分)

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

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

受講レビュー

全体

31件

4.8

31件の受講レビュー

  • nochikk님의 프로필 이미지
    nochikk

    受講レビュー 9

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

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

    • lopun
      知識共有者

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

  • upustream6450님의 프로필 이미지
    upustream6450

    受講レビュー 3

    平均評価 5.0

    5

    71% 受講後に作成

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

    • lopun
      知識共有者

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

  • 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関連の課題により動画の順序がスムーズでない部分があった点です。大きな流れには支障はありませんが、少し混乱しました。 👉 フロントエンドからバックエンドまで網羅するプロジェクト経験を積みたい方々に、強くお勧めする講座です。 ⭐⭐⭐⭐⭐ 実務感覚、技術スタック、クローン対象全て満足でした。

    • tomorrowcho님의 프로필 이미지
      tomorrowcho

      受講レビュー 15

      平均評価 4.7

      修正済み

      5

      100% 受講後に作成

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

      ¥19,795

      lopunの他の講座

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

      似ている講座

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