Setup Next.js

[00:00:00]
>> Now that we're all experts on server components, let's talk about the number one feature in Next.js, and then we'll write some code, is basically the routing. So I have some notes here that kinda talk about routing but we can go over this, so I'm just gonna open my editor and we're just going to start working on our app.

[00:00:19]
So I think the first thing we wanna do is, before we get in there and get busy with the routing, let's just get everything set up, that way we can start actually working on this app. So what I'm going to do is I'm just gonna make it a repo here.

[00:00:34]
Let me see, actually, one of the best ways to get started is to use create-react-app. The problem with that, though, is that I just wanna be locked into a certain version, I'm sorry, not create-react-app, create-next-app. The problem with that, though, is I wanna be locked into a certain version with this course going forward to make sure it's backwards compatible.

[00:00:52]
So just keeping that in mind if you're following along, whatever version we download what create-react-app.dev, that's the version you wanna make sure you have going forward, otherwise future versions might break this course. But anyway, I'm just gonna type npx. If you don't know what npx is, it actually comes installed with Node, it's basically a way for you to run global CLIs without having to download those CLIs.

[00:01:13]
So npx and then create-next-app like this. I'm just gonna say @latest, which is gonna give me the latest. We'll see what version that resolves to and that's the version you're gonna make sure you have. If you're taking this course, after this recording, make sure you have this version, we'll talk about it.

[00:01:29]
And then I can put an optional folder name here, I'll just say intro-v3-app, and I'll do that. And then now it's gonna give you this prompt of different configurations you wanna use, so asking me to use TypeScript, I'm going to say yes, I love TypeScript. ESLint, for sure, Tailwind, yes.

[00:01:50]
Source directory, so by default, Next.js works on the root of this directory. If you wanna put all that into a folder called source, you can do that, I'm gonna say no. Use the App Router, we'll talk about the App Router, but yes, definitely use the App Router. Would you like to customize the default import aliases?

[00:02:09]
Don't worry about that right now, I'd say no. And then it's just gonna install everything.
>> So is Tailwind kinda becoming the standard of using?
>> I hate to say it, but yeah. And the reason I hate to say it is-
>> Also in inline styling, it's-
>> Yeah, I know.

[00:02:24]
The reason I hate to say it is cuz I personally just don't like writing tons of CSS classes, all of my components, and for the longest I just did not understand or like to. And I didn't know why people use it, I'm like, I don't get it, I would just rather just use a component library, I don't know, that already has styled components, and then just edit those styles with inline styling that I need.

[00:02:44]
But I've gotten to this point where I've realized I was doing more editing of component libraries to fit the style that I need, and it was probably faster for me to start with components that didn't have any style and add the style that I needed. So then I found myself writing my own CSS, and then I was like, well, I don't wanna write my own CSS, this is gross, there's gotta be a CSS library out there, and then it was Tailwind.

[00:03:08]
But even then I still didn't stick to it, I think what changed my mind is I had the wrong idea of it. I thought Tailwind was just a CSS library like a Bootstrap, but in reality, it's a JavaScript library that generates CSS dynamically. And that was when I was like, wait, this is really powerful.

[00:03:25]
So that plus me learning about headless components, which are components that have functionality but no styling associated with it, kinda solved my problem. So I can get the functionality of these components that look like crap and then just add Tailwind to it and it was great. So yeah, I would say it's pretty much the standard at this point if you like this style of styling.

[00:03:47]
Obviously, there's other different types of styling, we'll talk about some of them, but if you like using CSS classes, it's basically free. So you just gotta learn Tailwind, right? But they do do a good job of making sure the class names match the property names in CSS so it's almost intuitive, so you kinda get the hang of it really quick.

[00:04:04]
Let's just go check out what we got, so I'm gonna open this up in my VS Code editor. I got a lot of things going on there. Actually, let me cd into it first. How about that? So intro-v3, what do I call it? App, and I'm gonna open this.

[00:04:22]
So we get a lot of things here, but the first thing I wanna check out is just everything that got installed. So if you head to the package.json, which if you don't know, is just the file that keeps track of all of our dependencies in our Node project, and we can take a look at the dependencies in the field here and see a few things.

