From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Creating first project - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Creating first project

“

Now, let's start creating the first Next.js project. Let me first of all open the official site Next.js org. Now here you can see the command npx create next app at latest, which creates the application using the latest Next.js version. But before that, I'll click on docs and installation for more details. Now here you can see that we need Node.js 18.17 or above. So make sure that you have installed it. And after that, we just have to run the npx create next app command. Instead of using npx, you can use other options. Let me click here on create next app link. And if I scroll down, we have npx, yarn, pnpm and bunx as well. But we will stick to npx at the moment. So let's go to the terminal and I'll say npx create-next-app try-app. Now the moment I press enter, it is going to ask me a few questions. The first thing is, do we need to proceed with the create next app installation for the project? I'll say yes. The next important question is, do we want to use TypeScript or not? I will say no at the moment. I'll say yes to ESLint, and we won't be using Tailwind at the moment. Next, it is asking about the project structure, that is, do we want the src that is the source directory or not. If you say yes to this, then it will create an src folder, which will further have an app folder. And if you say no, then it will create an app folder directly without the src folder. I will say yes so that it will create an src folder because when you have more components, having an src folder will help you to organize the code better, which we will see practically further in the tutorial. Even if you say no, it's not going to harm, but standard structure can be better, but having an src folder will have its own advantage. Now the next question is about using the app router. Let me first of all switch to the official site. Here when I click on the using app router link, you can see there are two options. One is the app router and the second is pages router. These are two different ways of implementing routers and we will be learning both of them. But at the moment, I'll go with yes, that is, we will use the app router, which is the latest feature introduced after Next.js 13. And the last question is, do we need to customize the default import alias? Here I'll say no. And now the app is created. Let's switch to the try app folder. I'll run the development server by saying npm run dev. Now the moment I give this command, there is a .next folder created as you can see here. And now the server is running, and we can check the application on this URL. This .next folder has its own significance, but we will discuss at a later stage. Now let us go to the browser and I will say localhost and here we have the application running. In the next lecture, we will understand the project structure.

Contents