Programming

Front-end

Tạo Chat GPT dựa trên bộ định tuyến ứng dụng Next.js

Sử dụng Bộ định tuyến ứng dụng phiên bản Nextjs 14 và AI/SDK của Vercel Hãy tạo một dịch vụ chatbot AI như chat gpt.

(5.0) 25 đánh giá

992 học viên

eatcoding

Next.js

ChatGPT

React

TypeScript

TailwindCSS

Dịch cái này sang tiếng Việt

phản ứng
nextjs

Khuyến nghị cho
những người này!

Khóa học này dành cho ai?

Bất cứ ai tò mò về bộ định tuyến ứng dụng Nextjs
Bất kỳ ai muốn phát triển toàn diện với Nextjs
Bất cứ ai muốn sử dụng API AI mở

Cần biết trước khi bắt đầu?

Phản ứng
Bản đánh máy

Xin chào
Đây là

992

Học viên

Đánh giá

Trả lời

5.0

Xếp hạng

Khóa học

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

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

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

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

감사합니다.

Chương trình giảng dạy

Tất cả

27 bài giảng ∙ (3giờ 41phút)

Phần 1. Giới thiệu

1 bài giảng ∙ (6phút)

1. Giới thiệu khóa học
06:46

Phần 2. Thiết lập môi trường phát triển

1 bài giảng ∙ (3phút)

2. Cài đặt Node, vscode
03:39

Phần 3. Nextjs(AppRouter) Định tuyến

5 bài giảng ∙ (27phút)

3. ** Đọc kỹ khi cài đặt next15 **
4. Page & Layout
07:36
5. Dynamic Route, Route Group, Route Handler
09:35
6. Đang tải UI & Truyền phát
06:23
7. Xử lý lỗi
04:09

Phần 4. Thiết lập dự án

3 bài giảng ∙ (25phút)

Phần 5. Đăng ký & Đăng nhập

5 bài giảng ∙ (56phút)

Phần 6. Trang trò chuyện (Markup)

5 bài giảng ∙ (48phút)

Phần 7. Trang trò chuyện (Triển khai)

6 bài giảng ∙ (48phút)

Phần 8. Phân phối

1 bài giảng ∙ (4phút)

Ngày đăng:

Cập nhật lần cuối:

Đánh giá

Tất cả

25 đánh giá

5.0

25 đánh giá

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

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

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

YoungJea Oh

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

초급

Python, NLP, ChatGPT

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

YoungJea Oh

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

초급

•

Python

NLP

ChatGPT

AI 활용 (AX)

openAI API

9시간 26분

이런 걸 배울 수 있어요

최신 OpenAI API의 기본 개념과 기능

API 키 생성 및 관리 방법

다양한 언어 모델 선택 및 파라미터 튜닝 방법

자동화된 텍스트 생성

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

자바전문가그룹

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

초급

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

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

자바전문가그룹

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

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

초급

•

ChatGPT

인공지능(AI)

openAI API

4시간 55분

이런 걸 배울 수 있어요

인공지능 채팅 서비스를 웹 애플리케이션으로 만들기

텍스트를 음성으로 변환하기와 음성을 텍스트로 변환하기

DALLE를 이용해서 이미지 생성하기, 이미지 인페인팅하기

학습하지 않은 내용을 서비스하기 위한 동적 정보 검색기능

프로젝트로 배우는 React.js

코지 코더

블로그 프로젝트를 통해 리액트 기초를 배울수 있습니다

초급

React, Redux, ES6

프로젝트로 배우는 React.js

코지 코더

프로젝트로 배우는 React.js

블로그 프로젝트를 통해 리액트 기초를 배울수 있습니다

초급

•

React

Redux

ES6

9시간 5분

이런 걸 배울 수 있어요

리액트 기초

리액트 훅스

리덕스

리덕스 툴킷

실리콘밸리 엔지니어와 함께하는 OpenAI API (ChatGPT)

미쿡엔지니어

OpenAI API와 함께 미래를 그려보세요! OpenAI는 인공지능 분야의 선두주자로, 항상 최첨단 기술을 제공합니다. GPT-4 기반의 OpenAI API는 인간과 같은 대화를 가능하게 해주어 여러 분야에 적용할 수 있는 놀라운 역량을 발휘합니다.

초급

ChatGPT, Python, openai

실리콘밸리 엔지니어와 함께하는 OpenAI API (ChatGPT)

미쿡엔지니어

실리콘밸리 엔지니어와 함께하는 OpenAI API (ChatGPT)

초급

•

ChatGPT

Python

openai

Midjourney

6시간 14분

이런 걸 배울 수 있어요

OpenAI API

