Create a Next.js App from Scratch

[00:00:00]
>> Scott Moss: Hopefully, everybody got their database set up in their environment variable file. So, yeah, once you get that set up, you might try to run the app and you'll see that it's broken. Well, the objective today is to fix that, so it's broken intentionally. But before we dive into the app, as I promised, I'm gonna show you how to set up a Next.js app from scratch, it's actually pretty simple.

[00:00:22]
So without further ado, let's do that. I'm gonna just make a new window here in my terminal. And the simple way to do this is just to do NPX. If you don't know what NPX is, I don't know the best way to describe it, it's like there's global packages you can download from NPM and you just don't want to download them, you just wanna use them.

[00:00:46]
NPX allows you to do that, essentially. So I can say NPX and I can say Create Next App. So if I were to do this, this would create a Next app. But just to give you a little more tips on what you could do to make this better, we are today gonna be using a Canary version.

[00:01:01]
So I'm just gonna say Canary, even though this doesn't matter because we're not gonna use this app that we're scaffolding right now, but just letting you know and then typically the directory in which you want to install this app. So if I wanted to install this app in a directory called TODOs, then I would put TODOs here.

[00:01:16]
So this is gonna create a Next.js app on the Canary branch inside a folder on my computer called TODOs. So if I do that, it's like, yeah, do you wanna install that? I'm like, yes, and then it starts asking me all these questions. Do you want TypeScript? I don't know why you would not use TypeScript, because you don't have to use the types.

[00:01:37]
Do you want ESLint? I absolutely do. Do you want Tailwind? I don't know if this installs Tailwind 4 or 3, but yeah, I want Tailwind. This one is asking if you want to embed your whole app in the source directory. Some people like that, especially if you have like monorepos and stuff.

[00:01:56]
I hate that, so I'm gonna [LAUGH] Say no. App Router, we'll talk more about App Router, but always, yes, don't use anything else but App Router unless you are already in a legacy Next.js app that has a Pages router. But if you're building one from scratch, always use the App Router.

[00:02:13]
I know, Next.js13 has a bad rep with bad rep with the App Router. People hated it, but 15 is so much better. It's come a long way. Give it a chance, guys, stop hating just use [LAUGH] The App Router, it's actually really good. Okay, Turbopack, Turbopack has come a long way.

[00:02:29]
If you don't know what that is, it's like they ditched wetpack and they made wetpack again, but in rust and it's called Turbopack and it's actually way faster, but it's not compatible. As far as I know, it's not compatible with production deployment on Vercel. So because of that we're not gonna use it, but in Dev Mode it's pretty good.

[00:02:47]
But you also lose out on tons of compatibility with tons of things. So no, don't use that. This is just some typescript aliasing stuff. And then there you go. It'll just go off and install all these things. And typically, from here you don't really need to do anything, you're pretty set up.

[00:03:05]
There's like one thing that I do from here and I'll show you it's just one thing that I have to do, otherwise I'll go absolutely crazy. The only thing I do from here is I just make a prettier file because if I don't do this, my prettier extension will freak out prettierrc.

[00:03:22]
And I hate semicolons, so I always put semi false, can't stand them. And I also like single quotes, so I put single quotes, that's just my preference. Once I have that, you're pretty much good, you can start this thing up. You can see what you get. So I'm gonna do NPM, run dev that'll start this up on 3000 by default.

[00:03:47]
It'll launch a new one if that port is already taken. So we can go there and see what we got. And you get this, you get a nice Next.js website that points to the docs has a button here that gets you set up with deploying it, everything that you need.

[00:04:06]
So pretty simple, just a tour of what you get when you go through. I don't wanna spoil it too much since we're gonna talk about a lot of this stuff, but essentially just gives you a single index page, a layout for that page to be rendered in. And we'll talk about layouts a lot and some default CSS for the dark theme.

[00:04:25]
And then obviously, it set up Tailwind for me cuz I said set up Tailwind, so it went ahead and did all of that. But other than that, pretty basic, pretty simple. They are using, this is Tailwind 4, nice. Yeah, this is Tailwind 4. So they do use Tailwind 4, that's great.

[00:04:41]
So other than that, yes, pretty basic, really great way to get started. I feel like it's a good blend of not doing too much, but it's mostly like for the configuration side, right? Like for the Tailwind and the ESLint and stuff like that. If you look at Next.js, it's literally just three files here.

[00:05:00]
They didn't really do much on the Next.js side, so pretty good though. But that's probably, the best way to get started with next.js.