Inflearn brand logo image
Inflearn brand logo image
개발 · 프로그래밍

/

프론트엔드

Next.js App router 기반 Chat GPT 만들기

Nextjs 14 버전 App router 과 vercel 의 ai/sdk 를 활용하여 chat gpt와 같은 ai chatbot 서비스를 만들어봅니다.

(5.0) 수강평 23개

수강생 969명

Next.jsChatGPTReactTypeScriptTailwindCSS
Thumbnail

초급자를 위해 준비한
[프론트엔드, AI · ChatGPT 활용] 강의입니다.

이런 걸 배울 수 있어요

  • react

  • nextjs

Nextjs App Router 기반 Chat GPT 만들기

이번 강의로 배울 수 있는 것들

  • Nextjs 14 버전의 App Router 기반의 풀스택 개발하는 법을 배워요

  • shadcn-ui 와 tailwind-css 로 컴포넌트 스타일링 하는 법을 배워요

  • zustand를 사용해서 전역 상태를 관리하는 법을 배워요


이런 분들께 추천해요

React와 Next 의 Page Router만 사용해본 분들

Next14버전의 App router 방식을 배울 수 있어요.

Nextjs 로 풀스택 개발을

하고 싶은 분

프론트뿐만 아니라 Neon 서비스와 Drizzle ORM을 활용해 풀스택 개발을 할 수 있어요.

Chat GPT와 같은 ai chatbot 서비스에 관심이 있으신 분

Vercel 의 ai sdk를 사용해 open ai API를 사용해 볼 수 있어요.

수강 후에는

  • Next App router 방식의 풀스택 개발에 대해 감을 잡으실 수 있어요.

  • tailwind-css 로 스타일링을 할 수 있어요

  • Chat gpt와 같은 ai 기반의 chatbot 서비스를 쉽게 만들 수 있어요.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Nextjs app router 에 대해서 궁금한 분

  • Nextjs 로 풀스택 개발을 해보고 싶은 분

  • open ai api 를 사용해보고 싶은 분

선수 지식,
필요할까요?

  • React

  • Typescript

안녕하세요
코딩먹방입니다.

969

명

수강생

23

개

수강평

7

개

답변

5.0

점

강의 평점

1

개

강의

안녕하세요 프론트엔드 개발자 코딩먹방입니다.

저는 약 3년동안 현업에서 개발을 했었고 현재는 새로운 기술들을 학습하며

개인적으로 개발을 진행하고 있습니다.

그리고 저는 그런 과정에서 습득한 것들을 공유하고자 합니다.

감사합니다.

더보기

커리큘럼

전체

