강의

멘토링

로드맵

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件の受講レビュー

  • 치현님의 프로필 이미지
    치현

    受講レビュー 9

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    프론트엔드 개발을 하고 있고, 백엔드도 두드려보고 싶었던 상태인데, 로펀님의 Next.js 풀스택 강의를 좋게 들었던 기억에 수강하게 되었습니다. 개인적으로 인프런같은사이트를 만들어보고 싶어서, 인프런의 강의데이터들을 크롤링해도 되냐고 공식적으로 문의했다가 반려당하기도 했었는데, 제 바램을 이번 강의로 이룰 수 있었던 것 같습니다. Nest.js를 처음 접하는 사람으로서, 프로젝트를 진행하면 이런 식으로 구성하면 되겠다는 감을 잡을 수 있는 강의었고, "인프런 프로덕트 둘러보기"라는 기획 부분도 포함되어있어 아키텍쳐나 구조를 고민해볼 수 있었던 것 같습니다. Part1에는 배포가 포함되어 있지 않아서 다소 아쉽지만, 빨리 Part2가 나온다면 배포까지 곁들인 완성된 포트폴리오를 가져가고 싶네요 ㅎㅎ

    • 로펀
      知識共有者

      치현님, 정성스러운 수강평 정말 감사드립니다! 인프런 같은 사이트를 직접 만들어보고 싶다는 바람을 이번 강의로 조금이나마 실현하셨다니 기쁩니다 ㅎㅎ Nest.js를 처음 접하셨다고 하셨지만, 구조를 이해하고 감을 잡으셨다니 강의를 만든 입장에서도 뿌듯하네요! 말씀주신 대로 Part1에는 배포가 포함되어 있지 않아 아쉬움이 있으셨을 것 같은데요, Part2에 배포와 함께 더욱 완성도 높은 포트폴리오를 구성하실 수 있도록 최대한 잘 준비해보겠습니다. 기대해 주세요! 😊 다시 한 번 소중한 수강평 감사드립니다!

  • 우푸님의 프로필 이미지
    우푸

    受講レビュー 3

    平均評価 5.0

    5

    71% 受講後に作成

    Part1과 Part2를 함께 구매했습니다. 실무자로써 현재 회사에 도입할 기술력을 모색 중 nest와 next 프레임워크를 사용한 기술이 필요하여 도입하려 합니다. 강의를 통하여 여러 기술들을 알게되고 접목시키고 있습니다. 흐름도 좋고, 사용하는 라이브러리들이나 어떻게든 되는 프로젝트가 아니라, 효율적으로 개발/관리/운영에 직접적인 영향을 주는 구성 이라고 생각하여 강의는 만점 중 백만점 입니다. 좋은 강의에 감사드립니다. 근데 선생님... 선생님이 알고 계시는 것을 저희 수강생들은 모르기 때문에 배우고싶기에 강의를 듣고 있지요... 이 강의는 초급이 아니옵니다... 수강하시는 대부분은 아마 공식문서를 보아도 "도대체 내가 뭘 봐야 하나?" 라는 생각을 해요.. 잘 모르니까요...ㅎ 갑자기 "이 부분이 이 부분을 대체하니까 지우겠습니다." 라는 말씀을 하시면 수강생 대부분은 이 부분과 이 부분이 도대체 뭔지를 한참 생각해야 하고, 찾아내는 것에 굉장히 힘듬을 느끼게 되는 거 같아요.. 선생님의 강의가 좋습니다. 제가 필요로 하는 것, 제가 원하는 것들을 전부 구성해주고 계세요. 조.. 조금만, 아주 조금만요. 아직 혼자 숨쉬는 것도 잘 못하는 "못난 감자"들이 수강하고 있다고 생각해주시면 감사하겠습니다.

    • 로펀
      知識共有者

      좋은 의견 남겨주셔서 감사합니다! 말씀주신 내용을 반영해서 초보자 분들도 비교적 더 쉽게 따라오실 수 있도록 노력하겠습니다 :) 궁금하신 점이나 막히시는 부분이 있다면 언제든지 슬랙으로 문의 부탁드립니다. 완강까지 화이팅입니다!

  • 찬우 이님의 프로필 이미지
    찬우 이

    受講レビュー 2

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    저는 프론트엔드 개발자가 되기 위해 공부 중인데, 이전에 로펀님의 supabase 강의를 듣고 많은 도움이 되어 이번 클론코딩 강의도 수강하게 되었습니다. 팀 프로젝트를 할 때 백엔드 분께 API를 받아 스웨거를 참고해 프론트 코드를 작성하면서, 항상 백엔드에서는 어떤 로직으로 데이터가 흘러가는지 궁금했는데, 이번 강의를 통해 그 흐름을 직접 경험해볼 수 있어서 정말 유익했습니다. NestJS, Prisma 등 처음 접하는 기술도 많아 어려운 부분이 있었지만, 강사님이 실무에서 자주 쓰는 최신 기술들을 잘 설명해주시고 노션에도 정리가 잘 되어 있어 따라가기가 수월했습니다. Shadcn UI, TailwindCSS, S3 등 여러 도구를 활용해보는 과정도 흥미로웠고, 실무에서 바로 쓸 수 있는 팁과 노하우를 많이 배울 수 있었습니다. 특히, 프론트와 백엔드가 어떻게 연결되고 전체적으로 어떤 구조로 동작하는지 직접 구현해보면서 풀스택 개발에 대한 이해도가 확실히 높아졌습니다. 포트폴리오로 활용할 만한 완성도 높은 프로젝트를 만들고 싶은 분이나, 실무 지향적인 풀스택 개발을 배우고 싶은 분들에게 이 강의를 추천합니다!

    • 로펀
      知識共有者

      소중한 수강평 감사합니다 찬우님! 강의가 유익했다고 해주시니 많이 보람차네요 ㅎㅎ 끝까지 수강하시느라 너무 수고 많으셨습니다. 행복한 하루 보내시길 바랍니다! :)

  • 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 관련 이슈로 인해 영상 순서가 매끄럽지 못한 부분이 있었던 점입니다. 큰 흐름에는 지장이 없지만, 조금 헷갈렸습니다. 👉 프론트엔드에서 백엔드까지 아우르는 프로젝트 경험을 쌓고 싶은 분들에게 적극 추천드리는 강의입니다. ⭐⭐⭐⭐⭐ 실무 감각, 기술 스택, 클론 대상 모두 만족스러웠습니다.

    • 조내일님의 프로필 이미지
      조내일

      受講レビュー 15

      平均評価 4.7

      修正済み

      5

      100% 受講後に作成

      Next.js 기반이라 익숙하게 시작할 수 있었고, NestJS랑 Prisma는 처음이었지만 흥미롭게 다뤄볼 수 있었어요. 실제 서비스 같은 클론 프로젝트라 실무 감각도 키울 수 있어서 만족스러웠어요! Part 2도 기대됩니당! 😊

      • 로펀
        知識共有者

        소중한 수강평 감사합니다 조내일님! Next.js에 익숙한 분들이라면 시작이 조금 더 수월하셨을 텐데, NestJS와 Prisma도 잘 따라와 주셔서 다행이에요 ㅎㅎ 클론 프로젝트가 실제 흐름을 익히는 데 도움이 되었다니 뿌듯합니다. Part 2도 더 알차게 준비 중이니 기대해주세요 😊

    ¥19,795

    lopunの他の講座

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

    似ている講座

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