Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Next JS + OpenAI GPT3.5: Build an SEO-friendly blog post gen app with auth0, GPT, stripe payments, tailwind, + MongoDB

4.68 (383 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Next JS & Open AI / GPT: Next-generation Next JS & AI apps
3,308
students
5 hours
content
Mar 2024
last update
$74.99
regular price

What you will learn

Build your own SAAS products powered by AI and Next JS

Use OpenAI's GPT to implement AI generated content in your apps

Authenticate your Next JS apps with Auth0

Style your Next JS apps with Tailwind CSS

Store data for your Next JS apps with MongoDB

Charge customers using stripe

Description

Don't get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects!

This course uses the pages router but is currently going through an update to use the Next JS 14 and the app router.

Welcome to the exciting world of AI-powered, next-generation, Next JS apps!

In this course we will create a fictional Software-As-A-Service (SAAS) product called "BlogStandard". We'll build "BlogStandard" using a combination of Next.js, OpenAI's GPT, MongoDB, Auth0, Stripe, and Tailwind CSS. BlogStandard allows users to create an account (handled by auth0), purchase tokens (handled by stripe), and spend those tokens to generate blog posts, powered by OpenAI's GPT API. User's tokens and generated blog posts will be stored using MongoDB.

In this comprehensive online course, you'll learn how to harness the power of these cutting-edge technologies to build a fast, responsive, and dynamic web application that generates high-quality blog posts using AI. With step-by-step guidance, you'll gain hands-on experience working with each of these technologies to bring your vision to life.

First, we'll dive into Next.js, a popular framework for building web applications. You'll learn how to create fast and responsive pages, manage routing, and integrate APIs to build a powerful and dynamic web application.

Next, we'll explore OpenAI's GPT, the state-of-the-art language generation model, and learn how to use it to generate high-quality blog posts. You'll also discover how to integrate MongoDB, a scalable and flexible NoSQL database, to store and manage data for our application.

In addition, you'll learn how to use Auth0, a powerful identity management platform, to handle user authentication and authorization, and Stripe, a leading payment processor, to handle transactions and payment processing. Finally, you'll learn how to use Tailwind CSS, a modern CSS framework, to style and design your application, bringing your vision to life.

By the end of this course, you'll have the skills and knowledge you need to build your own AI-powered app and unleash the full potential of AI in your web development projects. So what are you waiting for? Join now and start your journey to the exciting world of AI-powered Next JS apps!

Content

Introduction & project setup

Important! Read this before you begin the course!
Course intro & project demo
Project setup
Udemy ratings and reviews
Set up all required routes for our app

Authentication & authorization with Auth0

Set up auth0 for authentication
Set the auth state & user information if logged in
Implement protected routes that are only accessible if logged in

Creating the app layout with Tailwind CSS

Create the basic AppLayout component
Implementing the sidebar & styling with Tailwind CSS
Implementing the sidebar footer
Create the sidebar header & roll out the AppLayout for all relevant pages
Create the app logo component using Google Fonts & FontAwesome
Create the homepage / main landing page, and finish off the sidebar header

Generate blog posts with OpenAI's GPT API and store in MongoDB

Setting up our project to work with GPT
Refine the OpenAI prompt and render the results
Pass topic and keywords to the generatePost API endpoint
Set up MongoDB
Implement add tokens functionality and store in MongoDB
Save generated post data to MongoDB
Load the post data for a particular post page
Auto-navigate to a post after it's generated
Render the post content for a particular post page
Render list of available posts in the sidebar

Implementing stripe payments

Set up stripe
Implement stripe webhooks

Styling updates, fixes, and data validation

Fix Font Awesome flash of massive icon on load in production
Styling updates & loading icon
Validating form data when generating new posts

Implement "load more posts" and delete post

Create posts context and retrieve first 5 posts
Create getPosts endpoint
Hide "load more posts" button and fix disappearing posts in sidebar
Fix posts in sidebar on initial post load
Create deletePost endpoint
Create delete post UI & call deletePost endpoint
Delete post from sidebar
Refactor posts context to use reducer instead of state

Deploy

Deploy on DigitalOcean
BONUS!

Reviews

Ray
May 20, 2023
Personally, it was an introductory course that I wanted to take without any kind of knowledge of Next.js or APIs in general. However, this course by Tom helped me become curious about the subjects that I did not know. Door opener for me, and it was awesome. I didn't know some codes here but I definitely understood how things worked. Thank you Tom!
Andrii
May 19, 2023
Pretty straightforward. Quick and understandable. Be aware, you need previous experience with React, HTML and CSS as the author does not explain how all basic concepts work under the hood.
Yangwoo
May 4, 2023
The instructor's English pronunciation is correct and the pace of the lectures is appropriate and the content is rich. I couldn't ask for more.
Piotr
May 3, 2023
I bought this course seeing NextJS/OpenAI and Tailwind to practice OpenAI APIs. As a full stack dev I am really enjoying these lessons, content, pace and structure. This is a perfect project example to play around, add new features, different db or auth methods. Great job! Thank you!
Alejandro
April 13, 2023
I recently took a programming course on Udemy and it was absolutely incredible. The course was very satisfying to follow step-by-step, and each concept was explained in a way that was easy to understand. The instructor, Tom, did an excellent job of breaking down each reason and providing great and clean code. Im very happy with everything I learned, and it was one of the most motivating and informative courses I have taken on Udemy. I appreciated Tom's emphasis on good programming practices, and I learned a lot about NextJS, Tailwind, and Mongo. Even as someone with only basic knowledge, the course was an excellent way to advance my skills. The amount of time and dedication I put into this course was well worth it. I highly recommend it to anyone looking to improve their programming skills. Overall, the course was well worth the investment, and I would like to thank Tom for all the knowledge and insight he provided. If you are interested in improving your programming skills, this course is an excellent choice.
Ariunaa
April 9, 2023
when i click Login in the browser, I receive error "Callback URL mismatch. The provided redirect_uri is not in the list of allowed callback URLs. Please go to the Application Settings page and make sure you are sending a valid callback url from your application." even though i followed exact step by step instruction
Rob
April 8, 2023
I like it so far, but I feel a bit more explanation of some sections would be helpful. I've had to pause the course a few times to read the documentation to better understand what we are doing and why.
Nathaniel
April 7, 2023
I really love Tom's courses! He's very fast, so I have to keep the pause button handy, but that means no wasted time at all. I have several of his courses and they have all been outstanding.
Victor
April 7, 2023
So far so good! Thank you. Can you create an updated one with the new `app` diredtory with `/app/api/routes.ts` and `/app/pages.ts`, please? :)
Michael
April 3, 2023
I really like the rapid pace of this tutorial. I also like that the instructor leaves in his initial errors because they are easy errors to make, and the videos help draw attention to finding them when reproducing the code. The instructor makes completing this project very straight forward. I learned a lot about OpenAI, NextJS, and MongoDB in building this webapp. Highly recommended.
Dylan
April 1, 2023
Moving along at a fast pace, which is good. I'm a little worried that a few things are going to be left out of this course, such as server-side rendering and posts by name (for imaginary SEO benefits) instead of ID, but those things are probably best left outside the scope of this course, and should be pretty easy to figure out separately.
Alex
March 28, 2023
Very cool course, nice and short and covers a lot of cool topics, really gets you thinking about what you can build using Open AI's api. Also learned some really cool stuff about Tailwind CSS which I wasn't expecting like using the components and base layers.
Igor
March 19, 2023
Esse curso é excelente para quem quer conhecer mais sobre a OpenAI e aplicá-la num projeto prático. É bom ter um conhecimento prévio de NextJS e React. Senti falta da utilização do TypeScript, mas sei que este não é o foco do curso.
Sofia
March 16, 2023
Minus: - The course does not spend enough time on MongoDB, OpenAI, Stripe, Auth0. - The course does not cover getStaticPaths, getServerSideProps in detail, which can be a disadvantage for those who want to learn more about static and server-side rendering methods in NextJS. - Fonts here are connected through a separate library, and NextJS complained about it, in the new version it is done without libraries. - No information about getStaticPaths and getServerSideProps. - DigitalOcean was chosen for deployment, and it is not suitable for deployment of pet projects, as it is a paid platform (I deployed on Vercel, but I don't know what those who did not have experience with NextJS will do). in the course there is a reference to a discount on free deployment for 2 months - not all pages are covered with styles, the author scored on /token-topup and /success (I know and said that you can do it if you want, but I will not do it) - the topic of NextJS routing is not fully disclosed
Djumali
March 11, 2023
Very rushed and fast-paced, many topics weren't explained, and should have been longer or a bit more in-depth, I got to like 80% of the course and didn't wanna finish it anymore because I felt like I'm just copy-pasting code and not learning new things because they arent addressed ofc.

Charts

Price

Next JS & Open AI / GPT: Next-generation Next JS & AI apps - Price chart

Rating

Next JS & Open AI / GPT: Next-generation Next JS & AI apps - Ratings chart

Enrollment distribution

Next JS & Open AI / GPT: Next-generation Next JS & AI apps - Distribution chart
4941480
udemy ID
10/23/2022
course created date
2/22/2023
course indexed date
Bot
course submited by