Next.js 14 + Typescript Tutorial | BEGINNERS WELCOMED (1-hour)

hey guys what's going on this is uh program with Pags here and I'm going to build a tutorial with you guys on nextjs 14 in typescript this tutorial is going to be for all levels um I hope regardless where you're at at any part of the total poll there's something to learn here so um let's go ahead and dive in so all all I've done so far is just pull open vs code I just made a folder an empty folder that is titled next JS and I'm going to drag and drop this folder into uh vs code and um down here in my terminal if it's not open go ahead and open your terminal uh you can press control and uh Tilda on Mac or or find the terminal um uh Tab and and fire that open and I'm going to go ahead and say MPX create next app uh create-- app at latest and slash um the slash for saying that I'm creating it in this specific folder that we just named and next is great next is awesome it it pops up with a a bunch of these these configurations that we can we can add to our projects so um me personally I use typescript um in in all of my professional career I've uh actually every every employment that I've I've ever had typescript was involved so um I would highly highly highly recommend it um so I'm going to go ahead and say Yes here and I'll have a video on on typescript as well down the road um es lent um absolutely these are lenting rules code quality tail one CSS amazing for for stylesheets uh Source directory is kind of getting deprecated um app router very much in style so I'll say yes for that would you like to customize import Alias uh no the at R is is fine so um boom and as you can see quickly pops open our nextjs project you can see that it's uploading um it's configuring all of the things and being that this is an nextjs with typescript tutorial um that's hugely important so I have a few shorts on typescripts they're a little bit higher uh level uh bird's eye view and here here we're just going to get a little bit more uh granular we're still going to keep the concept simple but but I I want to show building with typescript and and what that could look like so all I'm doing now is just firing open a uh Local Host and pulling up my my Dev server on the right here as you can see so um that's popped up now nextjs this is just our starter template that every nextjs project comes with out of the box so I'm going to pop open the app folder you could see our next uh uh build folder here that that gets generated whenever we run a server um and and you might deal with layout in cashing or layout chunk errors and caching errors likely all if that ever pops up for you if you see a chunk layout command just delete your build folder and every time you run a server you can see it already popped one up um so all it'll do it'll just compile all the latest code if if there's any potential changes um and you usually don't even have to do that just sometimes there's there's you know maybe a tiny thing so consider that a potential uh route to fix fix small rendering bugs um you can see we have our app folder just with predominantly all of our our layout stuff our Pages our TSX our Global CSS exist in here our favon exist in here um you can see we have our node modules for any npm packages our Publix folder um your public folder actually is very relevant for pwas and uh generating manifest files um you can see other things the es lent that we chose we can put our rules in here we have our G ignore if there's any certain packages or or folders or uh you know environmental uh variables that we want to uh hide from our our git repo uh we would obviously put that all here next M uh to declare any types that maybe don't come out of the package in PM packages um our config again for pwas and other things yeah there's a ton more Tailwind config or readme all that stuff we can we can configure at a high level here but for the sake of this tutorial I'll leave that for you guys when you're building your projects and need to mess with configurations I'm just giving you a bird's eyee quick run through uh just two minute blip that that you know again remember that there's these things that you know if you have any um configurations feel free to look at them you know feel free to dive in I know I know um I actually had a a a guy reach out on on LinkedIn say hey can you make more Junior friendly content this this stuff is a little higher level um but this is where I want to take an opportunity and say no no these config files all this stuff do not be afraid to dive into it don't don't view yourself as a junior I can't touch these things view yourself as no let me figure it out there's other human beings who are maybe maybe they have a dash of experience but they're not smarter than you they're not objectively out of a completely different IQ level than you that you can't mess with config files or something it's like no mess with them break a few things see how it goes if if it breaks undo it you know it's not a big deal so uh just want to give you guys that little blip but let's dive into the app folder the app directory is where we're going to spend a lot of our time just building code um so I want a bit of a quicker thing today uh all I'm going to do is delete this real quick just the main to main so um I just shrunk all that let me close the um let me close the terminal I just shrunk all that and highlighted it really quick so I'm just going to close it and pop a div here and I'll say homepage um oh and I'm going to open back the terminal and oh it is running so let me just refresh the page make sure it says homepage just give me a sec I just want to make sure uh everything's lined up before we we depart on the tutorial so boom there it is we see the homepage um so we know we know that that the server's up we know that we have our nextjs project Let's uh let's dive in it's just going to be a simple thing all I want to cover today is um uh kind of a front to back build almost to the full back end um we're going to build a basic to-do list and and I think this is perfect for all levels um not just the to-do list of of hey let's just build a front end component but we're actually going to query some apis and and I want to show you guys how that looks in xjs in a really streamlined fashion it's it's amazing so if that's something you haven't done this is going to be amazing for you um let me lead the way and show you how to do it and how easy it is you'll get it in no time and if you have done it hey stick around maybe maybe there's something that that uh that we do different and and maybe you can teach me or or maybe there's something to learn still so um let's dive in so this will be the homepage for the to-do list let me just put a class name here I'm going to zoom in guys so you can see a little bit better um so it's just going to say class name I'll say Flex w-f justify Center and items Center and one last thing M uh men height full or screen actually it's what what I want to do so so um so that's what it should look like and we're just going to say a list page or um you know we could we could also change it it doesn't have to be a to-do list all it is is simply a data table that queries something and shows the data so um it could be an items list it could be a customer list it could be um yeah it could be a few an orders list fill in the blank but getting the fundamentals down of building these these data devices that hold data that you can scroll through that's important so um we're not going to do pagination I will have a separate tutorial for that I will have a separate tutorial for linking up databases and all these other things this is just going to be integration so that's a lot of talking let me uh let me just kind of get in the flow for a moment um what I want to do here is build another div and I just gave me some space and this div uh is actually going to hold another div and the div within the div the the subd um this is going to be the beginning of our to-do list so so I want to say to-do um item right like this will be our item oh and we need to add one thing to this parent div right here say Flex We need to say flex-all to make everything stack on top of each other so um this to-do item is where our to-do item is going to exist we'll have many to-do items so maybe we'll have three of them and what I want to say in this class here is flex Flex dasco uh with F this this div online 7 I'll say background gray uh we could say Dash 900 right so you can see um we're we're building out this this this background this separate component from from the list page title um so in fact I'm not going to say with full I'll say with uh 10 / 12 do something a little bit smaller than the page width 10 / 12 uh you know something like that is fine I'll say p-8 to give us a little padding say rounded MD say shadow I personally always like to add just a little bit of Shadows on stuff and I'll say my4 just to give us a little space from that list page so so we have almost a um oh I'm going to change this padding to padding D4 actually not a huge deal if yours looking a little bit different not the end of the world at all build it as you need it so um this to-do item let's style it up a bit right we're going to say uh class name um BG uh actually I won't say background white forgive me but I will say background uh gray maybe 700 right I want them to be cards within the list or or a list of these items that um so I'm going to hit command X command X let's see let's see how that kind of looks yeah so so it looks okay um but the the thing is we we would need to round the top one right and then we we would need to round the bottom one so I'm going to show you guys how to do that in a list in a moment here um but we need to keep track of that with the data so uh let's do a thing real quick where we're going to now start to integrate typescript and make this a a data bit so me as a front end engineer I I I want to start on building frontend components as I roughly see them and and I'm I'm always a sucker for putting in hard code but when I'm at a point where I see the rough idea okay here's here's my list here's here's what it kind of looks like I want to get to data as soon as quick as quick as possible as soon as possible reason being you're going to have to deal with data a lot there's there's things you got to deal with queries fetches um you know a ton of ton of things so so let's let's build out our to-do fully right and and maybe maybe I don't want to build out the data bit 100% right now let's let's build out the to-do fully so first we're going to have this to-do title right so maybe you're looking at your your figma documentation you you recognize these things let me let me um delete these bottom two to-dos real quick we'll we'll bring them back in don't you guys worry so we should have this this right here this uh div with a div within it and the reason why I'm doing a camel casing like this is because I'm I'm starting to think about the data so I have it to do title maybe I have it to do uh like category uh maybe I have like this this piece of data that that is something else to-do completed maybe it just signifies if the to-do is completed or not um and let me give you an example of this so if I go to YouTube you you want to think in data terms so so if I look at this video all I'm defining here is just kind of what I see so maybe maybe one parameter is like the video thumbnail so so my data would have that bit in there i' would say video thumbnail in camel casing the next bit I have a video title it looks like you know so call call it whatever you want like video headline Video Main description um but for me it looks like a video title that would represent that piece of data then we have a video sub description so maybe the video uh secondary text or or video sub description or description all those names are perfectly fine but you want to get a lens of looking at at things with the data lens you know so this third line it says sponsored but maybe maybe on the data side I would say video sponsor you know something like that so so we want to define the structure of our data is all I'm saying um so if we go back to our to-do list and we know we want a title we know we want a category we know we we're going to have a to-do ID a few things like this let's let's go ahead and build out the data for this and I know it looks a little bit funky guys so let's let's actually add a flex right here and we'll say with that Dash full justify between so it spreads everything out it's all in the same same uh same line that card exist on the same line and let's build this data out so this data right here I'm going to come up to the top of the screen I'm going to say type to do and I need to do an equals and then open up my curries and you always want to start your your data at least majority of the time with a ID so I always I always preface my types with the type I'm building so if I if I did a video I would say video ID if I was building um a task I'd say task ID but we're building a to-do so I say Todo ID but however you want to do it is appropriate some people just do ID like this um but that's that's not me so I'm going to say to do ID um it just keeps it easy for me down the road when I'm handling data in different areas just streamlines my my workflow but do what works for you um but I'm going to say to-do ID then we'll say too and we're just going to steal all of these ones so Tod do title that's going to go there I'm going to Define it as a string um just cuz it's going to be text value maybe your ID could be a number value then I'll take this one to-do category say to-do category string boom and to-do completed this one's going to be a Boolean so it's just going to be a one or two value a true or false um and you could use a number like data types can be used interactively like you could literally use zero and one if you wanted to use numbers that still represents a Boolean that's how programmers did it for a very long time so um but point being is we now have a to-do type built out we now have our structure for our to-do here and ready to go so we can now make a ton of these cards tens of them in the same structured format every time and this is why typescript is really really important I know a lot of people say well there's typescript gymnastics there's all these things but it's really really really important that we we follow the same models of data you know if you're working with a team or a future codebase with other people they need to be able to come in there and say well how does it how is this shaped what's what's this all about so typescripts really important um but let's go ahead and build some mock data so I'm going to take this to-do type and I'm going to build something um a bunch of to-dos so I'll say const to-dos equals I'm going to open it up with an array and in this array I need to model this data data so I'm going to steal every piece of data right so I'll say to-do and it says it's a string so I'll just give it a number one make it a string not thinking too much about it guys just just following the steps and the second step to do title so I'll take that I'll do a um a string value here and I'll give it a title I'll say uh go to gem sounds like a to-do title that I might need to do we have a to-do category um maybe we don't need a to do category but that's fine I'll say it's part of the health category right then we have to-do completed I'll say true that's fine now we have one Todo with with data labels associated with it so all these these labels will show here in this card um and we now have one piece of data fully built out that is modeling R Todo and how do we know it's modeling R to-do here here well let's let's make sure that our type is modeling our to-dos so we can go to cons to-dos and I say colon and then I add our to-do here but you can see we're getting a red underline and the reason is is because it's not just a to-do it's an array of to-dos so how we notate that in typescript is we throw a to-do right here with the array symbol and now we can make a ton of to-dos and our types will all be the same um so I'm going to delete all that you guys did not need to do that um and I do want to make one more to-do though or at least two more maybe one or two more right let's give the second one a to-do ID instead of go to gym I'll say make dinner maybe right I guess it's still relevant to health and I'll put false hasn't been done yet let's build one more right so to do ID we'll say three and um what's it good to do brush teeth uh well these are all health related so maybe maybe I won't do that say study for exam um and then the category education right and now we kind of have three bits of data that are all modeled in the same format and we notice otherwise it would throw an error right if if we had one of these models missing we'll see typescript will throw an air it'll say no no no the data is not correct here and I recognized that when I first learned typescript I looked at this part and I was like well why is this relevant wouldn't I just not care would can I just do this and and it's all good and you you absolutely can what I used to call it what I've heard friends call it as well as typescript gymnastics why why why the typescript gymnastics why is it relevant it's relevant because we're going to be dealing with a ton of data um I'll give you guys an example with my application team Sinker I'm I'm building out a ton of components and there's there's a few users on it now there's um 70 users and when I look at it right when we pull up uh let me just pull up the database there's tasks there's tasks there's uh descriptions there's projects there's there's a lot going on so there's 126 projects and you can see that they're all labeled they all have their ID they all have their project status um some of them don't I did make it conditional so I'll cover that in in a um in a video in the future but but majority of the data coming in is matching the same title the same project the same project status in the same name now a lot of these are test projects a lot of them are me but I'll go to the users as well and if I show you guys some of the users um these are these are my test emails right here so uh but I know some of these are not I don't want to disclose um their emails yeah so like this person I I did just dox their email forgive me but um there there's a few emails and a few there's 70 users but I need to format the data in the same all the time all the time so being that there's you know probably six six or s accounts that are mine um I'm testing to make sure my user functions work my posting functions work cuz when you're dealing with real Productions think you need these things to work bulletproof it's important to retest test again test again test again so here's here's a new feature is this report function that I'm generating and again I need this data to be in the same format every single time and when I'm taking on users and again I have a user count that just simply tracks numbers that can be a little bit less intensive but when we look at other things right subscriptions and and see who has a premium subscription see who has a free subscription right I I need to know whose subscription status is what so that's where a lot of these these subscriptions are are tied with user IDs and I need to know that so um or or you know handle air cases but but the fundamental thing that I'm trying to get across to you guys is you need you need your data to be structured when you're dealing with all these apis because you can see on the left there's a ton of different data bits in this thing there's there's bugs there's um and let's let's see what some users have have said user can't navigate to dashboard that was a real users's bug this is another one Nan is showing at the top for the project um it keeps it easy when I know oh this person's talking about about a bug cuz it says bug description bug title this person says this was me this is a live test that's my user id but this is someone else first of all great project second when you click on some link on the sidebar Boom the the thing I'm just trying to educate you guys is I can't have this just say description and I can't say it have random things when you know when a user's posting stuff so it's really really really imperative to keep track of your types and build these strong structures that that will last across time and most importantly let you know what the data is about so the reason and the reason for that second bit too is is you know I've I've seen Engineers who do stuff like this like oh I'll just put I here oh I'll just put T here for title I'll put C here for category but if I'm a new user I'll never know that in in you know if if if I'm or not a new user but a new developer for a team I'll I'll have to ask questions every day what is this T what is this I what is this P what is this B so don't do things like that I would prefer verbos code than not verbos code personally um at least when it comes to naming I would much rather have it say no this is what it is this is the piece of data this is what it is this is the piece of data and just consistently do that so um just wanted to give you guys a live example but let's let's dive back into building the to-do list so here are my to-dos I want to copy this to-do down and we're going to build out some of this in mapping now so I'm going to go right here below this div I'm going to open up a curly bracket put to-do press map and uh and do do map excuse me and say to-do and then I'm going to Arrow function into all of this right here so I'm going to go down copy it press command C delete it and I'm going to open this up so so we look like this I'm going to put two react fragments here and then pop that pasted text in and you can see now we have three titles pop out or three three cards pop out if you will so that's how we know that this data is linked up now to this to-do list that the to-dos do map is linked up to our Todo data um reason being is because if I add another for instance I should see a fourth and there it is so this is a easy mock shift way for me to build data on the front end in prep my components to start receiving data from the back end that's all I'm doing um let's now build this out a little bit more so I'll say to-do and I'll come down to my to-do title here and I'll wrap this to-do title in curries then I'll say dot or excuse me I'll go to the other side and say to do Dot to-do title and then I'll do that for all of them so I'll wrap this one in Curly's I'll say to-do do too. category I'll do the same thing here I'll wrap it with curries say to-do do too completed and you'll see on the left on the right excuse me all those things just got populated now we we can't see the Boolean value it's just true false value but what we can do is declare if it's completed or not completed right so we should see that value now completed not completed completed not completed right but now we're accessing this data directly in our front end component and we still have it as frontend data which is perfectly fine but we're going to make it back in data in a moment so let me take this rounded out it's kind of messing things up a little and it just looks square it looks really ugly let's let's kind of clean these cards up a bit so online 38 I'm going to say p-4 to give our cards a little bit more space and then I want to do one thing with this class name I'm going to conditionally render of a top and bottom rounding so to do that I need to go to the to-do up here I need to add a comma and this is our I this is our index now I always declare Index idx this way that's because of uh clemit the uh Google and algo expert YouTuber very good guy um and I'm going to take this index and I'm going to utilize it in the class name so to do that I'm going to give this an open curly and a closed curly and I'm going to wrap it with these back ticks so there's two back ticks back here and then I'm going to go over here to the left and just add another back tick so I've class name open curly back tick all of our class stuff close it with a back tick and an ending curly brace it brace um and now I can add this idx to conditionally render things in here like this I can now use this as a piece of logic to um to to show different CSS classing so let's do that I'm going to say todd. length if that equals the index but I need Tod do. length minus one there's a there's a rounding error right we're taking the length of this which is three the length is three but the index started zero it starts so these indexes would be 0 1 2 so I just want it to all be the same so I'm going to say todd. length minus one or I could say idx + 1 they would both uh allow for that um and then I'm going to say uh question mark If to Do's length minus one equals the index so if the to's L length - 1 is 2 right now equals the index 2 I want you to do rounded db- MD else nothing do nothing and you'll see that that rounds the bottom corners of this last to-do no matter which one's the last one it'll always round the last to-do's corners and the other thing um that we can do is add another piece of State here or another uh excuse me another bit of logic I'll copy and paste this to Do's well actually we don't we don't need to copy and paste it we can we can just go above right here say index equals z and I need this to do something here so I'll say rounded top MD and then after I'll give it the semicolon or the or the colon and that'll round the very first to-do no matter how long our list is it'll round the top one and the bottom so if we have 10 to-dos we don't need to keep track of the rounding anymore it's already handled it's handled programmatically so let's test that out if I if I copy down four of these boom you can see the the first one's always rounded and the bottom one's always rounded so um I'm going to delete those UND do that but that's just a tiny little trick here to to make sure our list is is always proper um awesome so let's uh let's maybe darken this just a smid I'll add a shadow MD and let's uh let's maybe add just a little hover right hover I'll say BG gray and we'll do that 700 for it so boom I can kind of see which one I'm hovering over let's say cursor pointer right boom and we got ourselves a little bit of a to-do list now the one thing I might want to add is just just a bit of a a table header here just to say um hey here's the the top bit and here's the the bottom bit so um or or excuse me not the top bit but the title um the category and is uh or or status maybe for completed so that'll almost work perfect we just need to go to the div on line 36 oops say class name equals with- F and uh flex and justify between and that should pop them all out to where they need to go and we need to do one last thing and say PX4 because we have uh padding on the the children contents that should balance it out and then I can say opacity 50 and my2 just to kind of make it a little bit faded or even M mb2 should be fine um but just that way we have a general idea of what we're looking at here's here's kind of the title here's the category here's the status um so awesome guys this this is almost all the front end components we need Let's uh let's now do some API Integrations and nextjs makes that really really really useful really easy really really really easy so um I'm going to pop open the Explorer and I'm going to copy and create a folder down here and this folder is going to be labeled Pages um you can do API stuff in the app app directory um but we're going to focus on the Pages directory right now and in the Pages directory I'm going to make a folder called API and in this API folder I'm going to make a file called too. TS and in this [Music] todo.txt so um I need to import next API request and next API response from next this will help us Define our Handler um and this is the Handler that that I usually mess up so um here's here's what it looks like um we have export default function Handler and we have request we're going to define the type here with the next a API request comma the response it's going to be next API response so now it's type safe you can see we have a red underline on the git Todo guys and and there's going to be all this code in in the description as well I've got a repository for you guys in the description of all this codes so um so look there right now if if if if you're like gosh I'm falling behind the to-do list thing pop into the repository steal the code not a big deal not a big deal at all we're we're about learning here so um let's go ahead and we have our case here this is a switch method right so every request I'll have a video on on on crud functionality as well um but there's get post patch delete and uh and a few I'm missing one get post patch deletes I'm missing one guys I'm I'm missing one but I'll have I'll have crud functionality for you guys um a video on that as well breaking down these things and we'll do it in nextjs as well um or or maybe I'll do a view tutorial or something else but um but I'll certainly make one of next um but we have our git uh case which is just going to be quering data it's just going to be reading data that's all it does we're not going to interact with it today we're not going to do deletions we're not going to do updates uh we're not going to do patch request we're just going to query the data um and let's build this function so so it's going to be a function here that is um going to be async function right we'll say get todos and you can see my my tab n is helping me here right love to see that so next API request and we want the response to be next API response boom so our responses are type safe our request are type safe let's build out our get todos um now we're going to do a little bit of a of a of a shortcoming just right before databases I'm going to have a a video on on databases and linking up to Prisma or mongod DB or or MySQL or postgress but that's not going to be today we're going to do something a little bit easier just to get this API working and being a xjs developer this is something that that I would recommend taking this approach immediately because I've done this to trouble fix so many things um and that's going to be taking this data that we just built on the back end or EXC excuse me on the front end we're going to take this data this to-do list all that data that Json data let's copy it and we're going to put it in the back end and this can now test our API very effortlessly um you can see we have an underline we need to import the to-do type so what I can do is take this to-do type and just drag and drop it in but if you saw one of my shorts the smarter thing to do is take your types and put them inside of a new folder so let's build that folder real quick I just opened up my Explorer I copied I copied this so I have that in my copy command um I'm going to open a folder or I can make a file either or and say types. TS and I'm just going to paste it in there the important thing is I need to make sure I export it so export type to do do are to do and now I can go to my front end page and say import type uh excuse me type curly brackets to-do from at types and now I can go to my back end the to-do dots you can see we have some red under lines don't worry about it for right now guys not a big deal I'll go to the back end as well and I'll go to line two and I'll import the same thing import type to do from at types and you can see that fixed is our a so the next thing we need to do we have our try catch block built out I just need to say res. status 200 to indicate that the server request was completely fine the API was working great and then I'll say res. send todos and that will send us our to-dos to the front end excuse me I I think it's actually res. Json well let's try both let's let's see if we could break some something right and then in the air what I can do is say um res. status 500 and this indicates an internal server error so we know if there's an error and I could say Json do this and I think um do message and in internal air or internal server air is fine and this way when we get a response from this API we now know if there's an issue or not we'll either get a 200 with all the to-dos or we'll get a 500 where there's an issue so um let's go back to the front end now and we need to integrate axios so I'm going to to um open up the terminal you can ignore all the errors right now there's it's just an error because we don't have any do on the front end so ignore it it's okay right now not a big deal get comfortable breaking code not a big deal Let's uh close out at the terminal we're say mpmi axos and then at types slaos and we're going to install axios to help help fetch uh some some um backend stuff and then and use our API and then we're going to download the types obviously to uh be type safe so what we need to do is import axios now from axios and if you're getting a red underline here it's either because you didn't download axios or you didn't download the types so make sure to download the at types axos as well um I also need to import use effect from react and we're going to fetch the uh the to-dos from the backend we're going to make it happen full-blown like like you do in the in the real deal with a real server with a real database it's the full-blown deal so um I'm going to start by saying function fetch todos it's going to take uh nothing in the in the um uh parenthesis we going to open it up with some curries and I'll say um I could do a try catch but let's just keep it easy I'll say const response equals um we're going to do actually make this a sync function excuse me I'll say await axos dogit I'll say back slash um API SL toos and the reason why we said API is because it's going to this part in our folder when we do a fetch request nextjs automatically handles it it's saying okay go to the API and then I say back SL todos oh we actually need to say to-do because that's what we named our file or I need to change the file name to to-dos either or but these two things need to match this to-do and the to-do here or if we call it whatever it needs to be whatever here so um let's console log this response and see what comes back and then finally we just need to fetch this guys and I know there's there's errors don't worry about it we need to fetch this with a use effect so I'll make a use effect that looks like this and I'll add a dependency array and in the curlies I'm going to open it up and I'm going to put that fetch to-dos there oops fetch to-dos like this what I could actually do is sync this entire function in the use effect like this and now on render we should see Tod do is being fetched so oh we do need to actually close out the airs finally so um I'm going to close this entire uh bracket thing this entire component we built and I'm just going to comment it out just like that just uh command back SL to comment that thing out and let's refresh the page we should see it all back to live we won't see our to-dos but we're just going to see if this response works so I'm refreshing the page and you can already see we have one error uh looks like an internal server error so let's see what's going on app page. TSX maybe one of these should be oh marked with used client okay so I need to go to the top of the file in um in xjf they had an update with server components and uh and um what's it called not server components uh client side components so if we're using the front end typically on the front end you may want to do a server component um and we'll get we'll get to that in another episode as well but right now we're just going to do front end and a back end just simple simple easy peasy so um you could see my console ninj showing the response and you can see it also in our in our console here so you could see you know we get the res status 200 the API worked um and this is an awesome example of why I just hardcode the data in the back end you might be like is it a database issue oh it's just a front-end use client err simple simple easy peasy um so I really recommend this approach guys it's it's like it's Lego bricks one thing at a time um the next thing let's pop open this data and you could see these to-dos that we built on the back end that are now on the back end we're successfully fetching them into the front end you can see all the stuff that completed the the health category that we made the go to gem title all of this stuff is is right here so that's good news that means it it is fetching and it is working so let's let's take that response now and we need to use state so let's use State here so I'm going to import it from react I'll say use State and underline 8 right under the function home I'm going to Define this so I'm going to say cons to Dos equals set to Dos equals use State and we need to Define this type or we should Define this type of Todo and it's going to be a array of to-dos so we already have that type imported guys I'm going to delete this next image deal don't need it and we're type safe we're using type safety I can even make the response type safe too say console log. dat um as too array right it should be that let's double safe uh you know double safe these types you don't have to because we are setting the state to it or will be but just you know an extra layer doesn't hurt and I'm going to delete this console log and change it to set todos so now we have all of that state all that response that response.data and again the reason why I said response.data is just because the response gave us everything it gave us all of this but our to-dos they're they're right here we don't need the status right now we don't need the status text we don't need the headers we need the data and the data says well here's all of our to-dos so that's why I said response. dat so we now have that response if I console log this here on line 20 and check for to-dos and I'll say here are my to-dos let's see if this worked so I'm going to refresh this and let's see if this fetches and and does what what I think it's going to do so you can see my console ninja fetch these to-dos and boom here they are 1 two 3 so we see them again and we just see the to-dos so it's doing exactly what I'm thinking it's doing now the great part is the clever part is we name this to-dos the same thing we named this map function so I'm going to uncomment this and it should actually work right away so let's see boom and there's all of our to-dos getting fetched from the backend integrated to the front end type safe I mean that's just beautiful that's just you can't you can't ask for a more robust build than than you know something like that just just you know hitting it right on the nose right hitting it right on the nose so let's uh let's let's take count of what's Happening guys um on the front end we we just built out our component right hey here's what we want to build a to-do list well let's build it let's define some data let's kind of build what it looks like on the front end with a few things and then let's take that data let's build out our schemas and build out a little bit of test data and let's pop it to the back end and this this quite frankly is our database if if you will in the future we would we would just migrate this and I'll make a video on migrating it over over to a database um and what Prisma Prisma makes it really effortless and fun so um this is effectively our database so on the back end if we wanted to delete data out right it's no different than what I showed you guys on mongod DB this is kind of the format here if I delete one of these objects right that's all these are these are just objects if I delete one of them it'll actually delete it off the application so it's it's a really like really in my my opinion it really helped me grasp the data part of of some of this front end to backend API Integrations this Json templating really helped me a lot so um I hope it helps you guys if if there's anything else that that I can iron out you guys let me know please please let me know I want to be of value and super helpful so be building type safe API integration is really really important for me um obviously there's there's things like trpc uh graphql you know there's there's uh just traditional fetch um there there's different API Integrations but this this axios way of doing it with um with type safety pointing at a types folder I have found to be a bread and butter approach that I can always go to and if I need to integrate on top it oh I need to do a graph qlm point oh I need to integrate trpc it is a really really strong way to to start with uh nextjs so um and and even even with a real life production build on on team Sinker right I am I'm using this method that I just taught you guys so many times so and this this has real users um I know I know you guys saw a lot of test emails but I promise there's like 64 real users 64 somewhere around there 65 something like that six few the emails are mine they're they're test emails but but a lot of this project is built using the exact you know method I'm talking about with a ton of apis pinging off of each other fetching tasks fetching columns fetching projects fetching notes fetching reports um fetching memberships generating reports like all these things all these like crazy complicated looking things really boils down to the same process I I taught you guys of just hey what do I need here oh I need tasks okay let me build out an endpoint for that don't don't focus on anything else just hyperfocus on getting this data model right so and then by the end of it I can stack a bunch of these these uh different methodologies together kind of a lot easier in my opinion than um what I've seen so um but guys thank you so much for watching this has been my nextjs uh 14 typescript tutorial um I I think I'm going to do one more as well with with a little bit of a different build a little bit more kind of convoluted and a few more things but um for for for beginners amazing you know what I mean and and and at advanced level there are still really strong coding practices and patterns here that I think are useful for you so um I hope it's been a fruitful thing and um yeah guys looking forward to the next one please feel free to comment and and let me know uh what what you'd like to see next so cheers I'll see you uh soon

Channel: Program With Pags

Views: 3,321

Keywords:

Id: Wa4k8F48HNk

Length: 50min 41sec (3041 seconds)

Published: Sun Dec 03 2023