ProNextJS
    Loading
    lesson

    An Overview of the First Application

    Jack HerringtonJack Herrington
    Code

    Let's take a brief tour of the GPT Chat application that we'll be building throughout this course. The app is built using Next.js and incorporates various features such as user authentication, file-based routing, and server-side rendering. We'll also explore the deployment process using Vercel.

    Authentication

    The application is an authenticated app, which means that users need to log in to access its features. We'll be using the open-source NextAuth library to manage user authentication. NextAuth supports various authentication providers, allowing users to sign in through popular services like GitHub or using a database with email and password credentials.

    Home Page

    Upon logging in, users are greeted with the home page, which consists of two main sections:

    1. A list of saved chats with ChatGPT
    2. An input field to initiate a new chat

    When a user starts a new chat by pressing return, they are automatically redirected to the chat detail page.

    Chat Detail Page

    The chat detail page is a separate route that displays the transcript of the user's conversation. It also includes a menu of all the user's previous chats in a parallel route on the side. Users can seamlessly navigate between different chats by clicking on them in the menu.

    About Page

    The application also features an /about route, which leads users to an informative About Us page.

    Sign Out

    To ensure security and privacy, users can sign out of the application when they're done. This action returns them to the beginning of the authentication flow, requiring them to log in again to access the app's features.

    Deployment

    Throughout the development process, we'll be running the application locally using localhost. However, we'll also explore the step-by-step process of deploying the app to Vercel, showcasing a complete CI/CD flow. This will give you a comprehensive understanding of how to deploy a Next.js application to a production environment.

    Learning Objectives

    In this first section, we'll cover the fundamental concepts of Next.js, including:

    • File-based routing
    • Client and server components
    • Server actions
    • Streaming
    • Parallel routes

    Getting Started

    Now that you have an overview of the application and its key features, let's dive in!

    Transcript

    Before we get into building the app, let's have a quick look at what the app actually is so we know what we're building. So this is our ChatGPT application. It's an authenticated app, so you actually have to log in in order to use it. So let's log in first. We use the open source NextAuth library to manage our login.

    So in this case, we're going to log in through GitHub, but you can choose one of many different providers including using a database with your own emails and passwords. But let's go and use GitHub because, well, everybody has GitHub, so let's sign in. Now we can see up here that I've logged in, and this is the home page. This is what you actually log in to.

    So over here is my list of saved chats with ChatGPT, and then down here is my input field where I can start a new chat with ChatGPT. So let me try that. I'll hit return, and then I also get forwarded to the chat detail page, which is another

    route, and here I get the transcript of the chat that I've been having with ChatGPT, but I also get a menu of all of the different chats that I've had over time in a parallel route on the side. So let's go click on one of those, and then we go to that route with that chat. There's also one last route, which is the About route, which has an About Us page.

    Finally, I can sign out, and then I'm back to the beginning again. Now what you're looking at here is deployed to localhost, but we'll also be deploying to Versal step-by-step, and so you'll see a full CI/CD flow as we go. So what are we going to be learning in this getting started? Well, we're going to be starting with the fundamentals of Next.js, like file-based routing

    and how that works, client and server components, we're going to dig in there, we're going to look at server actions as well, and then we're going to get into advanced topics like streaming and parallel routes, and this will give you a taste of what the App Writer is truly capable of. I can't wait to get started, so let's jump right in.