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 概念 (バックエンドとのデータ通信理解)

こんにちは
です。

444

受講生

17

受講レビュー

8

回答

4.2

講座評価

7

講座

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


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

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

 

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


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

 

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

カリキュラム

全体

47件 ∙ (7時間 3分)

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

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

受講レビュー

全体

3件

4.3

3件の受講レビュー

  • chuing님의 프로필 이미지
    chuing

    受講レビュー 12

    平均評価 4.8

    5

    62% 受講後に作成

    Tôi đang xem bài giảng của ludgi lần thứ hai. Đây cũng là lần thứ hai tôi viết đánh giá. Trước mắt, tôi tin tưởng và xem một cách biết ơn. Có lẽ nếu xem xét giá cả của bài giảng và những thứ khác, có vẻ như anh ấy đăng tải bài giảng như một sở thích hoặc để lưu lại thôi.

    • ludgi
      知識共有者

      Cảm ơn bạn đã mua bài giảng lần này ạ! 😊😊 Để khác biệt một chút so với những người khác, tôi định hướng theo concept dùng để tham khảo ạ!

  • pure025147님의 프로필 이미지
    pure025147

    受講レビュー 3

    平均評価 4.0

    3

    100% 受講後に作成

    • myvisual8764님의 프로필 이미지
      myvisual8764

      受講レビュー 8

      平均評価 5.0

      5

      62% 受講後に作成

      • ludgi
        知識共有者

        Cảm ơn bạn vì những đánh giá quý giá!

    ¥2,018

    ludgiの他の講座

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

    似ている講座

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