Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

AIで企画から開発まで!LLM主導Next.jsショッピングモール制作

v0、cursor AIおよび各種LLMと共に、PRDからAI商品推薦まで!実戦プロジェクトでNext.jsショッピングモールを完成させましょう

  • ludgi
인공지능
실습 중심
ChatGPT
llm
nextjs
LLM
Prisma
Docker

こんなことが学べます

  • Next.jsベース ショッピングモール開発

  • v0を活用したPRD作成及び開発自動化

  • PostgreSQL + PrismaでDB設計

  • AI商品推薦システム構築 (エンべディング活用)

  • トスぺイメンツ 決済システム連携

  • Next.jsを用いた管理者ページ実装

  • DockerとNginxを活用したプロジェクト展開

  • VPNとポートフォワーディングを活用したローカルデプロイ基礎

🛍 AI + Next.jsでショッピングモールを開発するための最適な方法!

このレッスンでは、ChatGPTと各種LLMを活用してPRD(製品要件文書)を自動生成し、v0を使用してデザインとプロジェクトドラフトを構成し、 nextjsとPrisma、PostgreSQLを使用してショッピングモールを構築する実践開発プロセスを学びます。

さらに、 AI埋め込みを活用した商品推薦システムの実装Dockerベースの環境設定VPNを活用したローカル展開方法まで経験することができ、単純なウェブサイト制作を超え、AIと最新のWeb技術を適用した実務級プロジェクト開発を目指します。

セクション(2)PRDの作成 - AIと一緒に必要な要件を定義する

📌ChatGPTを活用して製品要件文書(PRD)を自動生成および修正する方法を学びます。

セクション (3) データベース設計 – PostgreSQL + Prisma

📌ChatGPTを活用して製品要件文書(PRD)を自動生成および修正する方法を学びます。

セクション(4)V0プロジェクト - 初期プロトタイプの作成

📌 v0を活用してプロジェクトデザインを構築し、Next.jsに基づいて初期プロトタイプをすばやく構築する方法を学びます。

セクション(5)ログインとログアウト

📌会員登録、ログイン、ログアウト機能を実装し、ユーザーエクスペリエンスを向上させるためにSonnerを活用した通知システムを適用します。

セクション(6) Presigned URL

📌 Presigned URLを活用してファイルを安全にアップロードし、S3などのストレージサービスと連携する方法を学びます。

セクション(7)商品データの一括アップロード

📌 Presigned URLとChatGPT埋め込みを活用して商品データを効果的にアップロードし、DBスキーマを拡張する方法を学びます。

セクション(8)MVPプロジェクト - ショッピングモール基本機能の開発

📌商品リスト、詳細ページ、人気商品、新商品、インフィニットスクロールなどショッピングモールの中核機能を実装します。

セクション(9) 管理者ページ機能の実装

📌 Next.js Middlewareを利用したアクセス制御、商品登録、AI埋め込み機能などの管理ページを構築します。

セクション(10)プロジェクトの展開

📌 VPNとNginxを利用したローカルサーバーの展開、ポート転送設定、SSLの適用など、実用的な展開戦略をカバーします

練習環境

  • オペレーティングシステムとバージョン(OS): Windows、macOS、Linux(Ubuntuを含む)で実践可能

  • 使用ツール:

    • Next.js開発のためのNode.js(最新のLTSバージョンを推奨)

    • データベース管理のためのPostgreSQLPrisma

    • プロジェクトの展開と運用のためのDocker&Nginx

    • AI 埋め込みと自動化のためのChatGPT API

  • PC仕様:

    • 最小8 GB RAM 、推奨16 GB以上

    • CPU:4コア以上(開発とDockerコンテナの実行を考慮)

    • ストレージ: SSD推奨(データベースとプロジェクトのビルド速度の最適化)

    • GPU(オプション): AIエンベディング機能をローカルで実行するにはNVIDIA GPUとCUDAのサポートが必要

📚学習資料

  • 提供方法:
    講義プラットフォームの学習資料アップロード機能を通じて提供
    必要に応じてGitHubリンクを追加する(コードと実践資料)

  • 含まれる材料:
    GitHubソースコード– プロジェクトコードとサンプル例を提供する
    Docker設定ファイル- 開発および展開環境の構成例
    追加参考資料へのリンク– 公式文書と関連ブログ


📌選手の知識と注意事項

  • 必要な選手の知識:
    JavaScriptと基本的なTypeScript文法(Next.js開発のため)
    ✅Next.js基本概念(ページルーティング、APIルートなど)
    SQLとデータベースの基礎(PostgreSQLとPrismaを使用)
    RESTful API コンセプト(データ通信について)


こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.jsとAIを活用したショッピングモール開発に興味がある人

  • ChatGPTを活用した実戦プロジェクトを経験したい開発者

  • AIを活用した商品推薦システムを構築したい人

  • PostgreSQLとPrismaを活用したDB設計を学びたい人

  • ローカル環境でVPNを活用したデプロイ方法を習得したい人

  • ChatGPTを活用してPRD(製品要件定義書)を作成したい開発者

  • v0を利用して素早くプロジェクトの草案を作ってみたい人

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

  • JavaScript および 基本的な TypeScript 文法

  • 基本的な Next.js 概念 (ページルーティング、API Routes など)

  • SQL および データベースの基礎 (PostgreSQLとPrismaを使用)

  • RESTful API または GraphQL 概念 (バックエンドとのデータ通信理解)

こんにちは
です。

443

受講生

17

受講レビュー

8

回答

4.2

講座評価

7

講座

안녕하세요, 주식회사 럿지의 대표입니다.


저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

 

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.


특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

 

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

カリキュラム

全体

47件 ∙ (7時間 3分)

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

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

3件

4.3

3件の受講レビュー

  • 동해바다님의 프로필 이미지
    동해바다

    受講レビュー 12

    平均評価 4.8

    5

    62% 受講後に作成

    ludgi님 강의는 두번째 보고 있습니다. 수강평도 두번째입니다. 저는 일단 감사히 믿고 보고 있습니다. 아마 강의 가격이랑.. 이거저것 보면.. 강의는 취미나 기록 정도로 올리시는거 같기도 합니다..

    • ludgi
      知識共有者

      이번 강의 구입도 감사합니다.!ㅎㅎ 다른분들과 조금 차별을 두기위해 저는 레퍼런스용 컨셉으로 갈듯합니다.!

  • pure02님의 프로필 이미지
    pure02

    受講レビュー 3

    平均評価 4.0

    3

    100% 受講後に作成

    • 이용구님의 프로필 이미지
      이용구

      受講レビュー 8

      平均評価 5.0

      5

      62% 受講後に作成

      • ludgi
        知識共有者

        소중한 수강평 감사합니다!

    ¥2,008

    ludgiの他の講座

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

    似ている講座

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