Build a Fullstack Music App with Next.js Setup Next.js, ESLint, & Typescript

Transcript from the "Setup Next.js, ESLint, & Typescript" Lesson

[00:00:00]
>> So let's do that. I'm going to stop what I have now. And we're just gonna make a brand new app. In my terminal here, so I go back out. And what I'm gonna do is I'm gonna use a tool called NPX. MPX should have came installed with NPM.

[00:00:16] If you have, I think, I don't know what version of node that NPX shipped with, but if you have any relatively new version of node in the last two years, you probably have NPX. If not, just upgrade your version of node to like, I want to say the minimum, I think I said it before which was 12, you should be good there.

[00:00:32] NPX just allows you to run global NPM commands without actually installing those commands on your computer, it's pretty cool. So we're gonna use one called create-next-app. And there's this framework called Next.js that sits on top of React. We're gonna talk more about it, but there's gonna say NPX create next app.

[00:00:53] And then you can give the folder a name. In this case, I'm gonna call it myapp, I'm gonna hit enter. And as you can see right now, it's saying it's installing React, React DOM and something called next. We'll let that install and it's installing some eslint stuff, some really cool things happening here.

[00:01:11] Once that's done, I'm gonna cd into myapp. And I'm gonna open this thing up. So here we are in VS code. And what the create next app does is just a CLI that scaffolds out a HelloWorld Next.js app for us. And here are all the files. And if you wanted to run this right quick just to see what it is, you can just type in npm run dev like that.

[00:01:34] And it'll start this up on 3000. Go to check it out and you get this beautiful Next.js React application. I actually have previously taught courses on Next.js here for the masters. There's a intro one and then like a more production focused one. So if you really wanna dive deep into Next.js, and you wanna get the details of that, check those courses out because I do cover that in a lot more detail.

[00:01:57] Although, we will be getting intimate with Next.js in this course as well. So if you haven't used it, it's not a big deal as long as you understand React, you're gonna be fine. It's not a dependency or anything like that. Next.js is just a bunch of conventions on top of React, it doesn't really do anything differently, sweet.

[00:02:14] So we have the helloworld Next.js app. Let's get over to the code and just kind of give you a tour what's happening here. So first we have our pages directory, which are gonna be all the pages and the routes that we have. We also have our API folder, because Next.js is actually a full stack framework.

[00:02:29] So in this course, we won't actually be, I mean, if you think about it, there's multiple ways to make a full stack app, right? Like you have the traditional full stack app from like 2012 or something where you would have a Python server or a node server that's actually serving the assets of your frontend.

[00:02:46] And then we got smarter and was like, now we have single page applications. Maybe we should host our single page application on a CDN. And then we have an API and JSON server. So that's like level two. Well now, we're coming back to this whole monolith thing where it's like, well, what if we just want everything in one app?

[00:03:02] But the backend architecture is different. So although we're back now to having a backend and a frontend in the same application, the way that they're deployed and the way they're used in architecture that defines them is completely different than having a constantly running server that's serving static assets.

[00:03:19] Now we still are using a CDN, now we're using serverless functions but we get the benefit of having them both live side by side. And in the case of Next.js, we get the benefit of writing backend code and a frontend component. It's gonna get pretty crazy here, so the lines are gonna get blurrier when we're on the frontend and when we're on the backend because there's no definite line between them.

[00:03:41] So it's gonna get really blurry which is actually a feature of Next.js so I kind of love that. And you'll see what I'm talking about very soon. So we got the pages directory here, we got our public stuff that's where you can put assets like images, things like that.

[00:03:52] Styles folder, we won't be using styles folder here, we'll be styling our components completely different. And then everything else is just configuration so nothing special here. So if we head over to the link that I sent you for that notion, there should be some, if you scroll down to where it says configs, there should be some stuff here to copy and paste for your configuration files.

[00:04:17] So this is just my eslint configuration that I use. I put this here because I felt like it'd be helpful. I spent so many years, months, weeks, just trying to figure out a really good eslint setup for different projects. So I went ahead and put the one that I use to create this app here.

[00:04:33] So feel free to copy this one. And add this to your eslint config and then I'm going to go over to our code. There's a eslint, rc.json. I'm actually just gonna rename mine to be eslintrc.js and not JSON because I don't like writing JSON if I can write JavaScript.

[00:04:53] So I'm just gonna write JavaScript and save, and paste that in to a module exports, so we are good there. And then the next thing is I want to use TypeScript, so there's a tsconfig here. Next.js is actually really cool is that it'll detect TypeScript for us it'll set up a tsconfig, I'm actually just gonna wait before I paste that and we'll get to that stuff later.

[00:05:15] So I'm not gonna paste the tsconfig stuff yet but I am going to take this babelrc file and paste that over. So we're gonna make a new file on the route, call it .babelrc with no file extension, and I'm gonna paste that in there. This is actually to help us with a pretty nuanced, I wouldn't say bug, but there's an issue with parsing JSON inside of these data functions inside of Next.js when it comes to things like date objects or circular things like that, the JSON parser freaks out.

[00:05:49] This fixes it so it's just something to fix a bug that we will definitely run into later. When we get there I'll remind you of why we did this. You'll see why we did that. And then the next thing is to get to someone asked earlier, what are all the dependencies that we're using.