ChatGPT 지식

ChatGPT 이용 사례

Large Language Model

next 14.2 최신버전 공식문서 파먹기

더코딩클럽

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

초급

Next.js

next 14.2 최신버전 공식문서 파먹기

더코딩클럽

next 14.2 최신버전 공식문서 파먹기

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

초급

•

Next.js

2시간 8분

이런 걸 배울 수 있어요

next 라우팅

next 캐싱

넥스트 fetch

넥스트 기본 개념

공식문서로 배우는 실전 타입스크립트

어쩔코딩

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

입문

TypeScript, JavaScript, ES6

공식문서로 배우는 실전 타입스크립트

어쩔코딩

공식문서로 배우는 실전 타입스크립트

입문

•

TypeScript

JavaScript

ES6

Node.js

Next.js

2시간 56분

이런 걸 배울 수 있어요

타입스크립트

클린코드

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

짐코딩

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

초급

Next.js, CursorAI, React

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

짐코딩

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

초급

•

Next.js

CursorAI

React

cursor

블로그

14시간 14분

이런 걸 배울 수 있어요

공식 문서 기반 Next.js v15 App Router 최신 스펙

Notion API 연동 실제 블로그 개발

Cursor AI를 활용한 효율적인 개발 방법

React Server Component와 최적화 전략 (with ISR)

챗GPT와 파이썬으로 유튜브 AI 직원 만들기

SungYong Lee

GPT API를 활용한 프로그램을 만들고, 이미지 생성과 동영상 생성까지!

초급

ChatGPT, gpt, Python

챗GPT와 파이썬으로 유튜브 AI 직원 만들기

SungYong Lee

챗GPT와 파이썬으로 유튜브 AI 직원 만들기

GPT API를 활용한 프로그램을 만들고, 이미지 생성과 동영상 생성까지!

초급

•

ChatGPT

gpt

Python

openai

12시간 9분

이런 걸 배울 수 있어요

OpenAI GPT API 사용법

ChatGPT과 함께 프로그래밍 하는 방법

파이썬

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

Kyo

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

초급

React Native, TypeScript, expo

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

Kyo

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

초급

•

React Native

TypeScript

expo

react-hook-form

react-query

8시간 18분

•

Update 2025.07.14

이런 걸 배울 수 있어요

React Native & Expo, TypeScript

React Query (Tanstack Query)

React Hook Form

PushNotification, EAS, Dayjs, i18n

Next.js 15로 완성하는 실전 YouTube 클론 개발

antonio

이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

초급

Next.js, React, PostgreSQL

Next.js 15로 완성하는 실전 YouTube 클론 개발

antonio

Next.js 15로 완성하는 실전 YouTube 클론 개발

초급

•

Next.js

React

PostgreSQL

TailwindCSS

drizzle

클론코딩

23시간 41분

이런 걸 배울 수 있어요

YouTube 와 같은 영상 플랫폼을 직접 설계하고 구축하는 경험

Next.js 15(App Router) 와 TypeScript, tRPC 기반의 최신 풀스택 프레임워크와 React 19를 활용한 현대적 풀스택 웹 개발 기술 습득

PostgreSQL + Drizzle ORM을 활용한 타입 안정한 데이터베이스 관리 기술 습득

Bun 런타임을 활용한 빠르고 효율적인 서버 사이드 환경 구성 경험

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

로펀

🔥 강의 등록부터 영상 업로드까지, 지식공유자 기능을 그대로 구현해보는 실전 풀스택 강의입니다. Next.js 15와 NestJS를 활용해 강의 생성, 커리큘럼 구성, 썸네일 및 영상 업로드, 상세 소개 작성까지 실제 인프런 흐름을 따라 만들며, Prisma 모델링, JWT 인증, S3 + CloudFront 업로드, Swagger API 설계 등 실무에 가까운 경험을 쌓을 수 있습니다.

초급

AWS, Docker, Next.js

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

로펀

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

초급

•

AWS

Docker

Next.js

NestJS

Prisma

14시간 42분

•

Update 2025.07.01

이런 걸 배울 수 있어요

최신 풀스택 개발 흐름 (Next.js 15, NestJS, Prisma)

포트폴리오로 활용 가능한 ‘나만의 인프런’ 플랫폼 완성

강의 등록, 수정, 영상 업로드, 커리큘럼 편집 등 실서비스 기능 전반 개발

Shadcn UI + TailwindCSS + Cursor AI로 실무 수준의 감각적인 UI 제작

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

PostgreSQL, Next.js, TailwindCSS

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

[풀스택 입문] Firebase보다 10배 좋은 Supabase

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

•

PostgreSQL

