개발 · 프로그래밍

프론트엔드

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

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

(5.0) 수강평 18개

수강생 911명

코딩먹방

Next.js ChatGPT React TypeScript TailwindCSS

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

이런 걸 배울 수 있어요

react
nextjs

이런 분들께
추천드려요!

학습 대상은
누구일까요?

Nextjs app router 에 대해서 궁금한 분
Nextjs 로 풀스택 개발을 해보고 싶은 분
open ai api 를 사용해보고 싶은 분

선수 지식,
필요할까요?

React
Typescript

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

911

명

수강생

개

수강평

개

답변

5.0

점

강의 평점

개

강의

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

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

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

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

감사합니다.

커리큘럼

전체

27개 ∙ (3시간 41분)

섹션 1. 강의 소개

1개 ∙ (6분)

1. 강의소개
06:46

섹션 2. 개발환경세팅

1개 ∙ (3분)

2. Node, vscode 설치
03:39

섹션 3. Nextjs(AppRouter) Routing

5개 ∙ (27분)

3. ** next15 설치 시 필독 **
4. Page & Layout
07:36
5. Dynamic Route, Route Group, Route Handler
09:35
6. Loading UI & Streaming
06:23
7. Error Handling
04:09

섹션 4. 프로젝트 세팅

3개 ∙ (25분)

섹션 5. 회원가입 & 로그인

5개 ∙ (56분)

섹션 6. 채팅 페이지(마크업)

5개 ∙ (48분)

섹션 7. 채팅 페이지(구현)

6개 ∙ (48분)

섹션 8. 배포

1개 ∙ (4분)

강의 게시일: 2024. 10. 10.

마지막 업데이트일: 2024. 10. 30.

수강평

전체

18개

5.0

18개의 수강평

석봉토스트
수강평 2
∙
평균 평점 4.0
2024. 12. 09.
5
33% 수강 후 작성
정보 설명, 편집, 속도 모든 것이 완벽합니다. 강의가 늘어지면 집중 잘 못하는 성격인데, 간결하면서도 부족함 없는 설명이라 집중 정말 잘됐어요. 무료 강의 감사드리고, 앞으로의 강의도 기대됩니다!
- 코딩먹방
  지식공유자
  2024. 12. 18.
  감사합니다 :)
J3SUNG
수강평 6
∙
평균 평점 5.0
2024. 12. 18.
5
100% 수강 후 작성
yoleep
수강평 3
∙
평균 평점 5.0
2024. 11. 21.
5
100% 수강 후 작성
NextJS 를 이용한 ChatGPT clone 프로젝트를 잘 보았습니다. 로그인부터 GPT API연동 DB저장까지 전체 기능을 빠짐없이 설명해 주어서 좋았습니다.
- 코딩먹방
  지식공유자
  2024. 11. 21.
  감사합니다!! :)
m K
수강평 20
∙
평균 평점 5.0
2024. 11. 18.
5
96% 수강 후 작성
짧고 알찬 강의들로 구성되어 있어 집중하기 좋았습니다. 내용이 체계적이고 유익해서 많은 것을 배울 수 있었어요. 지루할 틈 없이 핵심만 담아 주셔서 정말 감사합니다. 앞으로도 좋은 강의 기대하겠습니다! 😊
- 코딩먹방
  지식공유자
  2024. 11. 19.
  감사합니다 :)
이현종
수강평 2
∙
평균 평점 5.0
2024. 11. 27.
5
48% 수강 후 작성
Nextjs에서 몰랐던 많은 정보를 얻고갑니다. 딱 하나 아쉬운점이 있다면 강의속도가 1배속임에도 불구하고 너무 빠릅니다 ㅠ 설명도 빨리 지나가는 느낌이라 몇십번씩 되감기 하면서 들었네요 ㅎㅎ 그래도 그만큼 필요한 말씀만 강의에 담겨있어 좋았습니다
- 코딩먹방
  지식공유자
  2024. 11. 29.
  다음에 영상 제작할 때는 속도를 좀 줄여보도록 할게요!! 피드백 감사합니다. ㅎㅎ

비슷한 강의

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

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

gemini, HTML/CSS, TailwindCSS

AI로 기획부터 개발까지! LLM 주도 Next.js 쇼핑몰 제작

ludgi

v0, cursor AI 및 각종 LLM과 함께 PRD부터 AI 상품 추천까지! 실전 프로젝트로 Next.js 쇼핑몰을 완성하세요

초급

nextjs, ChatGPT, LLM

Chat GPT, DALL-E로 배우는 생성형 AI의 핵심원리

SKm&service

지금은 바야흐로 생성형 AI의 시대! 단순히 최신 기술을 사용하는 것 뿐만 아니라 핵심원리를 파악해 생성형 AI를 나의 일상에 활용할 수 있는 지식과 경험을 습득해 보세요!

초급

openai, 인공지능(AI), ChatGPT

손에 익는 Next.js - 블로그 만들기

하조은

Next.js로 개인 블로그를 만들며 Next.js를 손에 익혀봐요!

초급

Next.js, React, 블로그

OpenAI API 를 이용한 생성형 AI 프로그램 개발 - 2025 최신판

YoungJea Oh

OpenAI API를 사용하여 생성형 AI 모델을 활용하는 방법을 배우는 과정입니다. 이 강의에서는 API의 기본 사용법, 다양한 언어 모델의 활용, 실제 프로그래밍 예제 및 응용 사례를 통해 생성형 AI의 실질적인 적용 방법을 다룹니다.

초급

