Setting up Our Next.js Project
Zenva
ACCESS the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/?zva_src=youtube-fullstackmd
TRANSCRIPT
What's up everyone and welcome to the first section of our project. Here we're just going to do some basic setup. We'll start a new Next.js project and we'll import some images to use. So let's head on over to our IDE right here. So I got again sublime text starts up at an empty instance. Will first need to turn to terminal or command prompt for you Windows users. And we'll want to first decide where we want to save this. So I'll show you in Finder where I want mine. It is- lets actually just get rid of that second window. It's just going to be under desktop again Zenva, Next.js, we're gonna go into course, practice. Actually we'll not put in practice. We'll start a new project right here. So, I'm going to do that now. I'll just navigate to where I need to get to and next, okay, so if I do it in 'ls', I got course and samples put a cd into the courses itself and here I've just got my practice project. Okay, so I'm now going to make it a directory called Project and I'm going to work in here so you'll want to work in whichever directory you just created it doesn't really matter too much what you call it for now, just something that makes sense. We're going to start by initializing NPM. So, we're going to do NPM init-y. This will create our package.json file. So that's cool. We'll then need to install the react and the next packages. So, we'll NPM- in fact let me move that up for you guys. NPM install and then we're going to save it. So, --save react-dom and then next like this. Okay, so this is the same basic setup that we preformed when we were doing our practice setup initially. Okay, so this is going to install react functionality as well as react-dom functionality and of course the next package as well. So, after this we'll need to create a pages directory and I think mine is just being a little bit slow because my internet is slow right now, but once that's done again we'll create a pages directory and then we'll start by putting index file inside of that. Okay, good stuff. So, we'll make a directory now called pages. Okay, so if we do an ls this is what things should look like we're going to I guess we could cd inter pages although it doesn't really matter too much. So, we want to first open package.json before we create our index files so lets go on over to again Sublime Text. Were just going to go ahead and open something. This can be in our Next.js into course and again into that project and of course we're just going to open up package.json. Okay, so need to add a couple lines to our script section we'll be modifying these as we go, but for starters we'll need to add something to dev build and start. ... https://www.youtube.com/watch?v=tVgLYzbP_HM
16553821 Bytes