CF

NextJS & OpenAI - 2024 Edition

13h 41m 21s
English
Paid

Embark on a journey to mastering modern web development with our comprehensive video course on building applications using Next JS 14 and the OpenAI API. This course is meticulously designed for beginners and intermediate developers eager to elevate their skills.

Getting Started with Next.js

Begin with the basics of creating a new Next.js app. Understand its files and folder structure as you explore the intricacies of routing, including link components, nested routes, and dynamic routes.

Front-End Design with TailwindCSS and DaisyUI

Immerse yourself in front-end design by learning how to craft responsive layouts and manage themes. Create a unified look for your entire app using layout components.

Responsive Layouts

Learn to leverage TailwindCSS and DaisyUI for crafting visually appealing, responsive designs that enhance user experience.

Backend Mechanics

Dive into backend mechanics with a focus on server vs client components. Learn how to fetch data in server components, manage loading states and errors, and implement nested layouts effectively.

Enhancing Functionality

Enhance your app's functionality with CRUD operations using Server Actions. Manage user interactions and validate data using the Zod library.

Database Integration and Authentication

Integrate a database by hosting with Planetscale, and add essential features like authentication with the CLERK Service.

Deployment and API Integration

By the end of this course, deploy your NextJS application on Vercel efficiently. Set up and toggle themes with DaisyUI and enrich your app with powerful APIs from OpenAI and Unsplash.

Working with APIs

  • Send prompts and receive responses using the OpenAI API.
  • Generate images within your application using API calls.

Transformative Learning Experience

Engage in a hands-on approach by tackling numerous challenges throughout the course to immediately apply your newfound knowledge. This is not just a tutorial; it's a transformative learning experience designed to arm you with the tools and confidence to build cutting-edge web applications.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 145 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction to Next.js
All Course Lessons (145)
#Lesson TitleDurationAccess
1
Introduction to Next.js Demo
01:08
2
Tutorial Overview
02:00
3
Create New Next.js App
01:59
4
Files and Folder Structure
01:47
5
Home Page
04:35
6
More Pages
01:52
7
Link Component
02:02
8
Nested Routes
01:53
9
First Challenge
03:09
10
CSS
02:31
11
TailwindCSS
09:32
12
DaisyUI
09:49
13
Layout File
04:05
14
Navbar Challenge
09:38
15
Server Component VS Client Component
02:08
16
Counter Challenge
07:38
17
Fetch Data
04:32
18
Loading Component
03:59
19
Error Component
05:00
20
Nested Layouts
03:09
21
Dynamic Routes
03:20
22
Drinks List - Challenge
05:08
23
Single Drink - Challenge
06:17
24
Static Images
05:16
25
Remote Images
05:52
26
Responsive Images
04:32
27
More Routing
06:20
28
Prisma Setup
05:39
29
Prisma Model
04:38
30
Prisma CRUD
09:32
31
Display Tasks - Challenge
10:44
32
Server Actions - Info
02:14
33
First Server Action
08:15
34
Refactor App
03:13
35
Delete Task
05:10
36
Edit Task - Setup
04:51
37
Edit Task - Complete
09:40
38
Pending State
05:41
39
Error Checking
05:38
40
Zod Library
02:57
41
Providers
05:42
42
Delete Button - Challenge
03:29
43
Route Handlers - Info
02:35
44
Route Handlers - GET
06:04
45
Route Handlers - POST
04:27
46
Middleware
05:24
47
Render (optional)
02:19
48
PlanetScale
05:47
49
Local Build
06:25
50
Force Dynamic
05:08
51
Deploy
06:25
52
Intro
03:31
53
New App
01:34
54
Libraries
02:18
55
First Pages
04:14
56
Home Page
05:09
57
Clerk Setup
11:01
58
Custom Auth Pages
07:16
59
React Icons
01:57
60
Dashboard Layout
08:41
61
Sidebar
04:31
62
Sidebar Header
02:57
63
Nav Links
03:26
64
Member Profile
04:26
65
Theme Toggle
08:04
66
Boilerplate Overview
00:54
67
User Profile
01:24
68
React Hot Toast Library
02:57
69
Chat Structure
09:17
70
React Query - Info
06:27
71
React Query - Setup
09:16
72
OpenAI - Pricing
03:59
73
OpenAI - Playground
06:57
74
OpenAI - Docs
03:21
75
First Prompt
06:26
76
Context
09:00
77
Display Messages
07:33
78
New Tour - Setup
02:05
79
New Tour - Form
06:19
80
New Tour - React Query
07:44
81
Tour Prompt
05:47
82
Generate Tour Response
05:06
83
Tour Info
02:18
84
PlanetScale
02:34
85
Tour Model
04:23
86
Save Tour
06:54
87
Timeout Info
02:25
88
GetAllTours Function
03:13
89
Tours Page - Setup
03:04
90
Tours List
07:15
91
Search Functionality
06:48
92
Single Tour Page
05:15
93
Generate Image
08:39
94
Unsplash API
04:38
95
Custom Pages - Bug/Fix
02:50
96
Tokens - Intro
02:46
97
Max Tokens
02:36
98
Token Actions
10:12
99
Display Tokens
05:33
100
Tours Logic
06:58
101
Chat Logic
04:44
102
Deploy
04:27
103
Intro
05:03
104
Setup
03:41
105
Shadcn-ui
11:34
106
Shadcn-ui API
07:22
107
Layout and Homepage
10:34
108
Create Pages
04:14
109
Clerk Auth
03:27
110
Nav Links
04:49
111
Dashboard Layout
09:19
112
Sidebar
05:58
113
Navbar
03:41
114
Dropdown Links
07:31
115
Change Theme
03:29
116
Toggle Theme
08:16
117
Shadcn-ui Forms
11:15
118
Types
07:10
119
Custom Form Components
12:07
120
CreateJobForm Continued
10:36
121
Render and Prisma
06:27
122
CreateJobAction
11:57
123
Toast Component
01:38
124
React Query - Setup
04:33
125
CreateJobForm - Complete
09:05
126
GetAllJobsAction - Overview
06:16
127
GetAllJobsAction
08:03
128
Jobs Page - Setup
06:52
129
SearchForm Component - Setup
08:17
130
SearchForm Component - Functionality
07:05
131
JobsList Component
07:51
132
Additional Shadcn-UI Components
01:59
133
JobCard Component
05:30
134
JobInfo Component
05:14
135
Delete Job
06:00
136
Single Job Page
05:58
137
EditJobForm Component
07:36
138
Seed Database
10:19
139
Stats Action
07:05
140
Charts Actions
06:18
141
Stats Container
06:36
142
Loading Skeleton
05:49
143
Charts Container
03:36
144
Button Component
15:20
145
Complex Button Component
13:34
Unlock unlimited learning

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

