From the course: The Freelance Stack: Real Project with Next.js and Strapi

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

From the course: The Freelance Stack: Real Project with Next.js and Strapi

Start my 1-month free trial Buy for my team

Setting up a Next.js project

“

Okay, cool. So in order for us to get started with Next.js, what we can use is we can just go and say npx create-next-app-at-latest. This will install the latest version that is currently stable. And if you're wondering where I got that from, the Next.js documentation is the perfect place to get started with anything here. So if you click on installation, you're going to see that here it gives you exactly the command I just told you about. You can also, and you're going to see that later when we're in the project, specify the version number that you want here. So for us in the project I'm going to recommend you to use 13.55 just to make sure that all the features are actually working as expected on both of our machines. But for now you can just go with add latest as well because we're going to create a new project when we're starting with the main surf camp website. So and now it's asking me to install number 14 which literally just dropped yesterday and there aren't that many different features so we could say yes for now but I'm just to make sure I will go and say okay let me get actually the one that we're also going to be using on the course. So it's 13.55 here. What's your project name? Well my project name is for now crash course like that. I don't want to use TypeScript in this one. We want to use ESLint. No need for Tailwinds CSS and we don't want to have the source directory. Instead, we want the app router with the app directory and no need for customized imports. Just like that. And now it's going to install. And once again, right, also for me in preparation of this crash course. The docs here honestly have the best kind of information around Next.js and how it works. We're going to walk through all the things you're going to need for the course, but if you ever come across anything that you haven't seen here or things that you want to do on top, this is the place to go. Especially since a lot of people at the beginning are struggling with server components, client components, the difference, what do I use where, and so and so forth, and it really shows you here that all of that in detail. Now we have just installed, or at least in my background, it ran through the terminal here. I have now a crash course folder, which I'm going to go into right here, and then I'll start with Visual Studio Code. You can use any IDE you want, but for me I got the best experience with Visual Studio Code. So the very first thing you can do in here is you can just run npm run dev and that will create or that will start your Next.js server. It will also tell you where it's doing that and here it should go to localhost 3000. When you click on it, there you go, and then you also actually have the direct link to the docs. Cool. Otherwise, this is how you, I mean, this is how you get the project started. The files in here, there's not actually a lot that we have to talk about right now without needing to get started. What we can do already is if we go into our app folder, we can go in our page.js and just for now, in our main, basically get rid of everything else that's in here right now and just go and maybe create an h1 that we're gonna we don't need a class name an h1 where we say hello world just like that and then if you go back to the browser you should have updated your website okay cool so everything works and since everything works we can move on to routing

Contents