66
Lectures
7
Hours

What is Next.js?

Next.js is a React-based framework that provides infrastructure and simple development experience for server-side rendered(SSR) & static page applications.

  • An intuitive page-based routing system (with support for dynamic routes)

  • Pre-rendering, both static generation (SSG) and server-side rendering (SSR), are supported on a per-page basis.

What is ChatGPT?

ChatGPT is a powerful AI language model created by OpenAI that can understand and respond to text inputs like a human. It has been trained on vast amounts of text data, making it a versatile tool for various language-based applications.


What are you going to work on?

Throughout the course, you will gain experience developing a Next JS application from the ground up. Additionally, you'll receive instruction on integrating OpenAI's ChatGPT to create a chatbot application that enables users to ask the AI any questions about a specific technology stack, such as a library, framework, or programming language that will be taught in the course. The ultimate goal of the course is to equip you with the skills necessary to create a functional chatbot app.


A big portion of the course is preparing the application layout, improving user experience, and getting everything together from scratch. Every part of the course is skippable, with the option to download the version of the project from any stage of the course.


The course covers a text completion from OpenAI, mostly used for Chatbots. The course doesn't focus on covering every topic of chatGPT but rather provides a practical development guide on how to integrate a bot into the Next JS application. 


The course can be briefly summarized in these points:


  • Layout preparation - Several lectures are provided to prepare the application layout, with everything built from scratch. Each lecture is optional and can be skipped.

  • Components - Code parts are organized into components for better management.

  • API Route -An API route is established to handle user queries and provide ChatGPT's response.

  • ChatGPT - ChatGPT is initially integrated with a simple setup.

  • ChatGPT parameters - The parameters that influence AI decisions are explained.

  • Markdown - The response generated by ChatGPT is formatted in Markdown.

  • Sessions - Although the course doesn't cover authentication, different user scenarios are simulated using sessions/cookies.

  • In-memory DB -  The application uses lowDB as an in-memory database for data storage.

  • AI memory  - Chat history is stored in an in-memory database, enabling the AI model to access more context.

  • Personalize AI - Each chatbot has a unique personality and specific knowledge of a framework.

  • Deployment - The application will be deployed on Vercel.

While working on the features above, the students will learn and understand ChatGPT features and parameters. They will know how to architecture applications and will be able to create their applications with Next JS and ChatGPT integration.

Requirements

  • Base knowledge of Next JS or React JS.

Course curriculum

  • 2

    Layout Preparation

  • 3

    Stack Page

    • Stack Page

    • Adds header

    • Message layout

    • Textarea for prompt

    • Move code to components

    • Different classes for messages

    • Handle prompt value

    • Add messages

    • Scroll to bottom

    • Quiz

  • 4

    Completion API Route

  • 5

    OpenAI - ChatGPT

    • OpenAI Account + Api keys

    • Completion API

    • ChatGPT Params

    • Debug config

    • Make better prompt

    • Hardcode response

    • Quiz

  • 6

    Markdown

    • React markdown

    • Code highlight

    • Code cleanup

    • Use Effect Fix

    • Fix typewriter styles

    • Quiz

  • 7

    Sessions - Cookies

    • Session keys

    • Set active session

    • Init iron sessions

    • Api endpoint to store session

    • Storing user in session

    • Quiz

  • 8

    Get User

    • Retrieve user in Post endpoint

    • Fetch user client side

    • Move fetch user to hook

    • Display uid in ui

    • Set active session on reload

    • Select default session

  • 9

    Message History

    • Init lowDb

    • Cache DB

    • Store message history

    • Save data to DB

    • Feed history to chatGPT

    • Message history memory size

    • Clear history on chat enter

    • Different bots

    • Handle case when no messages

    • Quiz

  • 10

    Deployment

    • Github repo

    • Deploy app to vercel

    • Store in-memory & Course Finish

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching any lecture. Just download the correct project version attached to the lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Next.js with ChatGPT - Development Guide"

    $19.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now