27개 ∙ (3시간 41분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

23개

5.0

23개의 수강평

  • cjswoxoddl212720님의 프로필 이미지
    cjswoxoddl212720

    수강평 2

    ∙

    평균 평점 5.0

    5

    48% 수강 후 작성

    Nextjsから知らなかった多くの情報を入手していきます。ただ一つの物足りなさがあれば講義速度が1倍速であるにもかかわらず早すぎますㅠ説明も早く過ぎる感じなので何十回も巻き戻しながら聞きましたねㅎ

    • eatcoding
      지식공유자

      次に映像制作するときは、速度を少し減らしてみましょう！フィードバックありがとうございます。 ㅎㅎ

  • wwwkimminja1430님의 프로필 이미지
    wwwkimminja1430

    수강평 20

    ∙

    평균 평점 5.0

    5

    96% 수강 후 작성

    短くて充実した講義で構成されており、集中できてよかったです。 内容が体系的で有益なので、たくさん学ぶことができました。 退屈する隙間なくコアだけを込めていただきありがとうございます。 これからも良い講義を楽しみにしています！ 😊

    • eatcoding
      지식공유자

      ありがとう:)

  • toast님의 프로필 이미지
    toast

    수강평 2

    ∙

    평균 평점 4.0

    5

    33% 수강 후 작성

    情報の説明、編集、速度、すべてが完璧です。講義が長くなると集中力が低下する性格ですが、簡潔でありながら不足のない説明なので、本当に集中できました。無料の講義に感謝し、今後の講義も期待しています!

    • eatcoding
      지식공유자

      ありがとうございます :)

  • j3sung님의 프로필 이미지
    j3sung

    수강평 6

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    • yoleep7926님의 프로필 이미지
      yoleep7926

      수강평 3

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      NextJSを使ったChatGPT cloneプロジェクトをよく見ました。ログインからGPT API連動DBの保存まで、全体の機能を欠かさず説明してくれてよかったです。

      • eatcoding
        지식공유자

        ありがとうございます！ :)

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!

    2024年 ChatGPTを完璧にマスターする강의 썸네일

    2024年 ChatGPTを完璧にマスターする

    forestsoft

    YouTube再生回数43万回を記録したGPT講義！ 2024年リニューアルされたオンライン講義で会いましょう！

    초급

    초급

    ChatGPT, perplexity

    ChatGPT使用ガイド：コアプロンプトエンジニアリング강의 썸네일

    ChatGPT使用ガイド：コアプロンプトエンジニアリング

    baekoblin

    ChatGPTをうまく活用したい人のための迅速で重要なストローク講義！ 早く学びましょう！

    입문

    입문

    ChatGPT, prompt engineering

    公式に学ぶチャットGPTプロンプトを作る使い方講義강의 썸네일

    公式に学ぶチャットGPTプロンプトを作る使い方講義

    potatoai

    チャットGPTのプロンプトを作成する＆quot;公式＆quot;をお知らせします。この式にのみ適用すると、良いプロンプトが出てきます。

    초급

    초급

    AI, ChatGPT, prompt engineering

    Chat GPTでExcel関数とマクロ（VBAコード）を活用する강의 썸네일

    Chat GPTでExcel関数とマクロ（VBAコード）を活用する

    dmsgml1030

    Excelの作業は複雑で時間がかかりますか？ 事務業務に必須のエクセル [VOD] Chat GPTを利用したExcel関数とマクロ（VBAコード） 会いましょう。 皆さんのエクセル作業に心強い秘書になってくれるでしょう。

    초급

    초급

    Excel, functions, ChatGPT

    3時間で完成するCursor完璧ガイド강의 썸네일

    3時間で完成するCursor完璧ガイド

    toycrane

    Agentモード、MCP、PRD作成、Custom Chat Modeまで！ 新しくなったCursorの機能を見てみましょう

    초급

    초급

    Next.js, React, cursor

    AI時代、今や現場が開発する！CursorとChatGPTで始めるバイブコーディング강의 썸네일

    AI時代、今や現場が開発する！CursorとChatGPTで始めるバイブコーディング

    mindcompass

    開発チームに気を遣わず、もう私が直接作る！本講座は、企画、マーケティング、営業など実務担当者が開発者の手を借りずにAIツールを活用し、Webサービスの主要機能を直接実装できるよう支援します。

    초급

    초급

    Python, FastAPI, cursor

    手で熟すNext.js - 公式ドキュメントを見る강의 썸네일

    手で熟すNext.js - 公式ドキュメントを見る

    hajoeun

    公式ドキュメントで最新のNext.jsを学びます。トラブルシューティングのツールとして、Next.jsが必要な理由を理解できます！

    초급

    초급

    Next.js, next.js13, React

    AIで企画から開発まで！LLM主導のNext.jsショッピングモール製作강의 썸네일

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

    ludgi

    v0、Cursor AI、そして各種LLMとともに、PRDからAI商品レコメンドまで！実践プロジェクトでNext.jsショッピングモールを完成させましょう

    초급

    초급

    nextjs, ChatGPT, LLM

    React Native with Expo: 제로초からしっかり学ぶ강의 썸네일

    React Native with Expo: 제로초からしっかり学ぶ

    zerocho

    ウェブ開発者が(特にReact開発者なら)本当に簡単にアプリをリリースできる時代になりました。 Expoを使えばさらに速くAndroidとiOSの両方のアプリをリリースできます。 Expoを通じて迅速にアプリまでリリースできる開発者になりましょう。

    초급

    초급

    React, React Native, Hybrid App

    [初中級] アバターコミュニティアプリ作成 (React Native Expo)강의 썸네일

    [初中級] アバターコミュニティアプリ作成 (React Native Expo)

    koy

    React Nativeでアバターベースのコミュニティアプリを開発します。記事作成だけでなく、コメント・返信、いいね、投票、アバター生成等、完成度の高いコミュニティアプリの構築過程を学べます。

    초급

    초급

    React Native, TypeScript, react-query

    チャットGPTを活用したPythonプログラミング강의 썸네일

    チャットGPTを活用したPythonプログラミング

    admin0013

    Pythonの基本的な文法と人気のライブラリを活用 チャットGPTを利用したPython文法とライブラリコードの自動生成

    초급

    초급

    Python, ChatGPT, Web Crawling

    Python Institute 資格証を通じて学ぶ Python 基礎 (ミニプロジェクト: Chat GPT を活用したリアルタイム韓国語/英語翻訳機の作成)강의 썸네일

    Python Institute 資格証を通じて学ぶ Python 基礎 (ミニプロジェクト: Chat GPT を活用したリアルタイム韓国語/英語翻訳機の作成)

    jeongsuk

    プログラミング初心者向けのPython講座！Python InstituteのカリキュラムをベースにPython資格(PCEP、PCAP)取得OK！PythonでChatGPTを活用する方法もおまけ！

    입문

    입문

    Python, ChatGPT

    chatGPTとの実践データ科学강의 썸네일

    chatGPTとの実践データ科学

    cojette

    データ分析プロセスの全プロセスに、chatGPTと生成AIを使用してより簡単にアクセスできます。データ分析プロセスをより簡単に理解しながら、AIをデータ科学実務に活用する方法も同様に習得できます。

    초급

    초급

    ChatGPT, Data literacy, Big Data

    プロンプトエンジニアリング강의 썸네일

    プロンプトエンジニアリング

    bhban

    <プロンプトエンジニアリング> 著者直伝です。 ChatGPT、Bing、Bard、ハイパークローバXなどを自由自在に使ってみましょう。

    입문

    입문

    ChatGPT, prompt engineering

    ChatGPTの質問法、スマートな人はどう考えて質問するのか강의 썸네일

    ChatGPTの質問法、スマートな人はどう考えて質問するのか

    skmns

    【スマートな人はどう考えて質問するか】 著者が簡単に解く講義！ 生成型AIの時代、きちんとした質問が正解より重要です。

    초급

    초급

    ChatGPT, Business Productivity, prompt engineering

    チャットGPTを活用して企画書、提案書を作成する강의 썸네일

    チャットGPTを活用して企画書、提案書を作成する

    openlearninglab

    企画の魔法使い、チャットGPTとともに、革新的な事業企画書作成法を紹介します！

    입문

    입문

    ChatGPT, Planning Document, Communication

    公式文書で学ぶ本番タイプスクリプト강의 썸네일

    公式文書で学ぶ本番タイプスクリプト

    sowhatcoding

    タイプスクリプトを正しく理解するには、公式文書を一度見てください。 文書の重要な部分だけがコックを拾い、分かりやすく伝えます。 実戦に必要な内容も一緒にお知らせする講義です！

    입문

    입문

    TypeScript, JavaScript, ES6

    Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

    Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

    codecamp

    Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

    초급

    초급

    React, Next.js, expo

    企画者のためのチャットGPTの活用法 - あなたの迅速な退勤と年俸の向上のために！강의 썸네일

    企画者のためのチャットGPTの活用法 - あなたの迅速な退勤と年俸の向上のために！

    openlearninglab

    チャットGPTをきちんと活用して企画業務の助手を1人雇ってみてください。皆さんの退勤時間が早くなり、高い成果を通じて年俸向上の喜びを味わえるでしょう。

    입문

    입문

    ChatGPT, Planning Document, Content Planning

    무료