Course Project Setup

[00:00:00]
>> Scott Moss: What is Next JS? So I'm guessing everyone here probably hasn't used Next JS in production. Maybe you've dabbled with it, maybe you've seen some videos, things like that. So I'm just going to give you my definition of what Next JS is. It's not wrong, it's not right.

[00:00:13]
It's just my opinion after using it for years now at this point. But the way I like to think about it is that if you think of React is a UI library and not a framework, Next JS is the framework that uses React. And it's great for building hybrid applications.

[00:00:29]
So we'll build that definition of what a hybrid application is. But essentially I think of like a hybrid application is like it's an application that is both, kinda like bleeds between a static website with static pages. So like going to a marketing site, but also an application that's doing like dynamic things on the client, but also things on the server.

[00:00:49]
So and how that happens is very fluid with Next JS, especially with this new version. So it makes it really easy to do that. You could do all of this without Next JS. You can use React, but you're just going to be building a lot of your own opinions and framework around React to do a lot of this.

[00:01:09]
So Next JS gives you a lot of stuff for free. So let's get started. So first thing is make sure you have Node JS at least 20. I haven't tested this below 20. It might work on 18 if you like bun. It works on BUN as well. But just to keep it consistent and everything, I decided to just use Node 20.

[00:01:33]
So make sure you have that. If you don't have Node version 20, I have a link here. You can click and install it from the website. But honestly, you should probably use NVM if you're going to be using Node going forward, just use NVM Node Version Manager. I just have the link here to Node JS because it's just simpler to install.

[00:01:49]
But if you are serious about it, you should definitely use NVM, I think. Let me actually show you what you're going to be doing versus just like. So here it is. Here's the static pages. It's mode. We got our features, we got our pricing page, we have our FAQ.

[00:02:07]
These are all static pages. And then to sign up I'm going to click sign up here. I'm going to put an email. Password. Cool. Then once you get into that, you'll see something that looks like this. The features that we'll be building look pretty simple. You can create an issue.

[00:02:30]
So, hello, hello, got an issue here. Can create that, and then you should see the issue, and then from there you can click on the issue, you can edit it, Change some things.. Edit successful, and then you can delete the issue as well. So basic crud stuff, nothing too complicated, but it's going to give you a tour of all the things that Next JS provides for you, which is way different than any other framework you might have used.

[00:03:06]
Yeah, and there's a lot of stuff happening in the background. Like, I'm doing a lot of delaying to show off, like the loading states. So if you think like, damn, that was really slow, it's because I'm delaying it a lot. So you can see the loading states and things like that.

[00:03:21]
So there's a lot of stuff happening in the background that you don't see in the app. But the app itself is pretty basic. Okay, so, yeah. Pull down this repo, clone it, and then down an NPM install. Like I said, if you want to use bun, you can use bun, but there's a package lock.

[00:03:36]
There's. I think there's also a button lock in there because I accidentally use bun, because I use BUN for everything. But for the course, I'm just going to use NPM. So NPM install all the packages. And then for the first lesson, because technically we're on lesson two right now, we're actually going to start writing code on lesson 3.

[00:03:52]
So you can check out to 03, that's the branch you want to check out to. That'll start you off kind of like the beginning. There will be some code that's already done in there. Like, I'm not gonna sit here and walk you guys how to use tailwind classes and things like that.

[00:04:07]
So, like, a lot of this stuff is already gonna be done. We're just gonna focus on the Next JS specific stuff. So in order to get a complete app, there is gonna be some code already there. But no worries, we'll go through, like how to like start a next JS app from scratch and things like that.

[00:04:21]
So you can kinda get a vibe from that. But to build the app, there will just be this repo that already has some things already done for you. So I'm actually just going to do that as well. Let me stop this checkout. There we go. And then the important thing here is getting set up is that we're going to need some environment variables.

[00:04:41]
If you look in the project. There is a ENV example and there's two environment variables in here. If you don't know what environment variables are, these are just dynamic variables that can be injected server side to your application that's running on the server. This is how you keep things secret and not put them in your repo.

[00:05:02]
So you typically have a ENV file. So this example files are showing you what you need to put in your own ENV file. So make your own ENV file like I did here. And you have to add these two environment variables. And don't worry about the database URL.

[00:05:17]
We're going to walk through how to set that up if you don't have a database and things like that. But just make a ENV file and two things. So the JWT secret, you don't really need to know what this is. This is just for authentication. We will be covering authentication, but we won't be going into the specifics of authentication because it has absolutely nothing to do with Next JS.

[00:05:39]
We'll just talk about the parts that relate to Next JS. But for the JWT secret, you can put whatever string you want. It doesn't matter, just put whatever you want. Then for the database URL, here's where you have some options. They're both super easy. It doesn't get easier than these two options.

[00:05:55]
The first one is if you just have Postgres running locally like I do, just start your Postgres server, go make a database, use that as your URL. And that's what I'm doing. On Mac, I'm using Postgres, the app literally called Postgres, and then post to co, which is something that looks like this.

[00:06:13]
I think I have an older version of it, so if you have it, yours might look different. So I can go connect to my database and I made a database called Mode, so I'm running one locally. The second option, which is also pretty simple, if you don't feel like downloading Postgres, if you don't have it and setting it up and all that stuff, is you can use a hosted one.

[00:06:34]
And there hasn't been an easier way than Instagres. So if you go to Instagres, you can click this link here. It'll bring it to this page. And then there is a link here that says here in your browser, instagres.com/new if you click that, they're going to check to make sure you're not a bad bot.

[00:06:52]
And then voila, you get a database URL. Just copy that. That's going to be your database URL. This database URL is a database hosted on a product called Neon, which is a Postgres. It's a serverless Postgres hosted database service, essentially. So they just spin up a database for you, and they basically allow it to expire in an hour if you don't add it to your account.

[00:07:18]
So you can just keep making these if you want, throughout the course, or if you don't feel like making them after every hour, you can just click that button and make a free NEON account and put it there. So you have options. But this is probably the simplest way to get a database if you don't feel like downloading things.

[00:07:31]
Cool, once you have that, add that database URL to your environment variable file. Like I said, I already have mine. It is my local one. Once you have that, you need to run one command to sync your schema with your database. So in your terminal, please make sure you run NPM.

[00:07:53]
Run db:push. Like this. Yours won't say no changes detected. It'll say changes were detected because this is your first time pushing it up. But I already did this. So mine says no changes detected. But this is essentially syncing your database with your schema, or syncing your schema with your database, or vice versa.

[00:08:17]
So you need to be able to do this to use a database. Once you have that, your database is set up, you never have to touch it again. You're good to go until your Instagres database connection string expires in an hour and you got to do this again or add it to your NEON account.