Next.js Typescript Project Setup with React Testing Library -- Part 1: Project Start

hey what's up guys this is leo and i'm back today with another um setup tutorial this time we are going to be setting up a next js front-end project uh using typescript eslint prettier again and we will also be including jest and react testing library so yeah let's get started so to start us off we first need to initialize our next js project and the way to do this is by going into the directive that you want to create the project and go just yarn create next app and then just name your app um whatever you want so for this one i will be using next ts front end and it will take a little bit so all right now that that's done um we can open up visual studio code and we can go in and see what that create next app is kind of uh built for us and to start it off you can see that it kind of made this package.json with kind of just like some default scripts that we can use to run our project some default react and next dependencies we can see that it created this uh pages directory and if you're not familiar with what the pages directory does it pretty much just handles all of the routing for you so pretty much if i wanted to create let's say like an about page all i'd have to really do in here is just create about.js go about creating the page and then um my app will know to route slash about so like localhost about to this about page so that's really nice it just saves you a lot of time from having to set up like a react router or something like that the next directory that it creates for you is public and if you're not familiar with what public does this is pretty much just nexus directory for sharing static files so any kind of file that you include in here can be accessed anywhere within your program um usually used for just um yeah like i mentioned static files one thing to note is that you should not ever name a file within public directory with the same name as another file in the pages directory this will cause an error so be careful with that and the last thing that i created for us was just a kind of just a simple styles um global directory that we can use for our um template that we've got so far and a git ignore so this is just some classic uh next js ignore things so like ignore the next folder that it builds and the out folder and things like that all right now that we have the project set up and i've kind of explained a little bit of what each directory does we can start um adding our dependencies um so for the first thing i like to do with front end projects is i do like to add um an ax a dev dependency on this library called ax core and if you're not familiar with what ax core does it's pretty much just an accessibility test engine and if you're not familiar with what accessibility is it pretty much just makes your website more easily accessible to people with disabilities so it's really nice for your friend projects because your lighthouse score does kind of get impacted by how accessible your website is to people with disabilities and all you got to do is just yarn ad add capital d x core so then there you go you'll have that as a dev dependency all right and now that we're ready to start configuring typescript we just need to install some of the dependencies for it to work correctly and this being the typescript library ts node types node types react types react dom this will allow us to use typescript with our next js application and once that's all installed we can go ahead and create um the ts config file and if this all seems very familiar it's because it's very similar to my setup back-end project but um we're just going to do things a little bit differently in this video we're just going to go ahead and just finalize the ts config file right away and so i'm just going to copy that and paste that here um i'm going to kind of show a little bit so if you guys want to pause and kind of go along this will also be in the final github so if you don't want to go through and have to write all these hand by hand you can just go through it into the github repo and just copy it from there um so yeah just a couple of quick little differences is that we are targeting es5 um that being since this is a front-end project we do need to uh make sure that our project compiles down to uh browser old browser compatibilities um and then the rest is just a couple of pretty straightforward things so like preserve jsx create some paths for absolute paths that we will um add later make sure to include these files in our build exclude these files in our build and yeah so that kind of just finalizes the um typescript configuration right away and with that configured we can start configuring eslint and so if you don't have the plugin already installed what you can do is go to the vs code plugin section and find this eslint plugin by dirk install that and once you've installed that what we're going to do is we're going to add the eslint library as a dev dependency so that we can actually work with eslint and then after um installing that dependency what we're going to do is we're going to initialize uh the eslint file and this does look a little small so let me zoom in so what we're going to do for our options is we're going to use this to check syntax find problems and enforce code style we're going to use uh javascript import export react of course it uses typescript since this is a nexjs project we will be using both browser and node since you can do that with nexjs we're going to use a popular style guide again airbnb javascript and say yes to install all of these dev dependencies all right now that that's finished installing all of those uh dev dependencies uh first thing we need to do if you are using yarn you need to go back in and for some reason um the npx eslint command will use npm even if you are using yarn so let's delete that package lock json and um let's go over what the configuration is just really quick as you can see we just have created this environment for us where we have node es 2021 browser just uh the react plug-in recommended airbnb use the typescript parser we will be using jsx with version 12 and also just use the react and the typescript eslint and we will be changing this um but this is just kind of a quick overview of what that's doing and next thing we should do is let's just quickly add um not yarn um just add a eslint ignore file this is just so that um we're not trying to uh lint any kind of files that don't really need to be linted for example we don't really care about uh the next folder being linted known modules being linted um and then later for later on because i always forget to kind of do this i will be adding coverage which is just our test files that we will be adding um later on in the video and so yeah so we are done with the initial setup of eslint and what we can do next is we can start setting up prettier so same thing with eslint if you go into the marketplace you can look for the prettier plug-in and you will see this code formatter right here so um prettier by prettier make sure you install that once you install that you can just do the same thing with as easily let's install prettier as a dev dependency this will install the library so that it can be used and what we're going to do while that is initializing is that is taking a little while we're going to just create a dot prettier rc file so this will just be our prettier configuration file that we can kind of specify what options we want prettier to run with and the options that i kind of like to run it with are these right here i do enjoy tab width of 2 print width of 120 that can be changed depending on your preference um do use single quotes trailing comma es5 and always put a semicolon and so that should be all you really need to get prettier configured so we can go back now and we can look at finishing up the eslint configuration so one the first thing we got to do to finish up setting up the eslint with prettier is that we do need to add some dev dependencies for the prettier plug-in as well as the prettier config these will just allow um eslint and prettier to play nice with each other and then the next thing we're going to do is we do need to modify our eslint configuration file and what i'm going to do here is i'm just going to oh that is for sure not what i was trying to do let's copy that from my notes here and just extend a couple of different plugins that we are going to be using so these plugins are pretty much uh just a quick overview we're going to be using the typescript eslint recommended the react recommended if you like using react hooks we're going to be importing the configuration for the react hooks recommended airbnb the prettier recommended the import um plugins for errors warnings and typescript as well as the jsx ally for this is for our accessibility rules so this will give us some warnings and errors when our accessibility is off and um next thing we're going to change is that since we've changed the extends we're also going to change the plug-ins to be um in order for these uh configurations to work we do need to um also define some of the plugins and these are just going to be react react hooks typescript eslint prettier import and jsx ally and then the last thing that we need to change is we're going to add some basic rules for now and that being we're just going to add the prettier rules through an error the react in jsf scope i like turning that off um i don't also like the file name extension turn that off and um also turn off the import extensions so that's just some of the things i like to use you could play around with the different rules that you'd like and the next thing we got to do is let's test it out and make sure everything is working correctly and by that we are going to start changing around some of the default files that they gave us to typescript so yeah let's start changing uh some of these classic javascript files to be typescript just so that we can make sure that everything is working correctly so first file i'm going to change is this app.js and i'm going to change it to uh just a quick tsx file and i'm going to import from my notes the typescript version of the file i'm going to also change the index.js and i'm going to modify it to um tsx as well as get rid of that and import the um the typescript version of it and then the last file i'm going to change is the api route of hello.js and i'm going to change that to a typescript file and same thing modify it to the typescript version of it and um sorry that i'm copying and pasting this kind of stuff i don't really want to go through and waste our time seeing me uh first of all probably type everything in correctly because i got a new keyboard so sometimes i've been just fat fingering everything all right now that we've changed all of our javascript files to typescript the last thing i like to do is add absolute imports what that will allow us to do as you can see right now is we're using these uh relative paths in order to import and so with absolute paths what we could do is instead of having it like this we could just have um something kind of like this where we can just use an alias in order to reference our directory um direct directory directly and the in order for us to get this to work we need to add one more dev dependency of eslint import resolver for typescript and after we add that we can finally finalize our eslint configuration file and so the new things that i'm adding on here so it does look a little bit different is all of the extensions and the plugins and everything is still the same but i am adding some new rules and these rules are the import no unresolved error and then also i do like to add kind of like an import order rule and so if you're unfamiliar with what this does is it will throw an error whenever uh your imports are not in a certain order and then i'm pretty sure that prettier will auto format them to be in the order that you specify so the order that i'm using here is just first built in an external internal parent sibling object index and since we are using react i do put react as part as the external and that will just make sure that your react imports are at the top of your import list make sure that it is alphabetized so that if you do kind of do chaining imports they are in alphabetical order and then we don't need new lines because that just takes up space and then the last two settings that we have are in order for the absolute imports to work we do need to specify this import resolver um for the typescript project and just specify that the project the ts config file is just in the root directory that we're currently in and just to detect the version of react so that the eslint plug-in for react can figure out which configuration to use and so yeah if we have configured this eslint file correctly if we go to back to our app.tsx page we can finally see that the alias for absolute imports is working and so with that we have finished pretty much the base setup of this next js project with typescript eslint and prettier and in the next video i will be going over adding debugging just the testing framework as well as react test library so thanks so much for watching and please leave a like or a comment if you have any feedback or if you would want to see something else i greatly appreciate any kind of feedback that i get from you guys and thanks again

Channel: Leo Roese

Views: 2,637

Keywords: typescript, nextjs, react, react testing library, programming

Id: 7Fcx8taSPEs

Length: 15min 21sec (921 seconds)

Published: Mon Apr 12 2021