Setting up the Next.js project - ChatGPT Tutorial

- [Instructor] Let's get started by setting up our Next.js project and installing all the dependencies we'll need. For this, you need to open the terminal on your dev environments. If you're working in Codespaces, you'll have VS Code already open, and you can access the terminal by hitting control or command on Mac, plus Shift, plus P, and type in terminal. Then select the Toggle Terminal option. Now, we need to run the command npx create-next-app@latest then give a space for the project name. If you're using Codespaces, just type full stop. So the next.js project is generated in the current directory, which has already been named AI-chatbots. If you're using a local terminal, you can either do the same if you're satisfied with your current directory, or write a new name in place of the dot for the project. So you can go with ai-chatbot. But for now, let's go with the dot. Next.js is going to ask us some configuration questions. For task script, we'll select no to keep things simple, and for the others, we can go with the default options. So for ESLint, Yes, yes for Tailwind. Yes, yes. Yes for Turbopack, no further import alias customization. And Next.js has started setting up our project. This may take a minute as it installs the base dependencies. Great. That is done successfully. Let's move into our project directory and see what we have so far. Now, these are our files created and generated successfully by Next.js. And with the basic project created, we need to install the specific packages for our AI chatbot. I'm just going to open another terminal to keep things clean. And then let's type npn install @ai-sdk, so ai-sdk/openai. This lets us connect to open AI's models. We'll also need ai-sdk/react for providing react hooks for our AI features. We need AI, the core Vercel AI SDK, and then Dexie, which is a wrapper around IndexedDB. We'll also need dexie react hooks, which gives us react hooks for dexie. We need lucide react for the icons of our interface. And finally, react markdown. React markdown helps our app when that, the markdown responses from the AI, giving us nice formatting. Now, let's hit Enter. Great, that's installed successfully. The next thing we need to do is structure our project, and we can go back to our file explorer where we have our files and notice that we already have an SRC directory. And it need, there's an app directory, which will contain a main Next.js pages and API routes. For now, you can see the favicon.ico file which contains the default favicon for our app. There's a globals.css file, a layout.js file, and a page.js file. We'll go through all these files later on. For our app, we'll need a components directory to hold reusable react components. So let's create one in the SRC or source directory. I'll right click on SRC here. It's new folder, then type components. We'll also need a lead directory to hold utility functions and a database setup. We still want to do that in the SRC folder, and we have lib. And finally, a Styles directory in the source folder to hold our CSS files. With everything in place, let's start our development sever tool. Make sure our Next.js project is working properly. So back to our terminal. We'll run npm run dev. And great, our server is running successfully on local host:3001, and we can now open it in our browser to see our Next.js app running. This shows the default Next.js welcome page, which means our setup is working correctly. Now, take some time to explore the project structure. Look at the files in the src/app directory, and try to understand how they work together. This will help you get familiar with the Next.js app route before we start building our own components.