Introduction to Next.js Getting Started with Next.js

Transcript from the "Getting Started with Next.js" Lesson

[00:00:00]
>> So I'm gonna go ahead and pull down that repo, I have it here. I'm gonna check out to the start branch, if you're on the master branch, you'll actually see the complete repo, completely done. We don't wanna start there, we actually just wanna start at like a very blank bare minimum repo.

[00:00:17] I mean, you could even just make a brand new one here, you don't even have to pull this down. If you don't wanna follow along or wanna follow along no this you just wanna have your own separate repo, that's fine. cuz I'm basically starting from scratch here. If you open this up, you can see what I have here is literally nothing.

[00:00:33] So [LAUGH] there's no source code and there's just some dot files and a package.json. So this is where we're gonna be starting, we're really gonna do this from scratch. So, let's talk about what you or how you can get started with Next.js, and there's really two ways and they're both stupid easy.

[00:00:53] So let's talk about the easy way and then we'll talk about the other easy way. The first easy way is to use the create-next-app, ere, like here, forgot it, used to create-next-app CLI, so if you're familiar with npx, you can use npx create-next-app. If you don't know what npx basically you can think of it as like a inline installer for a CLI.

[00:01:18] So instead of installing the CLI first, and then calling the CLI you can just put npx in front of it and it'll one time install the CLI right now, and then execute the command without it actually being on your computer. So if you're npm you can do that, if you like yarn, you can yarn and do that.

[00:01:36] So that's very easy way it'll scaffold out a lot of stuff for you. Really good, what we're gonna do is we're gonna do this other way, which is also still pretty easy, we're just gonna do it manually. So, to set one up from scratch, all we need to do is install three dependencies, so if we're using npm, you can do npm-instal-react-react-dom, and next, which is the big one.

[00:01:59] If you're using yarn you can use yarn, add these things, so I'm using yarn, someone's gonna copy that, and I'm just gonna yarn add those things here. And like I said, it's really just three dependencies, react, react-dom, and next, there really is nothing else. There's no router, at next router, or there's none of that, it's all here, it's all ready to go.

[00:02:21] So next, we need to add some helpful scripts through our package.json, so you just copy these scripts here. And we'll just go ahead and put those into our package.json. And don't forget to put your commas there, otherwise your thing will break. And let's talk about the scripts a little bit.

[00:02:41] So the first one here is the dev script, which just runs next, and basically what this does is it's just going to run your Next.js application in a development mode, using something very similar to hot module reloading. If you've heard of that before, well I think Next.js calls it like fast reloading or something like that, so we get that for free.

[00:03:07] If you run the build command, it's gonna build your application and get it ready for production. And then you run the start command is actually gonna start that build. And so basically only use these two when you're ready to go to production and you'll almost always just use this one when you're developing.

[00:03:22] So, but my computer just booted up cuz VSCode like just eats up my CPU, so I'm just gonna just kill that right quick. Let me see, I actually its zoom, I thought it was VSCode this time. Usually it's VSCode that has like 110% of my CPU but okay, it's all good.

[00:03:43] Okay, let's go back to the actual thing here, where we talk about those commands. And like I said, remember, Next.js is a full stack framework. So by default, it needs to be hosted on a platform that supports Node, and the reason I'm saying that is because you'll see this next build his next start.

[00:03:59] If you've ever only been shipping static websites, you wouldn't have a start command, like why would you just start a static website doesn't make any sense? Well, that's because this is a node framework, and by default, cuz you can opt out of this, you don't have to. But by default, it does the need to be deployed somewhere with Next.js, or I'm sorry, with Node.js.

[00:04:18] And we'll talk about deployment later on, but just remember that.