Setup App & Homepage

[00:00:00]
>> Well, let's just get started. So I'm just going to stop all the stuff that I have that you will be using soon. And we're just gonna start a new, so let's try that. I'm just gonna start a new here. And I'm just gonna make a new directory.

[00:00:16]
Actually, I'm just gonna use create next app, so you can do npx. And then create-next-app. And then, I'm gonna do latest, but caution here. When I do latest this is going to resolve to the latest version as of today. So if you're taking this course in the future and you do latest, you might get a different version than the one I have now, and that version might be a breaking change.

[00:00:46]
So after we do latest, I'm gonna show you the version that it resolves to. So then you can use that version if you're watching this course later to make sure you're on track with what we're doing. So make sure we have that and then I'll just give it a name here, I'll call it AI.

[00:01:00]
Actually, I'll just call it mood, since that's the name of it, so I'm just gonna call it mood. The other thing to note is that you need to make sure you have at least Node.js version 18 installed. 20 works, I think we had people use 20 the other day, and that seems to work fine, but at minimum, it needs to be 18.

[00:01:17]
And that's because 18 has a smorgasbord of features that Next.js 13 relies on. And then now it's just gonna walk you through, if you've ever built an extra ASAP, you've probably seen this before, but it's just gonna walk us through our settings. I typically pick the defaults, but I'll walk through them.

[00:01:32]
So TypeScript, I love TypeScript, although I hate writing types. ESLint, Tailwind, for sure we'll be using Tailwind. I don't care too much about the source directory, this is important, you will use the App router. If you say no here, you will be writing a completely different app, [LAUGH] and you will not be able to follow along.

[00:01:50]
So say yes to App router, if you don't know the App router is. Check out the intro the next day of course we're talking about the App router and how that works, but we'll obviously be using it, so there'll be commentary and we won't mess with this here.

[00:02:04]
And yeah, and then it'll go install all the things, so you can see everything it's installing. We have, TypeScript next, Tailwind post CSS, autoprefixer ESLint, all the things that we need react, react DOM. And that's the important thing to know is that like Next.js isn't necessarily just sitting on top of react, so you still need react here.

[00:02:23]
It's not like some framework that is using react internally, it sits on top of it. So then we'll go into mood and let me make sure I exit out of that VS Code instance, and then we'll just do this, okay? Cool, so now we're here, the very first thing that I like to do is, I'm going to make a new file called a .prettier file.

[00:02:47]
Because my setup doesn't work unless my auto formatting ESLint vs code setup, doesn't work unless I have prettier file. And I also like to just turn off semicolons because I can't stand them. And I like single quotes, I cannot stand double quotes unless it's in a HTML attribute or a JSON object, that's it.

[00:03:12]
I will never use a double quote anywhere else, and I posted, someone asked the other day for that setup for my verses code. I have it here, in a guess, I guess I could post this link somewhere, but I'll just highlight it if that's just too hard to look at.

[00:03:30]
What am I talking about? I gotta post that somewhere. Okay, so let's head back over to our app. All right, so now we have that quick little tour, if you haven't built Next.js in a while or haven't seen the app router, we're not gonna get in too def.

[00:03:41]
That's what the intro course is for, but just to give you a world's view of what we have. I'm just gonna run this right quick, npm run dev. Get this thing going, we're gonna get started on 3,000. Quick tip, if you're in a terminal, you can hold down command, click on any URL and it'll open it in a browser for you.

[00:03:58]
Even if it doesn't highlight like this, it's pretty cool. So just open that up, and then you should see something like this, right? Next.js' standard Hello World app with all the flair that you could expect from for sale, with the consistent branding. So yeah, you'll get this pretty cool.

[00:04:18]
And then in the app directory, we just have these four files, right we have a favicon. If you don't have the favicon is, it's this logo that goes in a tab of your browser. That's what if avocados, and a global CSS file, we have this layout file and we have a page.

[00:04:33]
So I'm just gonna reset all of this gonna go into this home page and delete everything, we don't want that stuff there. I'm just gonna return a div inside of here. I'm going to turn off my GitHub co-pilot for now, cuz it's really annoying when I'm trying to teach.

[00:04:49]
It recommends stuff I don't wanna do, and then it gets in the way of the autocomplete. So I'm just gonna say home here, I don't need this image. And then for the global CSS, I don't need any of this other than the tailwind directives up top. So I just got rid of all of that.

[00:05:09]
So just doing a reset here, that way we don't have any of that stuff there. All right, and just for sanity check, our app still works, we didn't break anything. Should be good to go on that.