Setting up a Next.js project - React.js Tutorial

- [Instructor] All right, so now that we're a little bit more familiar with what Next.js is, let's jump right in here and see how to create a Next.js app as well as run it. And we're just going to talk about a few other things as well, such as the basic file structure of the project that we'll be creating. To get started here, you're going to want to just open up a terminal in your IDE and make sure that it's in the folder where you want to actually create the Next.js application, and it will create another nested level of this, just as a heads up. But all you're going to need to do here is run the command npx create-next-app@. The general practice here is to say @latest to use the latest version of create-next-app. But in order to make sure that you're using the same version as I am, my current version is 14.2.8. So you can just add that at the end, and you can be sure that you'll have the same version of this script as I'm going to use. So what this does is it tells this create-next-app script to create a new Next project for us. It's generally not something that you do to set up a Next app just from scratch by clicking and creating files. So the last thing that we have to type here is the name of the folder that we want this to be inside of. And because we're going to be creating a frontend and backend in this same folder, as you'll see, we're not going to have a separate frontend and backend folder. We're just going to call this something like ecommerce. You can call it ecommerce-site or whatever you want. It doesn't really matter what the name of that folder is, as long as it makes sense to you. And then we're going to hit Enter, and it's going to ask us a series of questions here. And what we're going to do for now is we're just going to leave the default options selected. However, I do want to actually discuss what each of these options means so that if you want to change it later on, you can. So first of all, we're going to say yes, that it's okay to proceed. And then here comes a series of questions. It's going to ask us, first of all, if we want to use TypeScript. The answer to this is going to be yes, that's become kind of the default with Next.js lately. Then it's going to ask if we want to use ESLint, which will enforce code styling in our project. It's generally considered a good idea, so we're going to select the default there and say yes. Then it's going to ask us about using Tailwind CSS. If you haven't heard of this thing yet, it's pretty cool CSS strategy that allows you to style different things by adding brief descriptions of what you want them to look like instead of coming up with more abstract class names. I'll leave it up to you to look at that in more detail, although we will be seeing some of that going forward. So we're just going to say yes. The next thing it's going to ask us is if we want to use a separate src/ directory. In order to keep our file structure a little bit more flat, I'm going to say no there, which is the default. And then it's going to ask if we want to use App Router, we're going to select yes for that. And then it's going to ask if we want to customize the default import alias, we're going to say no. And that's going to create our project for us as well as install all of the dependencies and dev dependencies. And there we have it, we've created a new Next.js app, which you can see inside this ecommerce folder. So before we do anything else, let's just change directories into that folder. And we're going to run our application by saying cd ecommerce/, and then we're going to run it by saying npm run dev. All right, let's just hit Enter, and that will run our Next.js application. And if you're using Codespaces, what you're going to want to do is Command + click or Control + click, depending on your operating system, on this link here. And that will open up the link to this thing running on Codespaces, which as you'll notice is not localhost 3000 as it says in the terminal. So this running right here is the boilerplate Next.js application, and you can actually see that inside the app folder. This is where we have some of the main files for our project. We'll take a look at these in much more detail shortly, but if you go into page.tsx, notice that that's a TypeScript React file. What you'll see is that this is exactly what's showing up in the browser there. So if we say, "Save and see your changes instantly," right? This is being displayed over there in the browser. We're going to change this by saying, "I just did," with an exclamation point and we'll save this. And then if we head back over to that other tab, sure enough, we'll see that that change has automatically taken effect. So anyway, that is the basics of creating and running a Next.js app. The next thing that we're going to do is we're going to start creating all of the pages for our application.