Build a Fullstack App with Next.js, v2 Setup Next.js App

[00:00:00]
>> So first thing is let's install Next.js and let's get started. So like I said, this is from scratch, there's no repo. We're just gonna do this right from nothing. So I'm just gonna go in here and I'm gonna make a new folder and I'm gonna do just that.

[00:00:17] So, oop, this thing just decided to go over here, there we go. And the best way to do this is just to say npx, make this a little bigger, npx create-next-app. And actually I have the copy and paste here, just create-next-app@latest. And you want to pass this --experimental-app flag.

[00:00:39] This is so we can use the app directory that Next.js 13 has in beta. And that enables us to get some of the new features like server components, client components, caching, all the really cool stuff that's covered in the V1 intro of the Next.js course. So be sure to do that.

[00:00:57] Hit Enter. Call it whatever you want. I'm gonna call it project app. I'm using TypeScripts. You don't have to use TypeScripts if you don't want to. I do recommend using ESLints and let it do its job. So while that's installing, we can just kinda go through these dependencies here that are unrelated to Next.js that we also have to install.

[00:01:23] This is a full stack app, we're gonna need some more dependencies. So here they are. If you look at the notes here, I put them here in the JSON file because I think it's just simple just to put this in your package JSON and hit npm-install than it is to type it all out in the terminal in the npm-install with all the names.

[00:01:40] So what you can do is, you can see that this is done installing. We're going to open it up in VS Code, Here. Oops, I guess I saw cd into it. Here we go. And go to our package.json. Here in our dependencies, here's everything that was installed. And what I'm gonna do now is I'm just going to take all these other dependencies that are unrelated to Next.js.

[00:02:17] And I'm just going to put them in our dependencies, and I'll probably have some duplicates, and if you have duplicates, you can delete them, it's totally fine. And I'm gonna save that. All right, so we need to install some other dependencies as well in addition to the Next.js stuff.

[00:02:34] So if you copy the dependencies that I have in the notes, you can just add them to your dependencies object, like so. I don't have extra object here. Yeah, so you can just add them here, and then all you have to do is just do an npm-install like that and it'll install them.

[00:02:51] So I think this is way quicker if you already have it versus just typing them all in a CLI like that So I got those. And I believe we have some dev dependencies we need to install. So we got some dev dependencies, we'll copy those, And we'll go back to the code here.

[00:03:15] And you're gonna say devDependencies and paste those in. And we're gonna go through all of these, why we need them, what they do, but for now, we're just getting installed. You just run np- install again. Yes?
>> Do you know why the create-next-app doesn't put TypeScript and ESLint and whatnot in dev dependencies?

[00:03:45]
>> That's a good question. So I think the whole dev dependencies versus dependencies subject is not as important as it used to be. I think it was really important back when Node was on Heroku and they had all these build packs and all this stuff, right? And there was a difference between installing your dev dependencies and not your dev dependencies.

[00:04:08] But I think now the way that platforms deploy your applications, like a platform like Vercel or Netlify, they're just gonna install everything, because you have to. There's so much building that needs to go on, so they're just so used to that. So I think for the most part, unless you're making a library that's gonna be on npm, it doesn't really matter if it's in-depth dependencies or not.

[00:04:29] Because it's probably gonna get installed on every environment that it's on, whether it's on your teammate's computer or if it's been deployed somewhere. So it could be that, it could be that Next.js is where application framework, so everything is a dependency and nothing's a dev dependency, versus a library where you might have dev dependencies.

[00:04:52] Good question. Okay, and then just to walk through, just to get you back up to speed and familiar with Next.js, we have the scripts here. The def script is what we run to start our server locally. The build script is what a platform would run when they deploy it and start, it's what happens in production.

[00:05:14] And lint does exactly what it sounds like, it lints. Well, most of you is using the dev here until we get to deployment much later on where we're gonna deploy. But for now, we're just gonna be doing Next.dev. And just a quick tour around Next.js here, so we have this new app directory, which is now the pages directory or what the pages directory used to be, as far as like making pages.

[00:05:37] We also still have the pages directory here, but it's only used for API routes now, no longer used for actual pages on the site. And then everything else is pretty much the same. Only thing you might find different here in the next config. You'll see experimentalapp.true. That's gonna be past that flag, so it added it for us.

[00:05:57] This is so we can actually use the app directory inside of Next.js V13. Wthout this, we won't be able to use it. Cool, any questions on this? No, and if you want just to check your sanity, you can just run npm run dev, Which I have so many things running.

[00:06:20] I need to stop some things. And you can go here. You should see this if you installed everything right, so. But don't worry, we're going to get rid of this, even though it looks nice. Okay, let's keep it moving. So let's talk about all the folders that we're gonna make.

[00:06:44] And again, yes, some of this is gonna be convention, but the other part is gonna be just my thoughts and my opinions on how I'll like to organize my application. So there's really no right or wrong here. It's just kinda how I like to do things. So the first thing is, we talked about the app directory, right?

[00:07:08] And this is where all pages go, pretty much everything related to pages and layouts and loading states and error states, everything the app directory enables. But then we also have the assets folder. So if we go here, there isn't one, because Next.js doesn't have a convention for something called assets.

[00:07:30] That is something that I like to have, so I'm gonna make a new folder here and I'm gonna call it assets. And my icons, I get this really cool icon here. Actually, I think the zoom level is not right, I'm gonna change the zoom level. There we go.

[00:07:51] So assets is basically where I'm just gonna put images, things like that, you can put them there. Components, this is also not a conventional folder that Next.js cares about. It's just where I put my non-page components. Let's call it components. Some people will have a components folder where they have more complicated bigger components, not yet pages, but then they have a UI folder where it's these buttons, inputs, these little bitty components that you'll find in component lib.

[00:08:24] This just too noisy for me, I'm gonna put everything in a components folder. So that's kinda my vibe. It's not right, it's not wrong, it's just, I don't like organizing all that stuff. But I can see if you were a huge team or a huge code base, you would do that.

[00:08:38] Another folder I like to use is lib. Lib is just basically all my non-JSX, all my non-React code that I wanna use. So these are utility functions like hashing passwords for the database, signing JSON web tokens, API file for us to talk to our API and just abstracts that away.

[00:09:01] So everything that's non related to JSX and React goes in the lib folder. It's like our own personal module folder. We still have pages. Again, pages is mostly just gonna be used for API. It's not really gonna be used for anything else, but it's here. We will be making API routes in this course, so we will be using it.

[00:09:21] It id a full stack course, so you can't really go far without making API at least when it comes to mutating things. You can go for now just from getting stuff, but mutating,, no. And then the last one I like to have is styles. So styles is exactly what it sounds like.

[00:09:38] It's where I put most of my styles. In this course, we don't really have a lot of styles cuz we're gonna be using Tailwind. Because if we made our own custom styles, I mean 90% of the course will just be us writing CSS, and no, I don't wanna do that.

[00:09:54] Even though Tailwind has a lot of classes, so it still feels like you're writing a lot, at least in my opinion, but I'm not a Tailwind hater anymore. I've come to terms with it that it's good, so let's do a lot of classes. This isn't right or wrong, this is just how I like to organize my app.

[00:10:09] I pretty much do it for every single app.