Next.js

TailwindCSS

supabase

1시간 43분

이런 걸 배울 수 있어요

Supabase와 Next.js로 풀스택 개발 하는법

Supabase의 핵심 기능 4가지

Firebase vs Supabase 전격비교

PostgreSQL, Tailwind CSS, Next.js 14

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

닭강정

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

초급

gemini, HTML/CSS, TailwindCSS

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

닭강정

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

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

초급

•

gemini

HTML/CSS

TailwindCSS

JavaScript

Firebase

6시간 59분

•

Update 2025.07.17

이런 걸 배울 수 있어요

Firestore를 활용한 한자 단어장 구축

Gemini API를 활용한 AI 한자 추천

Firebase Authentication으로 사용자 관리

Nginx & SSL로 Firebase 기반 한자 학습 플랫폼 배포

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

•

JavaScript

React

Node.js

React Native

TypeScript

13시간 26분

이런 걸 배울 수 있어요

실무 100% 활용 리액트 네이티브 문법

리액트 실전 문법

효율적 개발에 최적화된 개발 환경 설정

Api를 통해 외부 정보를 가져오기

[LLM 101] LLM 필수기초 & LLaMA SFT 튜닝하기 (feat. 2시간속성코스)

꿈꾸는범블비

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

초급

NLP, ChatGPT, LLM

[LLM 101] LLM 필수기초 & LLaMA SFT 튜닝하기 (feat. 2시간속성코스)

꿈꾸는범블비

[LLM 101] LLM 필수기초 & LLaMA SFT 튜닝하기 (feat. 2시간속성코스)

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

초급

•

NLP

ChatGPT

LLM

Llama

Fine-Tuning

1시간 58분

•

Update 2025.07.16

이런 걸 배울 수 있어요

LLM

ChatGPT

자연어처리

SFT

Spring WebFlux + LLM 실전 구현

John H

Spring WebFlux로 여러 기능을 만듭니다. 이 강의를 통해 WebFlux의 필수 개념과 실전 구현을 익힐 수 있습니다.

초급

Java, Spring, webflux

Spring WebFlux + LLM 실전 구현

John H

Spring WebFlux + LLM 실전 구현

Spring WebFlux로 여러 기능을 만듭니다. 이 강의를 통해 WebFlux의 필수 개념과 실전 구현을 익힐 수 있습니다.

초급

•

Java

Spring

webflux

ChatGPT

LLM

6시간 10분

이런 걸 배울 수 있어요

Spring WebFlux 실전 구현

LLM을 활용한 기능 구현

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

입문

nextjs, ChatGPT, React

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

입문

•

nextjs

ChatGPT

React

TypeScript

TailwindCSS

56분

이런 걸 배울 수 있어요

Chat Application MVP 제작 with Cursor IDE

UI 프로토 타이핑 with Cursor IDE

코드리뷰 with Cursor IDE

보러가기

바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

ludgi

Whisper를 로컬에서 실행하고, FastAPI와 Next.js를 활용해 AI 음성 인식 앱을 빠르게 개발하는 실전 프로젝트 강의입니다. 실시간 음성 인식까지 구현하며, 짧은 시간 안에 간단한 포트폴리오로 활용할 수 있는 결과물을 완성할 수 있습니다.

초급

Next.js, FastAPI, whisper

바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

ludgi

바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

초급

•

Next.js

FastAPI

whisper

openai-whisper

1시간 13분

•

Update 2025.07.09

이런 걸 배울 수 있어요

nextjs

whisper

fastapi

바이브코딩

원고 생성기 프로그램 개발 강의 (Chatgpt api)

김지유

Gold Rush 시대에는 금을 직접 캐는 것보단 금 캐는 도구를 파는게 더 부자가 되기 쉽다고 하네요. ChatGPT 대항해 시대에 프로그램 판매해보시는건 어떤가요?

초급

ChatGPT, AIPRM, REST API

원고 생성기 프로그램 개발 강의 (Chatgpt api)

김지유

원고 생성기 프로그램 개발 강의 (Chatgpt api)

초급

•

ChatGPT

AIPRM

REST API

Python

1시간 4분

이런 걸 배울 수 있어요

ChatGPT API 기반 원고 생성 프로그램

문서 생성 프로그램 개발방법

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

따라하며 배우는 타입스크립트 A-Z

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

•

TypeScript

JavaScript

6시간 34분

이런 걸 배울 수 있어요

타입스크립트 기초

타입스크립트 중급

타입스크립트 프로젝트

자바스크립트

Tạo Chat GPT dựa trên bộ định tuyến ứng dụng Next.js

Dịch cái này sang tiếng Việt