Python, NLP, ChatGPT

타입스크립트 입문 - 기초부터 실전까지

장기효(캡틴판교)

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

초급

TypeScript, ES6, JavaScript

공식으로 배우는 챗GPT 프롬프트 만들기 사용법 강의

감자나라ai

챗GPT의 프롬프트를 만드는 "공식"을 알려드립니다. 이 공식에만 적용하면 좋은 프롬프트가 쏟아져 나옵니다.

초급

인공지능(AI), ChatGPT, 프롬프트엔지니어링

ChatGPT API를 이용한 인공지능 웹서비스 개발

자바전문가그룹

OpenAI사의 API를 이용해서 인공지능 웹서비스를 개발하는 방법을 설명합니다.

초급

ChatGPT, 인공지능(AI), openAI API

아바타 커뮤니티앱 만들기 (React Native)

Kyo

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

초급

React Native, TypeScript, react-query

[LLM 101] 나만의 sLLM 만들기; LLaMA SFT 튜닝하기 (feat. 2시간속성코스)

꿈꾸는범블비

LLM을 위해 필요한 기초지식부터 실전에서 쓰일법한 팁까지 핵심적인 내용위주로 빠르게 현직자가 전달합니다!

초급

NLP, ChatGPT, LLM

챗 GPT를 활용한 파이썬 프로그래밍

쌤즈(SSAMZ)

파이썬의 기본 문법과 인기 있는 라이브러리를 활용 챗GPT를 활용한 파이썬 문법과 라이브러리 코드 자동 생성

초급

Python, ChatGPT, 웹 크롤링

ChatGPT 100% 활용하여 배우는 파이썬 네트워크 프로그래밍 A to Z

고카

파이썬과 ChatGPT를 100% 활용하여 네트워크 프로그래밍을 처음부터 배웁니다. 지루한 개념 설명보다는 실습을 통해 수강생들이 직접 네트워크 코드를 작성하고, 작성한 프로그램이 어떻게 동작하는지 직접 확인하는 데 초점을 맞추고 있습니다. 기본적인 네트워크 실습부터 실무에서 적용 가능한 네트워크 기술까지 습득할 수 있으며, 다양한 프로토콜과 도구를 다루는 실습을 통해 깊이 있는 이해와 실력을 쌓을 수 있습니다. 또한, ChatGPT를 활용함으로써, 수강생들은 어려움과 지루함을 느끼지 않고, 기억에 오래 남는 학습 경험을 할 수 있습니다.

초급

Python, ChatGPT, 네트워크

ChatGPT 질문법, 똑똑한 사람은 어떻게 생각하고 질문하는가

SKm&service

[똑똑한 사람은 어떻게 생각하고 질문하는가] 저자가 쉽게 풀어주는 강의! 생성형 AI의 시대, 제대로 된 질문이 정답보다 중요합니다.

초급

ChatGPT, 업무 생산성, 프롬프트엔지니어링

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

AI 활용과 컴포넌트 중심 UI 제작으로 배우는 실무형 웹 UI 개발, 디자이너+개발자 필수 코스!

초급

JavaScript, vanilla-javascript, frontend

Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)

짐코딩

최신 Next.js v15 App Router를 학습하며 Notion 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 Cursor AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.

초급

Next.js, CursorAI, React

리액트 최신버전 공식문서 파먹기

더코딩클럽

현업에서 일해야만 알 수 있는 React의 특별한 기술이 있는게 아닙니다. 기본기로 충분합니다. React 공식문서를 토대로 설명 드립니다.

초급

React, React Context, react.js

데이터분석에 ChatGPT 강림

제주코딩베이스캠프

Chat GPT로 누구나 데이터 분석을 배울수 있어요. 다양한 분석 실습을 통한 실무 적용 방법에 대해 알 수 있어요. (꼭!! ChatGPT 유료 버전이 필요합니다!)

초급

ChatGPT, 데이터 리터러시, 빅데이터

ChatGPT 실무에 100% 활용하기

longvacation

불필요한 내용은 전부 제외하고, ChatGPT 100% 활용법을 "핵심"만 알려드립니다. 잘 활용한다면 MD, 마케팅 업무를 10배 빠르게 하실 수 있을 거예요.

입문

ChatGPT, Python, 웹 크롤링

누구나 쉽게 만드는 PPT 상세페이지 끝장 템플릿 200 (원클릭 상페200장 포함)

이희정

컴맹도 OK! 상세페이지 하나당 100~200 만원씩 주고 만들었던 여러분을 위한 강의. 이제 파워포인트와 노트북만 있으면 초고가 상페를 스스로 만들 수 있습니다. 이미지만 바꿔 쓰면 되는 PPT 템플릿 200개 까지 주는 강의~ 전문가나 가능한 이커머스 디자인 원본과 GIF 콘텐츠 원본 150종까지 완벽한 구성! 이제 외주 비용 싸악 아끼세요! 🔴강의 오픈기념 얼리버드 할인 기간입니다. 얼리버드가 마감되면 수강료가 원래 가격으로 올라갈 예정입니다.

입문

콘텐츠 마케팅, PowerPoint, 콘텐츠 제작

치킨 + 맥주값으로 SpringAI를 사용해 AI서버 만들어보기 (With ChatGPT)

Neo

SpringAI를 사용해 ChatGPT API를 간편하게 연동하고 프롬포트 앤지니어링을 통해 AI 서버를 개발하는 방법을 배웁니다!

입문

ChatGPT, Spring Boot, Kotlin

무료

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

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

이런 걸 배울 수 있어요