Creating a Next.js App

[00:00:00]
>> Brian Holt: All right, we're going to go create the Next app. We're going to use the create Next app creation thing here. I will say again, I'm just going to call out here, by the time that this is being watched and after it's been edited, the version of Next is going to be going up constantly. And in particular with Next, they do ship a decent amount of breaking changes. So you're probably going to have to fix these things as we go.

[00:00:29]
Like, notice this is saying at latest, like you might be watching when Next 17's out and they might have broken some other things. It's just kind of going to have to go. This will be written on Next 16, which came out like this week. Luckily there was no breaking changes between 15 and 16 that affected this course, so I think you're pretty safe. I didn't use any of the frontier features here.

[00:00:57]
We are using Turbopack, but that's now stable, so yeah, oh yeah, I gotta go update this, says 15, we are using 16. Yeah, so let's copy and paste this. I'm just going to go on my desktop. And npx create-next-app@latest, and I'm going to call it Wiki Masters because that's what I called my wiki, you can call it whatever you want though. It's going to ask you some questions. You say yes to proceed.

[00:01:42]
And I'm going to say customized settings. So yes, we want TypeScript. I chose to use Biome. I have no problem with ESLint or anything like that, but it just seemed to be kind of the new thing that people were using, so I gave it a shot here. Honestly, at the end of the day, it doesn't really matter. As long as you're running your lint rules, I don't really care. And then there's like OXLint coming out as well.

[00:02:14]
OXC. Okay, it is called OXLint. I'm not crazy. This is from the Vite team, so I would say expect to start seeing this more as well, but it's not built into Next yet, so I'm not going to do it. So we'll use Biome. Do you want to use React compiler? You know, you could say yes here. I'm going to say no because I did not build this course with the React compiler, which just shipped with Next 16.

[00:02:41]
If you want, like there's a whole section of my last course on React compiler, you can check that out. This would probably work. I'm just fearful that I built this entire course without it, that it's going to break stuff, and it's not really that important to what we're doing. So we're going to say no for now. Yes, use Tailwind. Yes, we want a source directory. We do want to use App Router.

[00:03:05]
We do want to use Turbopack. We do want to customize the import alias. Super nice to do this. I'll show you what this means when we get there. Oh, sorry, don't customize it, but we do want to use it. And there we go. That will create for you a new Next.js app. Okay, I'm going to go in here, npm install. Everything's all good. I'm going to say npm run dev. Localhost:3000. And there we go.

[00:03:50]
We're done. That's the entire course. Full stack Next. No, this actually looks a little bit nicer than it used to. That's cool. You get this little Next dev tool down here. It'll give you a bunch of stuff of like what kind of route this is, is Turbopack enabled, yeah, all very cool stuff. And let's just go ahead and open this in code. So let's kind of orient ourselves here. We have our source directory, and inside of the source directory there's the app directory, that is the App Router as opposed to the Pages Router, which is the Next concept.

[00:04:33]
I got some globals layout. This is the layout's going to be like something that's going to be applied on every page, you'll see on here, they'll have like their HTML here, and then the children inside of it, and then the actual page itself, which is the home page, is going to be this one. Pretty minimal Biome configuration here, which is cool. Next config, there's usually not much here.

[00:05:05]
Pretty bog standard TypeScript configuration. I mean, nothing here should really surprise you too much. If you're taking this course, you've probably seen this before. So let's go ahead and run some of the commands here just to get you kind of familiar. We're going to run npm run lint. This will run Biome for us. This will check to see both formatting, so we don't need Prettier anymore as well for this, because Biome also does the formatting, and this will also run the linter rules as well.

[00:05:41]
So you can see no fixes applied. If you do have issues with Biome, you can also run --fix, and if you want to live on the edge like I normally do, I also put unsafe in here as well, because this will fix more things that just sometimes you'll hit like corner cases that it could break, whereas like fix, they kind of guarantee this will never break anything. Unsafe, it's like, yeah, you're probably not going to break anything, or let me rephrase that, it's never broken anything for me personally.

[00:06:11]
So I just, that's why I always run it. In this particular case, there was nothing to fix, so it just doesn't. You can also do npx biome format, I think, yeah, and that'll actually go through and run the formatter, so check will just fix linting rules, format will actually go run like the Prettier kind of formatting. Okay, and then we want to run. I guess that's what npm run format is, yeah, okay, that is what npm run format does.

[00:06:47]
And then you have run dev there, which we just looked at as well. I also like to put in here in my package.json how much they don't put in type check. And that's just going to be tsc --noEmit. The only reason I put this in here, I have kind of two rules. One is like, I don't assume anyone's editor. So if I'm depending on this to be checked in in a certain way, then I'm just going to go put it in the package.json.

[00:07:15]
It also kind of signifies to future like co-pilots and Claudes that like, this is how you would check these things and like allows them to do that. So again, npm run type check. And then we'll actually, we'll build this into our CI/CD at the end as well, which is important. While I have you here, if you're using VS Code like me, or one of the VS Code flavors like Cursor or Windsurf, go ahead and install the Biome editor or the Biome extension rather.

[00:07:51]
This one. So I have it installed already. I need to enable it again. This will like actually run Biome while you're editing something. One note is that if you are, if you have my entire repo open at the same time, so all the steps are in the same VS Code window, that this doesn't work, which is a pain. Ask me how I know. So if you're trying to like keep it all in one VS Code window, just know that it will not be checking your Biome settings.

[00:08:27]
Okay. So, I got one thing for you to fix. This actually might not be a problem anymore, it's in Next 15, but we're going to put it in here because I have it in my notes. We're going to say, this is in the Next config, we're going to say import __dirname from node:path and we're going to put one configuration here, which is turbopack, root is __dirname. __filename. This is just telling Turbopack where like the actual absolute path of where we are at the moment.

[00:09:23]
This will suppress a lot of warnings in the future, so it's just helpful to do. I hope that they fixed that with 16, but who knows, I don't know. Okay. So, npm run dev, this should still work. We haven't really done anything, but. All right. So, looking back at my course notes here. This is the first checkpoint. So if you go to 00 start here, the state of the repo here is where we are so far.

[00:00:00]
And actually, it's probably even diverged a little bit because this will be like the more recent version of create-next-app, right? So, it actually might be a little bit different.