NextJS OpenAI

Build GeniusGPT Full-Stack App with Next.js 14+, OpenAI , Clerk Auth, Prisma, PlanetScale TailwindCSS, DaisyUI, Vercel
NextJS OpenAI
File Size :
3.62 GB
Total length :
8h 28m



John Smilga


Last update




NextJS OpenAI

What you’ll learn

Build modern Next JS applications
Authenticate your Next JS applications with Clerk
Store data in database with Prisma and PlanetScale
Use OpenAI API in your Next JS Applications

NextJS OpenAI


Knowledge of React


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 who are keen to elevate their skills. You’ll start from the ground up by learning how to create a new Next.js app, understand its files and folders structure, and explore the intricacies of routing including link components, nested routes, and dynamic routes.Immerse yourself in front-end design with TailwindCSS and DaisyUI, and learn to craft responsive layouts, manage themes, and create a unified look for your entire app with layout components. Dive into the backend mechanics with server vs client components, fetching data in server components, handling loading and errors gracefully, and implementing nested layoutsDiscover how to enhance your app’s functionality with CRUD operations using Server Actions, manage user interactions, and validate data using the Zod library. You’ll also learn to integrate a database by hosting with Planetscale and add essential features like authentication with CLERK Service. By the end of this course, you’ll be adept at deploying your NextJS application on Vercel, setting up and toggling themes with DaisyUI, and enriching your app with powerful APIs from OpenAI and Unsplash. Learn how to send prompts, receive responses, and even generate images within your application.With a hands-on approach, tackle numerous challenges throughout the course to immediately apply your newfound knowledge. This is not just a tutorial; it’s a transformative learning experience that will arm you with the tools and confidence to build cutting-edge web applications.


Section 1: Next.js 14 Tutorial

Lecture 1 Introduction to Next.js

Lecture 2 Tutorial Overview

Lecture 3 Create New Next.js App

Lecture 4 Files and Folder Structure

Lecture 5 Home Page

Lecture 6 More Pages

Lecture 7 Link Component

Lecture 8 Nested Routes

Lecture 9 First Challenge

Lecture 10 CSS

Lecture 11 TailwindCSS

Lecture 12 DaisyUI

Lecture 13 Layout File

Lecture 14 Navbar Challenge

Lecture 15 Server Component VS Client Component

Lecture 16 Counter Challenge

Lecture 17 Fetch Data

Lecture 18 Loading Component

Lecture 19 Error Component

Lecture 20 Nested Layouts

Lecture 21 Dynamic Routes

Lecture 22 Drinks List – Challenge

Lecture 23 Single Drink – Challenge

Lecture 24 Static Images

Lecture 25 Remote Images

Lecture 26 Responsive Images

Lecture 27 More Routing

Lecture 28 Prisma Setup

Lecture 29 Prisma Model

Lecture 30 Prisma CRUD

Lecture 31 Display Tasks – Challenge

Lecture 32 Server Actions – Info

Lecture 33 First Server Action

Lecture 34 Refactor App

Lecture 35 Delete Task

Lecture 36 Edit Task – Setup

Lecture 37 Edit Task – Complete

Lecture 38 Pending State

Lecture 39 Error Checking

Lecture 40 Zod Library

Lecture 41 Providers

Lecture 42 Delete Button – Challenge

Lecture 43 Route Handlers – Info

Lecture 44 Route Handlers – GET

Lecture 45 Route Handlers – POST

Lecture 46 Middleware

Lecture 47 PlanetScale

Lecture 48 Local Build

Lecture 49 Force Dynamic

Lecture 50 Deploy

Section 2: GPTGenius App

Lecture 51 Intro

Lecture 52 New App

Lecture 53 Libraries

Lecture 54 First Pages

Lecture 55 Home Page

Lecture 56 Clerk Setup

Lecture 57 Custom Auth Pages

Lecture 58 React Icons

Lecture 59 Dashboard Layout

Lecture 60 Sidebar

Lecture 61 Sidebar Header

Lecture 62 Nav Links

Lecture 63 Member Profile

Lecture 64 Theme Toggle

Lecture 65 Boilerplate Overview

Lecture 66 User Profile

Lecture 67 React Hot Toast Library

Lecture 68 Chat Structure

Lecture 69 React Query – Info

Lecture 70 React Query – Setup

Lecture 71 OpenAI – Pricing

Lecture 72 OpenAI – Playground

Lecture 73 OpenAI – Docs

Lecture 74 First Prompt

Lecture 75 Context

Lecture 76 Display Messages

Lecture 77 New Tour – Setup

Lecture 78 New Tour – Form

Lecture 79 New Tour – React Query

Lecture 80 Tour Prompt

Lecture 81 Generate Tour Response

Lecture 82 Tour Info

Lecture 83 PlanetScale

Lecture 84 Tour Model

Lecture 85 Save Tour

Lecture 86 Timeout Info

Lecture 87 GetAllTours Function

Lecture 88 Tours Page – Setup

Lecture 89 Tours List

Lecture 90 Search Functionality

Lecture 91 Single Tour Page

Lecture 92 Generate Image

Lecture 93 Unsplash API

Lecture 94 Custom Pages – Bug/Fix

Lecture 95 Tokens – Intro

Lecture 96 Max Tokens

Lecture 97 Token Actions

Lecture 98 Display Tokens

Lecture 99 Tours Logic

Lecture 100 Chat Logic

Lecture 101 Deploy

React developers who want to learn Next JS 14 with OpenAI API integration

Course Information:

Udemy | English | 8h 28m | 3.62 GB
Created by: John Smilga

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top