Learn more about subscription

Course content

145 lessons · 13h 41m 21s
Show all 145 lessons
  1. 1 Introduction to Next.js 01:08
  2. 2 Tutorial Overview 02:00
  3. 3 Create New Next.js App 01:59
  4. 4 Files and Folder Structure 01:47
  5. 5 Home Page 04:35
  6. 6 More Pages 01:52
  7. 7 Link Component 02:02
  8. 8 Nested Routes 01:53
  9. 9 First Challenge 03:09
  10. 10 CSS 02:31
  11. 11 TailwindCSS 09:32
  12. 12 DaisyUI 09:49
  13. 13 Layout File 04:05
  14. 14 Navbar Challenge 09:38
  15. 15 Server Component VS Client Component 02:08
  16. 16 Counter Challenge 07:38
  17. 17 Fetch Data 04:32
  18. 18 Loading Component 03:59
  19. 19 Error Component 05:00
  20. 20 Nested Layouts 03:09
  21. 21 Dynamic Routes 03:20
  22. 22 Drinks List - Challenge 05:08
  23. 23 Single Drink - Challenge 06:17
  24. 24 Static Images 05:16
  25. 25 Remote Images 05:52
  26. 26 Responsive Images 04:32
  27. 27 More Routing 06:20
  28. 28 Prisma Setup 05:39
  29. 29 Prisma Model 04:38
  30. 30 Prisma CRUD 09:32
  31. 31 Display Tasks - Challenge 10:44
  32. 32 Server Actions - Info 02:14
  33. 33 First Server Action 08:15
  34. 34 Refactor App 03:13
  35. 35 Delete Task 05:10
  36. 36 Edit Task - Setup 04:51
  37. 37 Edit Task - Complete 09:40
  38. 38 Pending State 05:41
  39. 39 Error Checking 05:38
  40. 40 Zod Library 02:57
  41. 41 Providers 05:42
  42. 42 Delete Button - Challenge 03:29
  43. 43 Route Handlers - Info 02:35
  44. 44 Route Handlers - GET 06:04
  45. 45 Route Handlers - POST 04:27
  46. 46 Middleware 05:24
  47. 47 Render (optional) 02:19
  48. 48 PlanetScale 05:47
  49. 49 Local Build 06:25
  50. 50 Force Dynamic 05:08
  51. 51 Deploy 06:25
  52. 52 Intro 03:31
  53. 53 New App 01:34
  54. 54 Libraries 02:18
  55. 55 First Pages 04:14
  56. 56 Home Page 05:09
  57. 57 Clerk Setup 11:01
  58. 58 Custom Auth Pages 07:16
  59. 59 React Icons 01:57
  60. 60 Dashboard Layout 08:41
  61. 61 Sidebar 04:31
  62. 62 Sidebar Header 02:57
  63. 63 Nav Links 03:26
  64. 64 Member Profile 04:26
  65. 65 Theme Toggle 08:04
  66. 66 Boilerplate Overview 00:54
  67. 67 User Profile 01:24
  68. 68 React Hot Toast Library 02:57
  69. 69 Chat Structure 09:17
  70. 70 React Query - Info 06:27
  71. 71 React Query - Setup 09:16
  72. 72 OpenAI - Pricing 03:59
  73. 73 OpenAI - Playground 06:57
  74. 74 OpenAI - Docs 03:21
  75. 75 First Prompt 06:26
  76. 76 Context 09:00
  77. 77 Display Messages 07:33
  78. 78 New Tour - Setup 02:05
  79. 79 New Tour - Form 06:19
  80. 80 New Tour - React Query 07:44
  81. 81 Tour Prompt 05:47
  82. 82 Generate Tour Response 05:06
  83. 83 Tour Info 02:18
  84. 84 PlanetScale 02:34
  85. 85 Tour Model 04:23
  86. 86 Save Tour 06:54
  87. 87 Timeout Info 02:25
  88. 88 GetAllTours Function 03:13
  89. 89 Tours Page - Setup 03:04
  90. 90 Tours List 07:15
  91. 91 Search Functionality 06:48
  92. 92 Single Tour Page 05:15
  93. 93 Generate Image 08:39
  94. 94 Unsplash API 04:38
  95. 95 Custom Pages - Bug/Fix 02:50
  96. 96 Tokens - Intro 02:46
  97. 97 Max Tokens 02:36
  98. 98 Token Actions 10:12
  99. 99 Display Tokens 05:33
  100. 100 Tours Logic 06:58
  101. 101 Chat Logic 04:44
  102. 102 Deploy 04:27
  103. 103 Intro 05:03
  104. 104 Setup 03:41
  105. 105 Shadcn-ui 11:34
  106. 106 Shadcn-ui API 07:22
  107. 107 Layout and Homepage 10:34
  108. 108 Create Pages 04:14
  109. 109 Clerk Auth 03:27
  110. 110 Nav Links 04:49
  111. 111 Dashboard Layout 09:19
  112. 112 Sidebar 05:58
  113. 113 Navbar 03:41
  114. 114 Dropdown Links 07:31
  115. 115 Change Theme 03:29
  116. 116 Toggle Theme 08:16
  117. 117 Shadcn-ui Forms 11:15
  118. 118 Types 07:10
  119. 119 Custom Form Components 12:07
  120. 120 CreateJobForm Continued 10:36
  121. 121 Render and Prisma 06:27
  122. 122 CreateJobAction 11:57
  123. 123 Toast Component 01:38
  124. 124 React Query - Setup 04:33
  125. 125 CreateJobForm - Complete 09:05
  126. 126 GetAllJobsAction - Overview 06:16
  127. 127 GetAllJobsAction 08:03
  128. 128 Jobs Page - Setup 06:52
  129. 129 SearchForm Component - Setup 08:17
  130. 130 SearchForm Component - Functionality 07:05
  131. 131 JobsList Component 07:51
  132. 132 Additional Shadcn-UI Components 01:59
  133. 133 JobCard Component 05:30
  134. 134 JobInfo Component 05:14
  135. 135 Delete Job 06:00
  136. 136 Single Job Page 05:58
  137. 137 EditJobForm Component 07:36
  138. 138 Seed Database 10:19
  139. 139 Stats Action 07:05
  140. 140 Charts Actions 06:18
  141. 141 Stats Container 06:36
  142. 142 Loading Skeleton 05:49
  143. 143 Charts Container 03:36
  144. 144 Button Component 15:20
  145. 145 Complex Button Component 13:34

Related courses

Frequently asked questions

What is NextJS & OpenAI - 2024 Edition about?
Embark on a journey to mastering modern web development with our comprehensive video course on building applications using Next JS 14 and the OpenAI API . This course is meticulously designed for beginners and intermediate developers eager…
Who teaches NextJS & OpenAI - 2024 Edition?
NextJS & OpenAI - 2024 Edition is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is NextJS & OpenAI - 2024 Edition?
NextJS & OpenAI - 2024 Edition contains 145 lessons with a total runtime of 13 hours 41 minutes. All lessons are available to watch online at your own pace.
Is NextJS & OpenAI - 2024 Edition free to watch?
NextJS & OpenAI - 2024 Edition is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch NextJS & OpenAI - 2024 Edition online?
NextJS & OpenAI - 2024 Edition is available to watch online on CourseFlix at https://courseflix.net/course/nextjs-openai-2024-edition. The page hosts every lesson with the integrated video player; no download is required.