[00:06:02] Here they are, here are all the dependencies that we are using in this project. So I'm actually just gonna go ahead and copy all of these dependencies here, there we go. I feel like it'd be much easier to copy and put these in a package JSON than into NPM install all these in a terminal, so that can get really tedious.

[00:06:20] So I'm gonna copy those, put them in a package JSON, go down to our dependencies objects here, and I'm just gonna hit paste. We'll definitely have duplicates with the Next.js and the React and stuff. So I'm just gonna delete the duplicates, there we go. Make sure it's formatted as JSON, make sure your commas are good and stuff like that.

[00:06:40] And then we also have the same thing for our dev dependencies. So tons of dev dependencies here mostly for the eslint stuff but we're gonna copy some of that as well and paste those in the dev dependencies like so. There we go. So once you get all of that, you should be able to go back to your terminal.

[00:07:02] I'm gonna open up a new terminal actually, and I'm gonna go back into my code here. And you should just be able to type in NPM install or NPM I for short. And I should read the package.json and just install all the stuff that you pasted in there.

[00:07:21] So probably gonna take a minute because it's a lot of dependencies. Any questions so far?
>> I don't know if it's just my machine thing but because I have Yarn installed it defaulted to that. And so running NPM has given me issues but running Yarn is working. I just thought I bring that up, it's running.

[00:07:38]
>> Yeah, if you're using Yarn, it'll still read the package JSON. So if you're using Yarn or if you prefer Yarn, you should just be able to do Yarn install and it should give you the same effect as well. We're not using anything unique to NPM in this course.

[00:07:52] So everything that we're doing, every time you see me run a command with NPM, you can substitute that with Yarn and it should work exactly the same. So, now that we have all of this, the next thing that I want to do is set up the TypeScript. So the easiest way to do that actually is I'm just gonna go to the pages directory, see where it says, index.js.

[00:08:11] I'm just gonna change that to index.tsx, if you don't know what the tsx extension is, it's just TypeScript JSX, that's what the extension is. That's just an extension that they came up with, but it's basically TypeScript JSX which today is just a TypeScript file, we're literally only using TypeScript.

[00:08:31] Honestly, it's for the database types that we get for free. We will not be making custom types and things like that. So if you're like, my God, I don't know TypeScript, that's fine. That's not a requirement for this course. We're just using the latest tsx features and getting some nice code completion with some of the database tooling that we're gonna get.

[00:08:50] Other than that, we will pretty much be opting out of all things type related, so no need to be a TypeScript expert here. I'm also gonna change this appjs to app.tsx as well. And again, the process that I've walked you through is literally how I get started with a project.

[00:09:07] I literally do these exact same steps. The only thing different will be instead of pasting in a bag of dependencies in the package JSON, I would have just said NPM install inside of a terminal, that's it. Everything else is exactly the same, I do this stuff all the time.

[00:09:20] So once we have that, what you can do is you can stop the server if it's already running. And if you go try to run it again with NPM run dev, it's gonna say, hey, we detected TypeScript in your project. And we created a tsconfig file for you, right?

[00:09:35] It's pretty awesome, Next.js is pretty cool. So I'm gonna stop that again. Gonna go back to the notes. I'm gonna scroll up to that tsconfig that I said don't touch yet. And now I'm gonna grab it and put it in there. Although, I do think it's the same thing that they created.

[00:09:50] I don't think I actually changed anything. But just to be safe, I'm gonna copy and paste it anyway because I'm pretty sure it's the same thing. So I'm gonna go to my tsconfig, copy and paste that and yeah, this was definitely the same. Mark?
>> Can you explain the difference between _app.jsx and index?

[00:10:09]
>> Yeah, absolutely. So it's an Next.js convention. The way that this works in Next.js is that anything in the pages folder is gonna get a route associated with it on a router. So we don't actually have to configure a router here in Next.js. Is gonna be based off the file names inside the pages folder.

[00:10:27] So in this case, we have an index.tsx that's gonna create a route for slash, the route of our app. Underscore app basically means, hey, I don't want a route to be created. And in this case underscore app as far as Next.js concerned, it's gonna be the route of our application.

[00:10:44] So if you were creating a React app today, and you had probably like an index file or app file where you bootstrapped your React app to the DOM, that's what underscore app is. This is where you would have done that, except you don't actually have to bootstrap it to the DOM, Next.js does that for you.

[00:11:04] But this is the route of your application. It's gonna be pretty much the entry point to every page on a component or every page on your app. Underscore just means, don't make a route for this. If I got rid of the underscore, Next.js would actually make a route called slash app and it will load that component, which is not what we want here.

[00:11:21] This is the entry to our application where it's like every component here that I'm highlighting would be a page. It all gets rendered inside of this app. It's a convention. Again, you can learn more about that in the next year's course that I taught earlier, and it goes over a lot of stuff in detail.

[00:11:38] There are some more conventions that we'll be doing and I'll talk about them as we do them because newer things have come out since I taught that course. So Next.js is evolving. Max is asking about the red underline stuff here. So this is basically my editor freaking out because I'm violating my own eslint rules.

[00:11:57] So it's like, you need to fix this. I can fix it manually or I can use something called prettier that will just fix it for me automatically. But basically, this one is just an error function, so I'll just do that, And then, it wants to exports, default, home.

[00:12:17] And it wants to be nice, there we go. So it's just my editor freaking out about not having error functions. So that's the eslint, that's my own eslint config I guess it's doing its job.