[00:04:38]
The most important one is that we see next. So next itself is a dependency in which we download, and you can see that we resolve to 13.4.5. So if you are following along, if you're watching this later and you have troubles with any errors, it's probably cuz you did the latest command and got a different version.

[00:04:58]
So what you can do is you can just say, instead of what we did, which was @latest, you can just do @13.4.5. Just to make sure you have the exact same version that we're using right now since it might be a later version in the future. So you do that, hit Enter, you'll pretty much get the same thing.

[00:05:17]
So we have that, you can see that we opted in for the esLint things. So we have all the linting stuff, we get some types set up because we asked for TypeScript. Autoprefixer, which is pretty much needed by Tailwind, postcss also needed by Tailwind. Because Next.js sits on top of React, we get all the React goodies, Tailwind itself, and then because I opted in for TypeScript, I get TypeScript.

[00:05:39]
We also get a few commands here. So we get a dev command which we'll be using to develop with locally, gives us fast refresh, hot reload, a server to serve, all the really cool things. The build and start command is for production, this is where we'll build the actual app and then we can start it in production.

[00:05:56]
You almost will never use this locally unless you're testing to see if it works in production. And then lint command does exactly what you think it does, it lints. And I'm gonna ignore the linter today, so red squigglies give you anxiety, you're about to have a lot of anxiety today cuz-

[00:06:10]
>> [LAUGH]
>> [LAUGH] I'm pretty much gonna ignore it. [LAUGH] So yeah, and then yeah, everything else is pretty standard. And you can see it also set up the configurations for a lot of these things. So it set up the postcss.config, it set up the tailwind.config with our paths to our app already configured, some custom stuff here for their initial app that you'll see in a minute.

[00:06:36]
If you opted in for TypeScript, you can see TypeScript is already set up. We got some alias paths, all that good stuff, so pretty much good to go. We also have this next.config, we'll talk about that, but the most important one to look at is this app folder.

[00:06:50]
So this app folder, if you remember, there was an option when I did create-next-app, it was like, do you wanna use the App Router or no? It was yes or no, and I said you should probably pick yes on this. This is the new version of Next.js that I was talking about.

[00:07:02]
Right, like if we head over to the Next.js documentation here, I'm gonna blow this up. You can see here on the side there's a dropdown for Pages Router and App Router, right? We are using the App Router. This is what's new in 13, and we'll talk about that in literally just a second, but this is what we wanna opt in to.

[00:07:20]
And the way that reflects in the repo is that there is a folder called app. You actually have to have a folder called app in order to opt into this. So yeah, and then once you look in here, you'll see a couple things, something called a page, something called a layout.

[00:07:35]
If you've never seen a TSX file, that's just the TypeScript version of a JSX file. That's all it is, it's nothing crazy. So if you know JSX in JavaScript, then you know how to use TSX, because it's the same thing but TypeScript, which like I said, I probably won't be using any types at all.

[00:07:54]
Have a CSS file and then a favicon. So the next thing I wanna do is I want to start this. So to start this, like I said, we're gonna use the dev command. So we can just say npm run dev to run that dev script. And you'll see that it's going to start it on a port, it tried to use 3000, in my case, I already have something running on 3000, so it went to 3001.

[00:08:17]
I can just Cmd+Click on this and open it up. And you should see something like this. So this is the stock Next.js scaffold app that they give you out the gate. Everyone should see the same thing, unless they changed it in a later version and you're looking at this later and it doesn't look like this, but this is what you get by default on this version.

[00:08:40]
And yeah, it's pretty cool, and everything here just kinda links to their documentation so you can check it out, but it's a great starting point. One last thing I'm gonna do is I'm gonna make a new file on the root, call it .prettierrc. And the reason I'm doing this is because I wanna be able to hit Save and have everything be auto formatted with esLint and prettier, and prettier won't work unless you have a prettier configuration on your route.

[00:09:07]
And I also like to have my single quotes, I hate double quotes, and I also don't like semicolons, so I'm turning those off. You don't have to have this, this is only because my VS Code is looking for this. My prettier esLint plugins inside my VS Code is looking for this file in order for it to work.

[00:09:26]
Yours might be set up differently, so you can add it, it won't change the functionality or anything on your app. Just allows me to get formatting when I hit Save, which is something that I cannot live without at this point.