Next.js & React with ChatGPT - Development Guide (2023)

7h 6m 49s
English
Paid

Learn to build a Next.js application from scratch and integrate OpenAI's ChatGPT to create a functional chatbot app. Throughout this course, you'll acquire the necessary skills to develop a Next.js application, while also learning how to incorporate ChatGPT technology to enable users to query an AI about specific technology stacks, libraries, frameworks, or programming languages covered in the course.

Course Overview

A significant portion of the course focuses on designing the application layout, enhancing user experience, and assembling everything from the ground up. Importantly, each segment of the course is optional; you have the flexibility to skip sections as needed and download the project at any stage of development.

Key Features of the Course

Integrating OpenAI's ChatGPT

This course emphasizes text completion using OpenAI, primarily employed in chatbot applications. While it doesn't cover every aspect of ChatGPT, it offers a practical guide on integrating the AI model into a Next.js application.

What is Next.js?

Next.js is a React framework that offers infrastructure and a seamless development experience for server-side rendered (SSR) and static page applications.

  • It includes an intuitive page-based routing system, with support for dynamic routes.

  • It supports pre-rendering, including both static generation (SSG) and server-side rendering (SSR), on a per-page basis.

What is ChatGPT?

ChatGPT is a robust AI language model developed by OpenAI. It can understand and respond to text inputs in a human-like manner and is extremely versatile due to its training on vast text datasets, making it suitable for a variety of language-based applications.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 59 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 59 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (59)
#Lesson TitleDurationAccess
1
Introduction Demo
02:45
2
What to expect from the course
03:31
3
How to resolve issues or skip lecture
05:07
4
Init Project
06:16
5
Tailwind init
09:00
6
Center content
05:53
7
Json data and assets
06:57
8
Render Stacks
10:26
9
Border hover classes
05:45
10
Stack Page
09:56
11
Adds header
07:20
12
Message layout
11:04
13
Textarea for prompt
04:24
14
Move code to components
07:30
15
Different classes for messages
07:53
16
Handle prompt value
09:22
17
Add messages
07:32
18
Scroll to bottom
04:46
19
Completion Api route
05:49
20
Send data to Api
10:16
21
Get response from request
05:53
22
Add ai message
06:02
23
Typewriter effect
06:55
24
Blinking cursor
06:22
25
Disable typewriter
03:19
26
OpenAI Account + Api keys
11:37
27
Completion API
18:35
28
ChatGPT Params
23:49
29
Debug config
04:34
30
Make better prompt
09:49
31
Hardcode response
05:43
32
React markdown
05:07
33
Code highlight
15:12
34
Code cleanup
05:48
35
Use Effect Fix
01:48
36
Fix typewriter styles
03:38
37
Session keys
07:06
38
Set active session
03:23
39
Init iron sessions
08:34
40
Api endpoint to store session
04:59
41
Storing user in session
08:43
42
Retrieve user in Post endpoint
05:04
43
Fetch user client side
06:39
44
Move fetch user to hook
04:13
45
Display uid in ui
01:22
46
Set active session on reload
02:07
47
Select default session
03:24
48
Init lowDb
13:45
49
Cache DB
05:57
50
Store message history
11:10
51
Save data to DB
07:48
52
Feed history to chatGPT
05:14
53
Message history memory size
06:35
54
Clear history on chat enter
10:10
55
Different bots
08:48
56
Handle case when no messages
02:18
57
Github repo
08:53
58
Deploy app to vercel
06:14
59
Store in-memory & Course Finish
08:40
Unlock unlimited learning

Get instant access to all 58 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription