🔴 Let's build Medium 2.0 with NEXT.JS! (TypeScript, Sanity CMS, React, Tailwind CSS, ISR)

what's going on guys it's your boy papa react and i am back in the house today how's it going everyone let me know who you're watching from right now welcome to the medium 2.0 next js with typescript build it's going to be sick the first build of 2022 and we already have over 250 people watching the papa fam is blowing up this is why we do what we do we have had so many messages over the holidays of people getting jobs welcome everyone to your next evolution the typescript era because your boy you better believe that your boy is bringing the fire on these bills right now welcome to one of my proudest builds bought by brought to you by the guys over at sunny cms check this out guys medium 2.0 let me know what you're watching from right now let's kick it check this out guys medium 2.0 powered by sani cms we've got all of our blog posts over here looking sick we've got a fully responsive app right now check this out i know you guys have been asking for medium so i'm getting it done someone said east london what's up gorillas [Music] check this out guys fully responsive build css grid flexbox all that good stuff we're going to be learning and it's using something called incremental static regeneration if you didn't know what that is oh you guys are in for a treat this is like the best way you want to be loading your pages up and i'm going to teach you how to use this incredible tech in next.js it's like the creme de la creme in next year's and go ahead and level up your apps and have static pages which can serve dynamic like pages like content right so it's going to be a hell of a lot of fun so if i click into a post right now you guys will see it will go ahead go to the following page where it has post forward slash and there's a custom slug for each article you're going to see your article so here we've got a nice dummy article presented to us and you can see this goes out i've got some laura some going on and then we also have the ability to leave a comment now this is no ordinary comment so after i fill this format and i click submit let's go ahead and do it right now let's go ahead and say sunny sangha sunny bob.com and this goes here yo papa farm smash the like button if you're excited for this one i'm gonna click submit now check this out it goes ahead thank you for submitting your comment once it's been approved it will appear below so as i mentioned multiple times this build is powered by the guys over at sanity cms signing ucms is one of the craziest things i'm about to introduce you to check this out it's a managed backend basically which is going to allow non-developers to go ahead and manage your data on your platform so this is the sani back-end which we're going to go ahead and set up it's called the sani studio and this can even be deployed as well so it's freaking amazing how powerful this can get right so if i go ahead and go to a comment right now i just went ahead and made a comment so i actually think it was this one right now yo papa farm smash the like button and i'm going to go ahead and improve this right i'm going to prove it i'm going to publish the changes and as you can see it's linked to a post let's go back to our post and let's go ahead and refresh now the next person that comes on is going ahead and refreshed yo papa fam smash the like button as you can see that's a static page which is being dynamically updated every 60 seconds and then recached and served in an optimized efficient dynamic way we're using next year so so much stuff to look forward to i'm gonna go ahead and break down this build right now let me go ahead and read some of these comments for you guys i can see wow looking good looking excited for typescript isg west london in the house any londoners what's up guys welcome to the build go ahead and shout me out right now where you from we've got india pakistan what's up guys california in the house we've got more london we've got loads of london today france what's up bonjour guys we got bangladesh we got ethiopia what's going on guys oh this is sick we've got literally over 300 people watching right now kennington london this london is representing today guys this is sick oh nice north carolina kenya peru zambia okay now the chat's popping off antarctica if you're watching this on replay watch with the chat we've got turkey egypt nigeria new york oh this is this is on there papa farms international now guys check this out and your boy has gone ahead and hooked you up with something incredible right so i'm gonna go ahead and explain what sonic is what they do right let's go to their website quickly and let's check this out so this is basically what we're gonna be using to power power today's build right it's gonna be the uh you i feel like a lot of you are gonna transition to sanity once you've used it rather than firestore because of the way you can manipulate and change your data so i see a lot of you want to build e-commerce sites a lot of you want to build blogs i always get it i want to build a blog how do i do it sonny where do i begin this is the build for you it's a brand new build we've never done this on any channel so check this out it's a unified content experience platform basically you can go ahead and read this for yourself but as you can see this is what they provide the sanity studio we plug into it with a language called grok that's how we query our data and we mutate our data i'm going to be showing you guys how to use grok in my opinion it's very much close to graphql but i feel it's actually a little bit cleaner than graphql i didn't like it at first but i'm going to show you why i came to love it now the first link in the description is the key to getting the benefits today they've gone ahead and hooked us up the team are incredible over there they've gone ahead and hooked up all the papa fam members with an incredible doubled monthly usage package right i don't know how to word that but basically they doubled all of our rates so if you go ahead and hit the first link in the description when we're doing this tutorial you're going to have two steps you're going to have to install it globally you're probably going to have to put sudo before this to install this and then you're going to install the sanity cli tools then you're going to go ahead and eventually when we do sanity init add in the dash dash coupon sunny sunny2022 okay make sure you do this daisy's in the house what's up daisy make sure you do this because you're gonna get double all of your quotes two hundred thousand api request one million cdm requests and 20 gigs of a bandwidth absolutely incredible right sunny is easy to implement they've got a massive community so if you want more support from them you can go ahead and check out signingee.slack.io that's going to be like an awesome slack community that they have pretty active to be honest it's not the problem over there it's pretty sick all right go ahead and check it out and there's tons of apis and good stuff that we're going to cover in today's build so i'm going to go ahead and break this down for you guys and what you're going to be learning in today's book so you guys can get hyped up for this one i'm going to go ahead and draw on the screen right now because i know you guys love it so in today's build we have the following we have next js coming in hot right so if you guys have done this as i do this go ahead and make some noise and let me know which one you're most excited for all right so i'm going to go ahead and type in okay let's not type in next js all right we've got next yes we've got react so if you're learning want to learn any of these things then you're in the right place we've got tailwind css and we're actually going to be using uh version 3.0 so we are going to be using the new colored right it's the new colored shadows and those kind of cool features which are released as part of uh tailwind 3.0 and if you are enjoying this and you're like hyped up smash and destroy that like button right i want to get this like to a thousand plus today so just do me a favor smash that like button help this video get out to as many developers out there and let's push the papa fam to miles beyond right so we got tailwind css let's go ahead and learn sanity cms as well right and we've got typescript so you guys are you know i know that you guys have been waiting for me to drop this i've been waiting for the right build today's the day all right we've got typescript and we're going to be learning grok right so grock is very similar to what we're used to uh with with graphql honestly it'll be very similar sort of occurrence to that right now one thing i do want to mention we are going to be covering a backend portion in today's build as well so using nextgs i'm going to introduce you to the api side of things so if you want a full stack developer experience this is the video for you so smash the like button jason taylor coming in with that heavy donation 10 10 donation i recently joined your zero to full stack hero course and i'm looking forward to going through it keep it up much love from california jason maman thank you so much for being a part of the papa fam anyone else wants to join proper react.com and links are all in the description right without further ado guys 400 plus people working right now uh oh man this is sick this is so the samsung brodie says first time catching the stream live that's what i'm talking about man that's what i'm doing i want the energy up quick water break and then we're going to go ahead and get started in so jamie davies next chest and typescript let's go i see everyone's excited for this combo okay so also i want to mention i've actually got a new bunch of songs in the playlist now so if you want a playlist hit up the newsletter and you're going to get a we'll send out the playlist okay we're going to jump into this build right now let's do this guys let's get into focus mode this is time to get into this so we're going to go ahead and open up uh we're gonna actually be using next yesterday so i like to show the whole process even if you're experienced even if you know this stuff we're gonna be doing everything over at next year so you can use this guide if you ever get stuck the documentation is here i'm gonna show you a shortcut and get started straight away okay tino what's up because all you should join zero to full stack hero best investment ever made for the community alone grown so much since tino is one of our incredible diamond members guys listen to him because he is crushing it right now absolutely killing it right oh guys you're you're honestly your positivity today is shocking my energy is up right now this is sick malaysia's in the house and what's up all right so we're gonna go ahead and get kick-started off opening up our terminal and on the terminal i'm going to go into my documents right and go into my builds folder now you don't have to have it in documents build you can put it wherever you want i'd recommend you keep it neat okay now at this point i'm going to show you a little trick if you do control r you get something called recursive search so this is how i find my old commands so in this case i'm going to go ahead and type in the typescript so no no typescript sorry tailwind right so the command that you want for today is going to be this one here so mpx create next app dash dash example with tailwind css all right and what we're going to be doing is i'm going to call it sunny youtube build right so you guys just need to write this out mpx is the tool we're going to be using today create next app goes ahead and sets up a dummy application for us using next.js and we're going to combine it or bootstrap it with the with tailwind css uh whether it's with the example right the template think of it like that and it goes ahead and adds tailwind css inside of our project and we're going to call it sanity youtube. so hitting the enter key on that we'll go ahead and spin this up this will go ahead and get things set up for us right let me know what the pace is like today we have so many viewers right now this isn't crazy guys honestly wow thank you all for tuning in wow we do want we want typescript too finally i joined my first live sessions awesome stuff man welcome to the live right so while this is happening we're gonna go ahead and introduce you to sanity so standing i o make sure you use that first link in the description to get the sign up bonus we're going to go ahead and click login all right logging in is simple insanity you can use gmail any kind of simple login i've actually logged in with my gmail account so i've got a couple of examples in here right now they have some awesome examples that you can actually go ahead and um clone as well so i did that with the blog example great great exercise to do we're gonna go ahead and click on create a new project all right and as you can see we have to go ahead and do this command now don't do this right do not do this to begin with don't do that command do this one instead right so this is the one i want you to do npm install dash g sign e cli so i want you to start off with this command and this will allow you to have cli tools which means i can run stuff inside the terminal okay so once we've done that i will then go ahead and do this inside so i'm going to show you where to run the second command after you've done it so cd sanity build so now i'm going into my build folder and now i'm inside my build photo okay so i'm going to go ahead and type in code dot and this will open my vs code editor with this directory opens that's a nice little shortcut if you didn't know that shortcut command shift p and go ahead and type in shell right and this is the one you're going to see in store you'll see install code command in path mine's code insiders command because i've got the beta version okay so once we've done this i'll go ahead and make this a little bit bigger for you to all to see let me go ahead and make this a bit nicer so that way you guys can actually see what the hell i'm typing right now okay so let's do this and now what you want to do is this is going to be your starting point for next js okay so quick little pause here command j to pull up a terminal inside of here i'm going to close my old terminal get rid of that and as you can see i'm in the sanity youtube build folder and i'm using all my zsh okay so um our bessem says thanks sonny for all i'm actually working on the signal tomorrow medium 2.0 enchilada thank you dude appreciate it man so in this case what we're going to do is we're going to go ahead and grab this command sani init with the coupon code so now i'm going to go ahead and knit and what i'm doing here is i'm initializing the sanity studio inside of this directory now you can have it as a separate one but i think it's going to help you to have it in here now as you can see you're setting up a new project make sure you have an account with sani and by the way if you do get an error at this point try running sanity login beforehand and then it will go ahead and ask you to log in so you may need to do sanity login first as a command and then you can do the init code right the coupon code one in this case we're gonna click on i've actually gone ahead and we're gonna create a new project all right now let's name the project we're gonna call it sanity let's just call it yep uh sanity youtube okay i'm going to sign a youtube enter and as you can see it's going to go ahead and prompt us with the second thing now what do you want to name your data set basically use the default data set configuration i'm going to type in y and hit enter and that means yes and basically that just means the production data set now what's really cool is that as i showed you they give us a back end right that back end obviously has some kind of data associated with it so what we can actually do at this point is we can create different data sets so you can have a production data set and you can have like a developer or a staging data set really handy once you're inside the production world in real life you actually don't have one major data set you have loads of ones that you can play with so they support that out of the box it really really good stuff guys all right so at this point project output path sani youtube okay that's cool we're gonna hit enter on that and now it says select a project template so we've got a couple of examples here right the one that i want you guys to go down to is called the blog schema okay so i want you to go down to the blog schema and now the reason why i want you to do this it's going to help shortcut the process for today's build all right you can reverse engineer it do whatever you feel like afterwards but we're going to go down to this and hit enter right now resolving latest module versions going ahead and installing all the dependencies looking good right likes are more than live watching viewers exactly that's how strong the puppet fan is right now guys we have over 500 people watching across platforms today what is happening to the papa fam you guys are so sick thank you so much i said in a good way tony connor says something great work done by you as is more much more helpful to young web developers that's what we're here for dude thank you so much all right so let this install and while we're at this we actually should see that if we go back over to our sanity panel so if i go and log in what we should see now is a new project sanity youtube awesome i'm going to click that and as you can see we're going to have this set up on the side right we're going to come back to this in a bit right this is basically going to be where we get our api key where we mess around with things even the data sets that i mentioned before you see one is production and in this case we actually get two out of the box so we can do one of two and i think that's because of the quota i'm not sure right the special bonus that we actually set up but you can have a production and the staging and then basically use your staging for when you're doing local dev work and production for when you're live right so very easy to do this stuff right and your access members and what's really really nice guys is that this right now the sanity studio where i manage all of the data this is actually on my local host but what is pretty damn cool is that this actual studio is built in javascript and reacts so this studio that you're looking at right now is built with javascript and react and what we can actually do is we can customize this to look however we want which is insane right you can actually customize this entire thing to be whatever you want it to be so that i thought was massive and then once you're done with that you can deploy it so right now this is a live url medium youtube demo dot sanity.studio you have to go there and log in with the sanity account that is authorized so the one i set up with and then i can access this from anywhere so that is incredible another really cool thing about sanity that i just want to show off quickly is imagine if i've got it open in two different places right so they're really awesome about collaboration as well if i go to my post and i go to my first post watch how the real time functionality works not only is it showing me that sunny is editing this i can go ahead here and type in one two three can you see how it's real time updating so if i type in one two three four and i go ahead and click publish let's go and check it check out the website see if it actually did anything so i'm going to refresh this is my first post one two three four it's so incredibly simple to get working right cyprian greens from canada what's up we've got philippines in the house what's up with gungan i think it is uh waving cat good to see everyone this is awesome only positive vibes here amazing stuff guys right so as we can see we actually have this nice collaboration feature which is real time so if you're ever editing you can actually go ahead and you know work together in a team pretty simple and it shows all your revised changes so you can actually review all the changes that has done so you can see here sunny made all these changes me made always change but if you had a big team for example jay's on my team he could be in here messing around with this stuff and i'll see it and i can actually quickly go ahead and make the changes and revert them so i can actually revert and publish the older versions really cool stuff and you're gonna learn all of this today right and it's honestly it's a bit of a game changer if you haven't used something like this before right so i like to introduce you guys to the things which i would use myself hence why this is gonna be something which you're gonna love trust me you're going to love it now i want to bring your attention to this all right as you can see and also guys smash the thumbs up button we're almost at 500 likes already and the video is not even like 20 minutes in which is insane so smash that thumbs up button get this light count up to a thousand we're gonna get to a thousand today quick right so as you can see we've got the left hand side bars i'm gonna go ahead and remove this now on the left hand side bar you can go ahead and see we've got the next.js files which are built in for us but this green one right here sanity youtube right now this sonic youtube is basically where the sanity studio will live okay so as you can see there is a separate package json here and there's a separate package json here so if you're ever installing a dependency please make sure you are in the correct folder okay do not install it in the wrong folder otherwise you're going to start experiencing a bunch of weird stuff going on right so just be careful with that also guys i want to mention that this actually handles image uploading all that stuff for us so it's super simple to go ahead and do that in this all right so what we're going to do now is go over to the pages and the index dot tsx so as you can see now we have typescript out of the box with create next app so it's perfect time to jump over so you'll actually have a typescript file now the only difference with typescript is it's just got a tsx file and now i can start writing typescript in here now i want to go ahead and explain something to everyone so typescript is not understood by the browser javascript is you can't give a browser raw typescript and it will show it doesn't work that way the way we that we have to use typescript is that typescript in itself basically is a superset so imagine this is javascript it basically wraps it and provides extra extra functionality in it and that the functionality that it does is called strongly type checking right so it becomes a strongly typed language essentially this means that you will say that a string is a string you will say that a number is a number and so forth and that prevents a huge number of bugs from entering your app now what's really cool about this is that basically actual step to converting the typescript to javascript happens for us so create next app actually does this behind the scenes and this is called transpiling right so transpilation and this is happening behind the scenes when i save the file this will get rendered all down to javascript even if i've got typescript in here so yeah this is going to be super easy to go ahead and follow along so no fancy stuff that you can do that you have to do to set this up now it's pretty much going to be working out of the box so yeah get ready to have some fun okay at this point we're going to go ahead and do command j and here i'm going to go ahead and do mpm run dev all right and this will go ahead and spin it up on our local 3000 so i've actually got it running on my local 3000 so i'm actually going to run it yeah screw it let's do it let's run it on the 3001 so i can show you the odd board as well so at this point i've got 3001 open as well so localhost 3001. yours is going to be 3000 right so i've got this open now i'm going to push this on the left push this on the right command b to hide the side command j to hide the bottom and as you can see i'm going to delete everything from the main downward to the footer all right h1 i'm going to add in say this is medium 2.0 oops 2.0 as you can see it's centered by the photo this is because tailwind's in play right so tailwind amazing utility classes that i love and you will know me by now if you've seen any of the builds i'm a big fan of them right we're going to go ahead and change the title of the page to medium blog right and hit save and as you can see now at the top of the file it says medium blog right so moving pretty good right now i'm actually gonna go ahead and get rid of all of this so we actually have a clean slate to go ahead and start from so i've got my reference over here which is our home page so we're going to go ahead and actually build this out piece by piece okay um a cost thank you you guys say sonny keep growing your beard it looks good man thank you appreciate man i appreciate that i looked at the wrong camera there that's so jokes all right so at this point we're going to go ahead and create our first component i want to build this top part right charles crook what's up dude good to see you so we're going to go ahead and build this top section out right now okay so what we're going to do is command b and i'm going to go ahead and actually create a components folder so what i would like you to do is click package.json click the new photo icon so that way you're in the right place components okay now for components we're going to create a new file inside of here and we're going to call it header dot tsx okay and now i've got react snippets installed so if you haven't got them make sure you have check out my top 10 vs code extensions video which is which just dropped but this is the one you need to have installed and this allows you to write underscore rfce to go ahead and have the nice uh sort of drop down that comes with for us although it should have worked i don't know why it's not working though uh interesting okay uh rfce okay there we go yeah there we go and then i just don't need the top bit there you go cool so at this point i can go back to my code over here and i can just type in h1 i am a header hit save go back to my index and i'm going to pull in my header through here so i need to go ahead and type in header forward slash for my component and at the end of the word control spacebar allows me to pull in my component really quick all right giancarlo goes and he's looking fresh with the skin pain i'm gonna get my gonna get my hair cut tomorrow in it you know how we do man we have to live fresh on youtube all right i love this i love this community all right so at this point we're going to go over here and you can see i'm a header so now we know that that is actually pulling in the header okay so at this point i'm going to start building out the uh header component itself and as you can see it's no serious like like seriously fancy weird stuff going on it's literally just a normal javascript that we can now start adding typescript to okay so i'm not going to introduce typescript just yet we're going to build the header first so first thing i want to do change this to a header component make it a little bit more syntactically friendly and then we're going to go ahead and start things off so on the left hand side i'm going to have a div with the medium logo with three bits of text and on the right i'm going to have this so that's two divs and the way i like to think about this is we imagine we have a like one div here and another div here and then we've got flexbox which says hey hey work out the space between this thing right figure out for me i don't want to do it right so at this point what we can do is create two divs so div times by two with emmett awesome stuff right and in the first div i'm gonna go ahead and add in the link component now this is actually a link component for the which we're using from next js and the link component is actually pretty cool because what it does is if you use a link component inside of a page the page that is actually linked to it will pre-fetch that page by default which means that the speed on which you'll go ahead and transition to that page if the user clicks it will be super fast because it's already fetched the page beforehand if you didn't know now you know all right uganda in the house what's up dude um oh nice bk roland says i motivated you when i got a tesla thank you dude i'm gonna have a quick water break we just beat 500 likes let's go guys keep pushing 600 likes very soon that's what i'm talking about all right at this point we've got a link now i'm going to go ahead and you have to give this a href and as you can see typescript does not let this go by it says whoa you're missing the href so we need to go ahead and say href oops href and this is going to go ahead and be a forward slash because it's going to go to the home page okay now it's missing children inside of it so we're going to go ahead and do this i'm going to say image and then inside the image i'm going to go ahead and pop in an image which i've provided over here now you can make this next image if you want i'm going to leave that up to you guys okay so we have the medium picture awesome all right it's a medium picture at the top i'm gonna go ahead and give this a bit of styling with some tailwind css so class name we're gonna go ahead now you know that's a good meme actually yeah i'm gonna do that that's actually from some other furniture dude but anyway if you know him now you know right object contain and as you can see it's going ahead and object contain will make us keep the aspect ratio right so it doesn't kind of stretch out and all sorts of stuff antonio what's good man marvin hey this is sick we have literally over 500 people right now across platforms nearly at 600 likes smash it if you're watching and i want this to have a cursor pointer right when i hover over it so i'm going to go ahead and type in cursor pointer nice now when i hover over this you can see look i get a nice little cursor point now looks pretty sick right so we've got that done now as you can see if i click this if i was on a different page it would take me to that page okay so if i was to type in forward slash post and i went ahead and clicked it you can see it took me to forward slash post which we don't have hence the 404 right so i'm going to go back now and make this a forward slash right so now we're going to go back to the second set of divs actually we're gonna do that underneath it first i'm gonna have a div inside of here and i'm gonna have three h3 tags right so actually with the h3 times by three so emmit this is by the way in case what anyone's wondering h3 times three bam i get the three right first one is about second one is contact and the final one is a follow awesome stuff okay now in the first one i'm going to go ahead and actually actually i'm going to leave the first one i'm going to style them all so at the top of the div i'm going to say that i actually want to go ahead and um hide these bits of text when it's on a small screen so those three links i'm going to hide them and what you could do is then go ahead and actually add in oh that's it yep you can i like that that's emmit guys and now you know i'm gonna do that i'm gonna do i'm gonna start making youtube shorts all right um watching from union island what's up dude so as you can see when it gets smaller these three disappear so the way that we do that is we use breakpoints css make this incredibly easy to do right everything starts with the first mobile rule and then it basically scales up so anything i write without a breakpoint like md lg or something like that for large screens and so forth is applied to mobile then you basically apply rules at the bigger screen you get this is called a mobile first design so how do we do this well what we do is we first say it should be hidden on the phone cool now when i go into a medium screen i want to go ahead and do an inline flex okay now that means on a medium screen it will now pop into the screen and i can see it and then i'm going to go ahead and center the items and all that stuff so as you can see here it's there but on a small screen it's not there right so on the medium screens onwards it pops in next thing i'm gonna do items center and then i'm gonna go ahead and say space between them should be at least about five so space between the things on the x-axis bam we've got five right as you can see this is not looking correct at the moment the reason being is the div which is surrounding the two hasn't got a flex raw applied so if i do flex now it goes ahead and centers it it goes and puts it in a line by default items center will center them on the y axis and then we're going to go ahead and say space x of 5 between this first child and this second container that's why it's now spread out awesome stuff looking pretty good the final one the follow button i want to go ahead and give it this nice follow green okay so to start this one i'm going to go ahead and say class name equals uh text white and before i save it because i'm not going to see it we've got bg green 600. hit save bam it's looking good already right and then we're going to go ahead and say px4 guys if i do this whole now you know thing i want you guys to blow it up right almost at 600 likes that's what i'm talking about wow all right so p i'm gonna go ahead and say padding on the x axis of four padding on the y axis of one and i want to make it rounded so rounded four right and if you haven't got these uh sort of pop-ups that you're seeing here it's because you need the tail and css intellisense or complete tools so this one right here okay make sure you've got that if you haven't got it okay so at this point we're looking pretty good right i'm gonna go ahead and show you guys where we're at we've got this now i'm gonna go ahead and do the sign in and get started now this is non-functional sign in and so forth it's purely aesthetic we've done tons of builds where we've got their sign in features so you guys will get to know that if you want to do it 600 likes that's what i'm talking about momentum is stronger than ever nearly a 500 viewers again what is happening come on let's go to a thousand that's a mission right so second div we're gonna go ahead and have a h3 i'm actually gonna have two h3s first one i wanna go ahead and say all right sign in and the second one i'm gonna say get started get started like that nice looks good now the first dip i'm going to start i'm going to say flexbox items in the center cool now it's on the central axis and we're looking at these two right now okay so the chat's popping off i can just see in the corner of my eye that's it i'll make this a little bit bigger i mean that's a bit too big i think in the the current clarity you can see this quite good i'm gonna go make that a bit smaller there we go i'll keep it there for now screw that's cool all right so at this one we're gonna go ahead and say items center space x of five gwen everyone's switching to your second account like again that's what i'm talking about going that's the support of the papa fam right now the text for these ones i want to be green six right so i'm gonna say green or text green 600 all right so down to i like this because you can see the colors as well so it actually adds it makes it pretty easy all right okay cool looking pretty good now i'm going to go ahead and make our life a bit simple i'm going to move this over here so i've got a reference that i can just swipe between right that's better all right so as you can see we've got the green buttons and this one's got a little outlined border so i'll go to my second class seconds or h3 tag and i'm going to say border i'll give it a border and then i don't know sounded australian i said i bought a px4 pa a y of one rounded four okay so looking pretty clean nice and then i'm actually gonna go ahead and say the border should be a green color of 600 bam looks sick now there's only one thing missing right now this isn't looking right this needs to be like kind of spaced out between itself so what we need to do is go to the overall header and give this a class i'm going to say this is flexed so now it's it's automatically flex puts things in a line right unless you're on reactive and which is column but i'm not getting into that we're gonna say justify between now bean says make a blog app this is a blog app justify between will space the two children between each other right so justify between padding of five will give it a bit of padding so it's not cooped up in the corners and then the final sort of magic is the max width right so as you can see it it uses the maximum until i get to the max width constraint so what i want to do is i want to say max width 7xl and then to center it so if i do that by itself now you see it used the max width but it didn't center itself i want it to center itself like this so the way we do that is we go here and we simply go ahead and say mx auto save nice looks pretty sick all right and uh i like that all right let's go ahead and hit refresh if you're in the chat right now this is so it's so fun all right now as you can see mx water means margin on the x-axis of water so or apply a margin here or apply here in which case you center your object okay so looking damn good guys we literally have so many viewers what is going on almost at 700 likes already that's what i'm talking about wow guys i'm gonna go ahead and quickly chuck on some old school tracks because i can see loads of the ogs in the house let me go ahead and say let me put on you guys recognize this there we go that's better this is good what challenge was this from let me know right so at this point we're going to go ahead and probably let's actually have a thing let's move around and see what we're doing so i'm going to go ahead and actually add in this main bit now right so we're done with the header header is finished right i want to now go ahead and you see the responsiveness it looks pretty cool right matrix take care say juan pablo what's up dude so we're going to go ahead and actually add in the header part now and that is also responsive no it's the m look at the big m bam goes smaller and then eventually disappears right and this is used as a new sort of decorator underneath we're going to show you how to do that as well so we're going to go back to our index.tsx now at the index level you can componentize the banner part if you want i'm not going to do it all of that in today's build because i want to focus more on the actual sort of isr and all those kind of concepts that you're going to be learning today which i feel you'll benefit a lot more from right so we've got this now now inside of here we've got two divs right so let's visualize this on the left hand side we've actually got a div over here right and then we've also got another div over here right so we've got another div over here so two children one two and then that way we can go ahead and position them accordingly so that's how you should see everything when you're coding like this first one is the div right and we've got another div that i mentioned so two divs and then the first one i'm going to say h1 and this is gonna start having the thing it's gonna say medium is a place to write read and connect all right read and connect cool hit save bam so as you can see this is the same thing we have here and then the other h2 has actually got another bit of text which i'm just going to paste in over here i'm going to say that's a h2 this is a subheading and bam okay now for this h1 i'm actually going to go ahead and style it in a different way i'm going to go ahead and say text to 6xl to make it a little bit bigger so as you can see it starts looking a lot nicer right then we're going to say max width of extra large so it has a constraint that it can't go past that size and i also want the font to change i want it to be font sarif right because the medium articles have this kind of you know retro kind of old-school feel to it right so that's how we get this nice little effect in right the next thing the h2 i'm gonna go ahead actually we're gonna leave the h2 looks pretty good actually the way it is and what i'm actually gonna do is the medium so this bit i only want to start with that medium part right so we're gonna do this hey garincha says i was actually looking for a way to implement a blog with react next year's and here comes sunny reading our minds thank you dude i knew it was a demand so i'm coming at you hot we're going to take the medium and we're going to put it inside of a span tag so this is the purpose for spam tags so basically if you're on a spanner style in something like a h1 it's awesome to do so so we've got our class name here jimmy's just love this og song stick man and then here i'm going to go ahead and say it should be underlined so as you can see now bam we start getting style around just the medium part underline and i'm going to say the decoration should be black but i also the reason why i put this in is because you can now do like red 500 and so forth but in this case i want to do black that's fine and then i'm gonna do decoration should be a depth a width of four all right so i want to make it a bit smaller now you can actually have different zig zaggy ones and all sorts of stuff now that's a new feature as part of tailwind tss version three so yeah really cool and remember guys if you're setting up do not forget to use the first link in the description to benefit from the sanity bonus right and if you haven't already also the react stuff's getting hard react basics check it out all right plug um at this point we've got the div that surrounds everything so i'm going to go ahead and say this div should have a padding on the x-axis of 10 because right now it's touching the side too much and then i'm going to give it a space between the y components so in this case it's the heading and the subheading of let's say five right so now we've got a nice bit of spacing awesome looking pretty good right so with that in place now what i'm gonna do is add in the second thing so outside of here as we only have a picture we don't actually need to wrap it in a div right we need to go ahead and just go and say something like this image all right it just cracks me up all right so at this point i'm trying to read something uh okay so at this point i'm gonna go ahead and pop in a picture now this is just a medium logo you can feel free to copy the one i've got here right you can pause it copy that i should i didn't actually show on that one i apologize i usually short on them but yeah we're gonna sit save and that's the medium logo that we're gonna be using now to style this i'm gonna do class name now remember mobile first are utility classes so the first thing i write for tl1 css is going to be applied to the mobile and i'm going to use breakpoints to target the bigger sizes so in this case hidden i want to say medium so all medium screens then it should appear i want the height to be 32 and i want to do on the large screens the height should be four so use up as much space as you can on large so phone it's hidden on the next screen it's a medium size on the next screen it's a bigger size cool looking pretty good all right so it's already getting a bit responsive now the final key to this is the surrounding div which has the two children in which is this one and this image right so we've got two children inside of here so over here i'm going to say flex and in fact i'm going to do half and half so you can see it right so flex and then we'll say justify the space between okay so that way it's going to push it to the side items should be centered so that way it does exactly what we said there so centering as soon as i hit save bam centers it the background should be a yellow of 400 which is a shade that i found suited medium right so yellow 400 border y so border y um we're going to go ahead and say yeah border on just the um y-axis so top and bottom and i want that border to be black okay and as you can see bam we get this now as you can tell there's too much pad there's not enough padding sorry so the padding should be by default 10 on phones and when i get to a bigger screen i want to remove that padding okay so on the bigger screens i want to remove the padding so padding of zero so if we go into a bigger screen now i remove it and the reason why i remove it is because the image is actually bigger so it takes up more room hence we don't need the extra padding right um smash the like button that's what i'm talking about we're literally about to hit 700 likes that's crazy when i hit 700 i'm gonna have a water break but there you go it looks sick right only thing we're missing here is a max width constraint so what i'm going to do here i mean you could keep it like that it looks pretty cool because it spans across right but what i want to do is go to the top class name and i'm going to go ahead and say that this one should have an overall max width constraint of 7xl and i want it to be mx auto right now as you can see bam we get this lovely centered display which goes ahead and looks awesome on a phone but on a desktop it centers the reason why you don't want it to span across is because imagine they're on a 4k screen it just looks awful right it can't see anything oh we just got a donation what did i get oh who's that is that jason taylor oh jason taylor goes this is epic he goes show some love for the pop fire around thank you sonny keep it going thank you jason taylor appreciate you dude awesome stuff we broke 700 likes just like that i'm gonna have a quick water break we're moving at such a good speed right now we are killing it guys all right so we're going to jump into the real juicy bit as well now so there's sanity cms all right so get ready for the fun stuff now okay so vasil says always watching fun watching live yeah man that's it it's always fun right we're gonna aim for 800 likes right now punch it let's do it i want to see how quickly we can get there okay so we've got this done so now i'm going to start marking things out so underneath this banner right which again you can componentize it's up to you underneath here i'm going to go ahead and have the posts and then yeah so that would basically be where the post would be seen so these posts right these will be fetched from sanity cms so we're gonna go ahead and set that up in a bit as well okay so at this point we need to do that uh we're gonna do that in just a sec and i'm gonna show you now the first thing that we should possibly do is we could do it on this screen to be fair first okay let's actually do on this room first right so what i want to do now is i'm going to start the interaction with sani so heading over to our sanity code base let's go over to oops let's go over to sanity youtube now what you want to do is we're going to come back to this in a sec for the settings portion where i'm going to need the api settings and the keys i'm going to create a token over here in a bit as well when we go ahead and add mutations but what i want to do is i'm actually going to spin up the sanity server okay so i'm going to cut my old sanity server that i had running elsewhere and to basically run the sanity studio i'm going to create a new uh window a new terminal window and i'm going to type in so i need to go ahead and if i type in ls it shows all the files that i have around me right so as you can see sanity youtube is one of those files around me right so make sure you go into sanity youtube so sanity youtube is the ones and you'll probably have to do cd if you're using omaze ssh you don't have to so now i'm inside of sonic youtube and as you can see inside of sanity youtube we have our own package.json so it says it says like its own mini project inside right so we're going for a mono repo structure in a man arts thank you so much five dollar donation this is really cool am i able to make a feature for people to leave their comments with sanity as well thanks for the content sonny yes dude in fact we actually did that inside this build so i'll go ahead and show you a quick demo so everyone can see who's joined in you can actually leave comments in this build as well right so you're going to learn everything in today's world so thank you so much for going ahead and donating dude i appreciate you all right so at this point to start start things off you will probably would have done sanity login by now but if you haven't make sure you have we've already done something in it to set things up so now what we want to do is sanity start this will spin up the sanity studio all right hey that's the donation that came through nice all right so at this point we need to go ahead and do sanity start this runs up our local studio so at this point we have two apps running we have our next js app which is running the front end and then we have the sanity studio which is our back end okay so once you understand this it should be pretty simple to get into go to localhost 3000 so i'm going to go ahead and click into this and as you can see it says connecting to sani please log in so what we need to do is log into the same account i'm going to use my google login so at this point i'm going to quickly log into my google account make sure it's the same account right now so that way you can go ahead and do access the details otherwise it actually locks you out right so it's actually pretty secure like that all right so at this point oh my dude all right so as you can see boom all right so nina nina love the energy excuse thank you so much dude appreciate all right so here we can see we've got sanity youtube so this is the introduction to the studio as you can see we already have some data types or schema sort of components inside of it and what we can see is uh it's important to understand this bit so on the left hand side inside of schemas you can see we have a few here we have post we have author and we have category now if i was just to look up post for example you can see this is basically like a blueprint right it's got the name which is the post that's the type here the actual title that is represented on the screen capital p post the type is document now i'm not going to go too far into the actual documentation of how this works but i'm going to show you how to use it the sony docs are pretty awesome but once you use it it will make a lot of sense right it's always funny to just use it and show now if i see it filled you can see what does the post consist of so if i was to create a new post you'll now see and i can actually make these bigger and smaller and so forth we can see a title which is a string value we have a slug which is basically going to be the url that goes ahead of our when we're inside of on on the website so in this case if i go forward slash post you can see it's four slash post four slash this is my first post is the slug right we have the author now the author is of type author so reference is another schema which basically defines a author right so we're going to basically connect to that afterwards and as you can see it goes on so we've got the image we've got categories we've got publish that block content block content we've actually defined and this allows us to have basically rich text and then we've got this preview down here okay i'm going to get into the preview a bit but here we've got the main bits that we need to kind of focus on so at this point we're going to go ahead and almost 800 likes crazy stuff right so i'm going to go ahead and create my first post so let's go ahead and say my first post all right and before we do that let's actually create an author right you can actually do it here as well so we can do that i will click generate and it creates my first post so if i haven't already created an author which i could have done in the separate tab i can click create new here and it just goes ahead and embeds it and does it for us here so it's really clean how we can do this so at this point i'll say sunny sangha generate and let's generate a slug for us drop an image i'm going to quickly go ahead and find an image of myself right now um in fact i'm going to do elon musk right so i'm going to go ahead and change the name to elon musk so elon musk generate okay so at this point bam i've gone ahead and selected the image we've got elon now bio you can say i'm elon oops what's happened there so we can say i'm elon okay exclamation mark there you go right and you can make it bold you can do whatever you want and also so this is gonna be that bio you can pull this information now this is in the draft state so this is in a draft state right now so i'm going to publish this change that we have and as you can see now i can use the author and i can go ahead and close that tab so we've got the author and i can reuse that in several future posts now for the image let's go ahead and attach an image to our first post i'm going to go ahead and click upload and for this one i'm going to go ahead and try and find a uh let's just go ahead and use one of my thumbnails right so i'm going to go ahead and use the medium clone thumbnail in this case right so i'm going to go ahead and pull in the medium clone thumbnail so i just selected the medium thumbnail uh it should come in soon there we go so you can see this is what we're building today and you can see i've not done any extra logic to make you know the actual sort of uploading features and all that stuff it just works really nicely by using these schemas right categories you can add i'm not going to cover categories too much today publish that works and then here for the body oh we got another one hey boro in the house a thousand uh was it kirk crook was it what's uh the chisek or currency it's called chrono i think right but thank you dude appreciate you man always crushing it coming in with donations um this is the first post on the medium build bam right and then just say okay and we can have an image in there as well so i'll go ahead and pop an image in here in this article let's go ahead and insert an image so i'm going to go ahead and pop an image in pulls up a nice little kind of thing and i'm going to go ahead and pop in the same image over here so we've got this image as well inside right and then what you can actually do is you can click edit details and what's really cool about this is you can actually hot zone it right so in this case on this on a smaller screen it'll look like that but you can actually go ahead and say what it will zoom into so let's make the full width the entire picture all right so i can actually change this to whoops where's it going where's my circle one let's go ahead and make this yeah the full thing that the entire picture but the actual hot zone you can actually change so that way when it zooms into the picture it will go ahead and actually show only the face right so you see this it looks pretty cool right that's kind of a cool little extra feature but in this case i can go ahead and click publish okay so that is it that was literally got uh a post up and running right so in this case we've got our first post it's got an actual relational connection to an author so if we look at the author he's actually got his own post then we can start doing queries based off of this information okay so uh hey someone's asking joe williams how was dubai my guy i'll be back in dubai very soon and also maybe permanently so stay tuned right i might vlog it as well let me know what you guys want nearly 800 likes guys killing it today so we got the first post here so i've actually published this now so we need now i need to go ahead and pull this into our app okay now i want to show you guys something they have something called the vision tab right and this vision tab is really handy for going ahead and selecting certain things so in this case i've got a dummy thing that i was using over here but i'm going to go ahead and simplify this and go ahead and show you how this works right so if i go ahead and just select uh let's go ahead and say select all of the types basically this is the the grok syntax so don't be afraid when you see this i was when i first saw it i was like whoa what is that but then i tried it out i got used to it and it's actually really simple once you get the hang of it okay so check this out so if we're going to go ahead and say anything with the underscore is basically like a built-in attribute that is given by um that is given by the guys over at sanity when you create something so the type is for the post which is a schema type you also have underscore id which is the id which is assigned to that document and so forth and anything that we have is basically just going to be that title for example okay so in this case i'm checking for all the types where it's type post okay i'm going to pull the id no thank you hattie book there i've started 2022 we're joining papa firm diamond and that's one of the best decisions in my life thank you sonny and jay that's what i'm talking about heidi awesome diamond member if you guys want to join zero toolstack hero pupperreact.com be like uh hadi and absolutely crush it all right so i'm gonna go ahead and section the post so if i click fetch we can now see it fetches me this so the id came back but what if i want more information right so i can actually start just pulling things out so if i want the title to come back as well i can do command enter to go ahead and do a quick search there you go the title comes back if i want to get the description right which we don't actually have at the moment so i'll show you how to add the description but if i want to get the slug as well bam just like that i get the slug i get the id and i get the title right really nice and it's super easy to query right so i'll show you how you can go ahead and do this all right uh byron says send me a portfolio nice yeah this is going to be on the channel after this session is finished so do not worry guys okay so what we need to now do is basically run this query from our front end and pull in the information now remember i said it was connected to an author so if we run this by itself what if i want the author's details well an author is pretty cool right so what i'm going to do here is i'm going to go ahead and show you how it looks when we have the uh the actual sort of data structure and how we sort of reference it and pull information from it so if i go over to the desk which is where we have our authors and i can see right here's the author if i go to my post you can see the structure was this it was id title slug so title slug author how do i pull this information right so in this case what i need to do is type in author and then i do this arrow okay and this arrow is basically the syntax then go ahead and pull the information out so in this case an author has a name and an author has an image i hit enter bam just like that now i have the name and i have the image and this is of type asset which we can go ahead and use a special function to go ahead and pull this information from okay so looking pretty neat right now okay so you guys can take your time with this go ahead and do this when you feel ready and do not feel freaked out right this is naturally where i'm gonna see people freak out be like oh my god i don't know what's going on right so at this point this is how we basically go ahead and query so now i need to go ahead and basically make a connection to the sony client so what i want to do is i'm going to go and do command b and i need to go to my upper level so i like to click this button to go ahead and shut everything off package.json and i'm going to go ahead and create a sanity file to go ahead and connect to everything from okay so this sanity file is going to be here much like we do firebase.json.js i'm going to do sanity.js okay now here i've got some sort of code that i've got from a demo uh or or sort of an example on the sanity website but i'll explain it but honestly i'm not going to go line for line because you can grab this online as well right i'm going to show you how to get as well all right momo thank you for a 20 donation massive thank you for this i know it takes tremendous effort to build such beautiful content excited about typescript and everything else that's crazy thank you so much appreciate that donation dude i'm gonna go ahead and enjoy that with some sushi afterwards um nice so in this case i need to install something called next sanity right so command j so you can see i've got my two apps running right now sanity studio nexus i'm going to pull up a third right or in this case just put it in the middle and i'm going to go ahead and say mpm install next sanity right so i'm going to go ahead and make sure you can see that npm install next sanity and as you can see trending news is hey sonny can we add post insanity by a third party api uh you probably can probably can right and then you've got web hooks and all this other good stuff all right let's carry on so thank you guys all the support amazing stuff nearly 800. i'm going to bring the music up to get a bit more hyped uh let's go and do this bam okay so next sanity installed nice so now i can go ahead and pull in some useful functions from this this is going to be like our configuration file okay so first thing i want to do is create something called a config right now i'm going to go ahead and show you what the config looks like and then explain it line by line okay so this is our config it's literally an object which starts here ends here it's got four things inside of it it's just got some comments in right so we can find our project id and our data set inside of sanity.json now where do we find this basically if i do command b and i go into my sanity folder that was created and i go down to sanity.json i can see my project name is here and i'm sorry my project id is here and the data set is here right now i'm going to go ahead and actually add these to my environment variables okay so command b i'm gonna go close everything off go to my package.json level do dot m dot local and this is basically where you store your environment variables such as your ids okay so in this case i'm going to go ahead and pop this underneath so i'll split the terminal and what i want to do is i basically want to have my where is it gone i'm going to go to my sanity youtube sanity.json pull it up here so i'm going to get my project id and my data set so i need two things the first one i'm going to do is call it next underscore public sanity dataset right this one i'll explain the next public part in a second but the data set is going to be called production right so in this case you don't need the quotes you can just do production and then the next one i'm going to do is sanity project id and this is going to be this one right here okay so i've got these two environment variables set up now what we're doing here is by if we just had the variable name without next public it's going to be visible only on the api for next.js right so we're only for the api routes this means your credential will never get leaked to the client so if they were to inspect and try and console log it out it would be undefined right so this is what they do to protect you out of the box for the data set and project id it's not sensitive information so i want this to be on the client as well because i do some querying with it hence why if you add in next public before the the variable name in your environment variable it allows it on the client and the api okay so let's jump into this so that's the two things we need now there is going to be a final one that we're going to use for which is called sanity api token but this one i'm going to go ahead and give you the value of this afterwards okay so we're going to save that file close it command j and i need to restart my next js server right so go down here i need to restart this npm run dev anytime you change your environment variables you need to go ahead and do this right boom 800 likes that's what i'm talking about 900 this be a thousand ah so sick so sick right somebody said you should start vlogging oh dude i've got it coming man i've got it coming trust me uh the earth said it thank you so much yeah i appreciate the name as well right so we've got stanley jason over here i'm gonna close this off come on j and now what you can see is we've got our data set which is basically gonna try and use the one that we have which is production otherwise it will default to production it uses our project id over here and then the api version this is the default one that we have at the moment okay ucdn is basically going to be if it's in production mode then it will use the cdn otherwise it won't use a cdn now cdn is called a is basically a way of caching your sort of your website on local edge servers i'm not going to go too far into it but it's called a content distribution network it means that your pages or your apps get served really fast from imagine if your server was in america and they had a cdn server over in europe when somebody visits from europe it's going to cache in europe that edge server and then it gets delivered from that network that's how netflix that's how these guys do it they use cdns right so this point we've hit save we've got our config looking pretty pretty decent right so we've got that config object now i'm going to go ahead and actually improve this i need some functions that are going to use all this stuff so the one that i need is firstly the most important i need something called sanity client so what i'm going to do is export cons sanity client equals create client which we imported over here i'm going to pass in the config okay now there this is going to basically be what we use to fetch information make queries all this kind of stuff pink panther keep cr keep perky panny in the house what's up honey uh there we go i was wondering that's an interesting name but yeah we've got sani clients you need that to go ahead and make a query to our sanity cms backend okay so that's the one that's gonna be probably the most important now there's also another thing so remember i showed you guys that you can get the image for example when i pulled elon musk as an author came back with some weird data type which was to the image so i'm going to show you a helper function which is going to go ahead and extract the url from the image right this one is going to be this function over here now these are in the the documents right but this is basically the one that you need so it's an arrow function and it's called url4 it takes sources and argument and we use this uh function that we pulled in at the top passing the config and basically you execute a function called image and pass the source through so basically long story short i'll use this i'll pass in the source that we get back from that query and then it will give me an image url okay trust me it's pretty simple once we use it okay there is another final one which we're not going to use right now but it's probably pretty handy just to show you use current user we're not using that today but it's another helper function which i recommend okay so that is the config done so with the config done now i need to basically use that sanity client to make a fetch from our local right so basically i need to go ahead and fetch from our sanity cms so how the hell do i do this right so i'm going to show you two things today all right on the home page i'm going to show you something called a server side render this means anytime somebody comes to the home page it's going to go ahead and render per request right so i'm going to explain an xjs in a nutshell and this should be something which should help a lot of people out with the understanding of next year so i'm going to go ahead and do what i like to do i'd like to have an empty terminal and kind of just draw on the screen so with next js right typically we have react right so in this case typically we have let me go ahead and do this typically we have a react app right now in a normal react app we might have something like this right this is our window and then the user comes to our website right now typically the entire bundle gets delivered to the user the problem with traditional react without xjs is that bundle can get pretty heavy which means every single picture every single page every single thing that you need is inside of that one bundle the bundle gets heavy that's uh not good for when you start growing your app right so this is why an xjs is such a big deal right the reason being is because the user now basically think of it this way passes through a middle server okay so let's think of this middle server as next.js okay now this next.js server is basically just part of the interaction for the user but they just don't know right so this is our user over here imagine they come to our website now instead of getting an entire massive bundle delivered to them instead now it will only give them the page right so it page splits so this is why you'll notice that whenever we have our folder structure in here everything's inside of pages because if it's indexed.tsx it's the home page if it's search.tsx it before search and so forth it makes it really really simple to have pages and we call this page playing so instead of delivering this massive bundle we just give the page so now if the user wants to go to forward slash post it will basically only go ahead and give that page now there's different ways in which we can go ahead and render these pages right so initially if we don't do anything so if i leave my site right now like this right we call this static rendering and what happens with static rendering is everything is essentially done on the basically this page is pre-built at build time so whenever we build and deploy the site all the pages get pre-built and this means that we can still have javascript running on the client but that's kind of slow right that means that you're typically going to see some spinning indicator or some loader and all that kind of crap and we don't like that spinning indicator right we want things to be fast super efficient and so forth right so there's a few ways to eradicate this issue one of them is to introduce something called server side rendering so we call this ssr right and what this does is let's imagine the forward slash post comes in it comes through hits the server now the server renders per request when we use ssr right so if we use ssr this means it's going to render this out per request all right so every single request that anyone makes it builds the page on the server and then delivers the entire page over to the user right so it builds it on the client which means that the user no longer sees this kind of like spinning indicator it's just bam they come into your site the page is already built on the server and it just got delivered to you right so this is already pretty sick and i want to show you this one first then i'll show you the next level up which is static pages which can actually update every sort of 60 seconds for example and keep up with dynamic data so pretty cool right so in this case we're going to do our first ssr now to make ssr work inside of nexus it's actually pretty damn simple you can go to the bottom or you can do it at the top it's up to you but basically we just have to use a special function called get server side props and guys we are literally almost at 900 likes you know what to do if you're enjoying this video destroy that thumbs up button right export const and we're going to call it we have to say get server side props okay now here we go ahead and say asynchronous function right and what's pretty cool with this is this is basically where the server pre-builds the page so this runs every request now so this will basically track like make that route so in this case the forward slash this is the home page this will change the home page route into a server-side rendered page right so now every time somebody comes on and gets built on the server first then it gets delivered so this is what's happening right now and we're going to go ahead and create a query okay now the query that we're going to create is going to be one which is going to be for fetching the information from sanity okay so let's head over to sani and the query that i want to do is i've already prepared this for us is this one so we're going to fetch all of the posts hence this one here all of the posts are all basically an array of posts and i want the id title author blah blah blah and description main image and slug now description we didn't have before right so i'm going to go ahead and show you how we can upgrade our post to have a description now as well so first thing we're going to do is over here we don't have a description yeah so i'm going to show you command b let's hold head over to our schema let's hold over to our post and over in our schema for the post what i can now do is i can literally add in another field right it's pretty simple all i do is basically do the same thing i've got here and i can go ahead and say description oops description spell it right like me uh capital d for the title and then i can say string cool and then what i can actually do is i can give the i can even upgrade the title and basically have something like a description for the title saying keep the title short man so now if i hit save watch how it rebuilds this shows me a thing and as you can see now the title has keeped our short and we can have a description for that post so this is the first ever post on youtube build on the youtube build nice right and then you can see we're in draft state so as you can see it's always saving so it's always actually real time saving but we actually want to publish this change and now this change is made appropriate right so it's actually live that's what i'm talking about guys we smashed that crazy man wow 900 likes already quick water break oh man that is needed right jay this is sick we're literally nearly a thousand likes already killing it okay so we have this looking pretty good i'm actually going to go to some other tracks now i like to mix it up a bit boom okay so at this point we've got our schema which has been updated right and i'm going to show you how to even add a new schema as well right in a bit so we've got 1 000 uh likes on the way pretty sick so this query right now okay so i showed you the query earlier and let's go ahead and test it so if i go ahead and paste this in oops not that one i'm going to go ahead and get my original query which was this right here okay so i've now got all of this information in let's go ahead and query i can see i've got this i've got the description now the main image just slug the title sick right we've got everything in this is pretty good so i'm going to copy this so we can test it here and then i'm going to go over here to my query and use backticks now okay so backticks is what i need to do all right backticks pop it in and then i'm going to go ahead and put a colon after this now this is basically going to allow us to have this query be executed now you can do clever things you can go ahead and move the queries to another file all that stuff but i'm going to go ahead and keep it quite simple now then i'm going to say const posts equals await and here i'm going to use the sanity clients i'm going to say sanity client right and i need to go ahead and import the sanity client so let's just double check if we have actually got the sanity client available to us so sanity we've got our sanity client over here yeah we have so i need to go ahead and import it sunny.js okay i'm done in javascript that's fine yeah we you don't have to have it all in typescript that's fine we can have a combination of the two it's fine sanity client i need to import this so what i want to do is import the url as well function because i'm going to use that later as well so import it from sanity it's one folder up so i do two dots cool and now we've got a sanity client then i'm going to go ahead and say sanityclient.fetch right and then i'm going to pass the query in okay so at this point i'm going to pass the query in now how do i get the server-side rendered data back into the component well it all works through props so it's actually very simple to get working once we actually mess around with this so what i now do is on the server side render remember this is happening at that server rendering step so the user comes in this is at this step where we have the server side rendering portion right and then once it's done the data how do we get this over here well we pass it through the props inside of react so it's actually kind of simple if you know what props are we say return and if you don't there's tons of videos on my channel about it we return some props and the props are actually going to be the posts that we just rendered okay so with this done what we can now do is go ahead and pour our props in through the top so this is where the props come in right and as you can see we get this new error and it says parameter props implicitly has and any type so as you can see this is where typescript's saying whoa whoa whoa you can't just go gung-ho and start typing stuff in you have to tell me what a post looks like right because otherwise you're going to run into a bug at one point and i'm not going to deal with that so this is how you basically fix it right so at this point what we do is we have to define what the props look like right so we can go ahead and say props now i'm going to show you how to go ahead and define a type so in this case we can call it a type or i'm going to show you interfaces now interfaces are better than typescript because you can do something called extending basically you can inherit types from other types i'm not going to get too far into it but we're going to use interface and we're going to say define basically what a pro what do what do the props look like well in this case we've got posts that come in so these posts and this is going to be array an array of type post and we haven't actually got the post already you know you can write it like this or you can actually write it like this oops or you can write like this post array both work the same way but i kind of like it like this now i'm going to go ahead and create this type but i'm not going to create in here because i'm going to need this actually shared amongst different files right so i'm going to go back to my top level where i've got sanity.js create a new file and i'm going to call this one typings.d.t.s right and what this means is it's a definition typescript file okay so this definition file basically is how we go ahead and and store our type definitions in an external file so here i can say export const and i can oh sorry export interface and i can go ahead and define what post is here right so in this case i've actually gone ahead and defined it so the first three things that we have are the id that created that and the title right and i found all of these things over here right so you can actually see where we get these from uh we can actually see if we're going to post over here and i'm going to inspect right you can actually get all of the data fields over here so this is actually how you check it right so i'm basically gonna you can add in the additional ones like rev and all those things as well type even if you want i've only added in a couple right even for the author where we had a nested structure right this one you can go ahead and add in something like the name which is a string and we can also have the image which is a string as well and so forth and basically you can keep on defining your structure right in this case i'm going to go ahead and push these in here right so we've got the description and main image asset which has a url inside of it slug which has a current string inside of it and this is just means it's an object with the current inside of it and then the final one body body is just an array of objects so we're going to keep it super sweet and simple right and again you can take your time reset typescript if you don't understand this but this is just defining what a post looks like and you'll see why this is really good in a second right so if i go back to index.tsx and i import this now from typings you can see it stop complaining right now what's called if i type in props dot you can see i got post and it knows that it's an array so i get all the array functions right because we've said in its array of posts over here okay so what i can actually do here that can destructure and i can get the posts out so we already get this and we can have destructuring with typescript so it's really looking really good now now our code is extremely robust right this means that we're less likely to make errors in our code which are going to show up in production right guys we're so close to a thousand likes just destroy that like button if you're enjoying this right so we have the post looking pretty good here now what i'm gonna do is just test i get anything back so i'm gonna do console log posts and i'm gonna check the the sort of uh the output and see if we're actually getting anything right so as you can see if i do um f12 so i inspect and i go ahead and do a refresh let's go ahead and see do we get anything back aha so our server side render worked the information came back and as you can see here we've got the first thing all right um first time watching live zachary what what's up did killing everyone nice so we've got all of the information that i actually queried back so we got the main image the author so forth and this is all correct this is everything we needed right so i'm going to use this post now or this array of posts to render out the posts that we see on the home page so all of this stuff right so all of this stuff i'm gonna go ahead and build now even with a nice little hover effect okay and we're even gonna have the author's picture on there as well right so it's gonna be pretty cool overdrive mc says yes found you in your life that's what i'm talking about dude smash the thumbs up button and enjoy the show man so over here we're going to go ahead and close this and i'm going to go ahead and boo oh okay come on b so i've got my post posts are good right now what's really nice about um about uh typescript is that it actually allows you to code more efficiently once you have your types done so now that i've done my types i can safely access the posts and know what i'm dealing with so it actually allows me to code pretty fast so here i'm going to have a div with all the posts in i'm going to map through all the posts so i'm going to say post.map basically go through every post and every single post i'm gonna go ahead and return some jsx right now in this case i'm gonna have a each of the post is actually gonna be a link so i'm gonna import the link component from next js and that link component is going to have a key and the key is going to be post dot and as you can see i get my auto complete because i have the type typescript definitions in right so typescript is so sick like that because it allows us to have all this handy stuff so you can see i can already code pretty fast and and be sure that it's correct right now we need the href now the href here is going to be post dot and in fact what i'm actually going to do here i'm going to do backticks and the reason why is i'm going to go to the forward slash post forward slash whatever slug is associated with that post so i'm going to say post dot and then we've got the slug and then here is slug dot current all right so as you can see looking pretty good at this point right and it's already kind of working though if i do a div inside of here and inside this div i'm just going to do h1 i am a post i just want to check something and you can see i'm a post it shows up and it's actually a link that went through to my first post so it actually is working at the moment we just need to make it look better right so first thing i want to do is put the image out so for the image i'm going to pop out the image and i'm going to use that handy function that i created earlier the url4 function okay so overwrite mt said i'm so happy you're doing this typescript i've always wanted to learn awesome stuff dude i hope you enjoy this and it helps you out we're going to do url4 all right and as you can see we imported that earlier from our earlier sanity helper i'm gonna go ahead and push in a file here so i'm gonna say post dot main image okay and i'm gonna do dot afterwards and say get me the url okay so this source right here is basically gonna go ahead and the reason why this is complaining is because it's saying it could be a string or it could be null so i'm gonna basically ensure that it's not no by adding a uh exclamation mark over here right and you could even protect this another way and you can say only render this block if there is a postdoc main image this is another way of rendering a protected block so you could even do it this way right but in this case i just want to be a bit gung-ho with it right just take sing what's up dude 10 dollar donation thank you coffee's on me bro amazing bill can't thank you enough for proper fam for getting my my first two gigs in the industry brother thank you dude just taking me out having an accountability program right now and dude's awesome thank you so much for tuning in man thank you for the donation so if i click save now let's see bam that's coming straight from cm uh uh signing your cms guys and it's a clickable link that is sick it's working right it's working pretty good all right and you can see when we didn't even do much to get the the crazy functionality that we have so far so sick right so inside of here i've got another div and over here i'm going to have a few things so now i want to basically go ahead and build this bit out so i'm going to have the title and so forth with the author's picture so inside this div i'm gonna have a div with three uh p tags inside of it so p times three and the first one is gonna have the post title it's actually gonna have two divs inside of it right the first one's gonna be post dot title the second one is gonna be post dot description actually it's gonna be the poster description by the post dot title so it's gonna be like you know this is an awesome thing blah blah blah by the author's name [Music] all right as you can see this is looking pretty good right uh john clark what's up you guys this is lit good to have you but i love the live demos great job quick question of the being part of the images where do you get those created out i create these myself dude all the thumbnails i create um but i'm happy to make a skillshare for it and teach you guys how to do it right let me know if you're interested so in this case look my first post looks sick okay cool so outside this div now i'm going to create another image tag and this is going to have the author's image inside of it so here i'm going to have the url4 function that we had post.author.image is the source i'm going to say get me the url so you can see how like a little bit of help from these functions actually goes a long way the exclamation marks to ensure that it's not gonna be a or no value okay andy b mailman coming in with the five dollar donation thank you so much dude look at that so we got the big picture so we've got the the main picture plus this one so now what i'm going to go ahead and do is size it up so it all looks better so i'm going to give this a class name of higher 12 width of 12. hit save bam that's looking better rounded 4 to give it a circular look looking pretty nice right and then i'm gonna go ahead and for the outside div with the p tags inside i'm gonna go ahead and leave that one it's this one i'm interested in i'm gonna say flex so now it's gone in line justify between to give it space between the two i'm gonna actually give it a padding of five and i want the background here to be white i'm gonna force it to be a white one and just to see it if i did red 500 you see that's the one so i'm forcing this to be white okay now for the image i'll give it the effect afterwards but let's think about this i've got my div over here i'm gonna style this out pretty sick so we're gonna go ahead and say for this one uh on the small screens right okay so this is actually a bit of a bigger sort of uh overall picture so let's start off with the outside the reason why this is a bit more sort of nicer or complex is because on the small screens i want a grid column of one so it's one column and then on the medium screens i get a column of two and on the large screens i get a column of three okay so i'll show you how to do that and as you can see everything kind of resizes according accordingly and does its thing okay we're so close to one thousand wow right so at this point what i'm going to do is make this a grid so it's a css grid by default as i mentioned it's one column grid okay now as we get onto the small screens it's going to become a grid with two columns right so grid with two columns all right as it gets onto the large screen it's going to become a grid with three columns it's so easy to use this with tailwind css right now i'm going to increase the gap between all the children of three so this gap right here is three and then i'm gonna give it a padding uh i'm gonna under on the larger screens i'm gonna go ahead and actually on the large screen will say on the medium screens and above the gap should increase to six and i'm going to give it a padding of five or in this case padding of two right padding a two so that way it gets a little bit padding on the external sides and on the larger screen a padding of six so you can see how i'm applying all these styles very easy right extremely easy to do this and it's not really kind of like throwing me off or anything like that but as you can see if i increase the size um automatically we go to the three segment right and here in a second i go to the two column so this is two column this is a three column and in the smaller size it's a one column all right it's already looking pretty nice and look at that and it keeps the sort of nice constraints in place everything looks awesome um what's your recommendation computer and computer chair uh macbooks and this is actually an ikea chair but i would recommend getting a decent chair uh fabricio thank you for tuning in awesome stuff guys we are killing it today almost at four likes away from a thousand but i have a water break smash that thumbs up let's go that is nuts man oh my god let's see that song always gets me every time i think the stream dies but it's just the song kind of going a bit mad all right so we've got our grid in place the final one this diff yes yes we go man a thousand likes already hour and 20 minutes that's what we do at the papa fam that's it push this video up share it out help people get learning with sani e and next chess oh man it's so sick let's go to this div let's go ahead and style this div out now this picture right here i want to have it the width should be full right it should be object cover and the reason being is because i want to kind of scale in scale out and do that kind of cool stuff with it um uh actually no this is actually for the images this one i'll leave for a sec i want to start the image first right so i'm going to say it's a height of 60 but you see how that changed it right what i need to do is higher 60 but width of 4 and that keeps it there now for this one i want to do object cover right which means that it's going to basically scale in to the the sort of the article the reason why is because it's kind of a cool way of displaying it right you can do it however you want it right but that's kind of how i'm going to do it right here right so in this case we have this object cover i'm going to say when i hover over any of this i want to scale in so not just the image but when i hover over any of it see how the image goes in only so the way i do that is i set the entire div to a group and i say when i'm hovering on the group so group hover then i can apply the styles so in this case i'm going to apply a scale of 105 percent when i hover over any of this group so if i save it now you see look at that when i hover over it it's just it's getting 105 just the image when i hover over the entire group so that's how we do it and then what i'm going to say is i want that to be smooth so i'm going to do transition um transform so any transforming and the one that we just did duration 200 cool i'm going to say ease in ease out which basically means it's going to ease in and out there we go looks pretty nice right and then final little creme de la creme piece to this is i'm going to make it have a cursor pointer over the entire div so this one is going to be cursor pointer and as you can see as i highlight over it looks pretty nice now okay and i'm going to go ahead and actually make this a bit more sort of visible so in this case we've got this nice little border as well right so the border here i'm going to go ahead and apply with the following let's say border rounded should be large hit save now we've got a nice little border in there and um yeah i think that's good for now i think that's pretty good for now yeah looks pretty nice all right so we pretty much have the exact same over here nice looking good right the only thing is that image right so that image i need to go ahead and say that that also has a board in fact you see there's overflow here so if i don't want this to come out of the picture like it's doing right all i need to do is go ahead and go to my div and say overflow hidden so overflow um overflow hidden and now you can see it crops it inwards so that's how you keep that retention and looks pretty nice we just need to change the text and then we're almost there for the home page all right so uh let's go ahead and continue on so sani somebody said i don't understand what something is it's an amazing cms or content management system so imagine a back end that can be managed not only by developers so anyone in your team can go there a product guy a non-techie developer they can go there and modify the data and do all the stuff that they need to do really good for things like e-commerce stores those kind of things blogs amazing for and so forth right so here i'm going to say text should be large cool and i'm going to say the font should be bold all right looking nice and then the p tag over here i'm going to make the text extra small right nice all right look at that who's liking that so far i think that's pretty damn good right nice and look at that looks exactly the same bam all right looks really good now the next bit we're going to do is probably the really kind of awesome feature about nxgs which isn't taught much as much as it should be isr right basis stands for incremental static regeneration by the end of this video you should know what it means you should know how to use it basically the goal is this picture right here right this kind of you know article when i click it right now i get four or four right so what i want to do is make dynamic pages which basically are determined by the slugs so it's going to say forward slash post forward slash a dynamic slug so this slug over here was determined by that's the actual main medium is determined by if i go to my post it was determined by this value over here right so depending on what the post slugs are i basically want to pre-build all of these pages right so what do i mean when i say pre-build well i want to basically have it so that when i deploy my app all of the pages which basically belong to a post should be pre-built i want them pre-built i want to cache them and this means that if anyone comes to my site it's a media that that blog is going to be up and it's there now if you have dynamic data you get into a sticky situation here because what can happen is when it's built at build time that page was fresh for when it was built but about 10 minutes later something could have changed now you have a stack a stale or old cached page on your on your website that's a problem so you can fix this by using server side rendering but it means that every time somebody renders in or every time somebody makes a request into your app it's going to go ahead and render that page that's a bit of a problem so i'm going to show you how we can have static pages which are cached and then combine that with the magic of basically refreshing that page every 60 seconds so the cache is never going to be stale for longer than the period that you define it as that's how you get the best of both worlds and it is a game changer once you get it working okay so what we're going to do now is we're going to go ahead and go back to our code and i'm going to create a page which is going to basically represent forward slash post forward slash any page which lives at that root okay so what i do here is inside of the index.tsx i'm going to go ahead and create a folder and this photo is going to be called post okay and this is basically because our that's our route right inside the post i'm going to have this special syntax which is going to have square brackets i'm going to say slug dot tsx right now this probably looks a bit weird but what this does is it's inside the pages folder so this actually corresponds to forward slash post forward slash a dynamic value and the pro and the variable name is going to be the slug so we can tap into that variable name so underscore rfc to make our component quickly i don't know why that's playing up right now but okay and the only thing we need to change is this bit so i would call this post get rid of this and now we can go ahead and start building out this dynamic page okay so what we're going to be doing and also i forgot to mention we are going to be using react hook form today i'm gonna go ahead and show you how to use a react hook form which we used in the gmail clone to actually help us go ahead and do validation on forms okay so at this point we're gonna go ahead and actually have the post itself um we're going to do some server side rendering or not even server siren we're going to actually pre-fetch all the data so two things we need to do right two things we need to do is basically we need to go ahead and tell next js how it knows which posts exist right how does it know which page to go ahead and pre-build these pages for right we can't just magically guess it's going to know it and i don't want to do it side rendered way so how do i go ahead and do this well we have to use a special function called get static paths this is going to allow next chess to know which routes it should pre-build in advance okay so let's go ahead and get this one done so first thing we're going to do is create a function called get static paths and the way we do that is we say export const get static paths and this is basically the function which will go ahead and tell nextjs how to figure out which paths to pre-render okay so first thing we need to do is import sanity client from our uh from our code base so we're gonna go ahead and say import sanity and the url for which we're gonna use right let's check this out and uh right so j keep it unlocked right and guys also smash thumbs up almost at 1.1 k likes that is jokes what i just saw all right so at this point what we're gonna do is i've got the post itself right so i'm going to go ahead and change this to a main i'm actually going to go ahead and put in oops what does that mean i'm going to put my header in here right so i'm going to read my header component just so it shows something but the static paths going back to static parts and getting caught off guard okay so what i'm now going to do is inside i get static paths i need to pre-fetch all the routes okay so the way i do this is i basically say cons query i'm going to use a query uh inside of sanity cms which is basically going to go ahead and find all the routes for me right not find all the risk but find all the posts for me so i'm going to go ahead and use this query so all i need is all the posts and i need the id and the slugs right so if i fetch this now you can see i get the idea of all the posts and i get the slugs now what i'm going to do to make life a bit simpler is add a second post so i'm going to create a second post here saying my second post description uh another post which is cool right which is cool slug this generate the slug my second post the author of this one is elon musk we're gonna upload a picture so as you can see here i've got the let's go ahead and do a tesla thumbnail right which is what i did before so we've got a tesla thumbnail and say i just bought a tesla or uh to celebrate 100 000 subscribers right and if you haven't seen that video check it out right check it out it's a lot of fun so in this case boom i've got this i'm going to publish and now when i do this query i'm going to go ahead and i should see that inside the results now let me know if you're enjoying this right now um gyro says thanks for your job sonny you are my hero thank you dude for watching and tuning in right so if i go to vision now and i do this bam i get two items nice i get the first post the second post i see my first post my second post and i get the ids correlating to them so i can use this information in this query to now go ahead and tell xjs which routes to go ahead and pre-prepare for so what i'm going to do now backticks boom save i've got the query over here and then i'm going to go ahead and query it for it right so const posts equals i'm going to go ahead and say await sanityclient.fetch the query okay and this is going to be plural because we've got all the posts now what i want to do here is i need to go ahead and figure out the parts right so the way that we need to provide the paths over to next js is we need to provide it with an array whereby each object has a key called params and then it's going to have the actual path inside of it right so in our case the param is going to should have a key called slug inside of it so i'm going to show you how this works we're going to say const paths equals posts dot map and for every single post i basically want to go ahead and return an object so i'm going to return parentheses with brackets inside of it right this means i'm going to return directly return an object right and then inside of here i'm going to the first thing is going to be params and the second one is going to be the param that matches up to this name so the slug in this case and i can actually go ahead and use our type definitions here i can say this is going to be of type post and now i can know that if i do uh post dot and i get all this cool so we know our slug dot current awesome stuff right so what this is doing now is this will create a list of paths for me and these paths will basically have a uh the the folder structure will be kind of like this an array of something here where it says params and it will say slug post one and then so forth right so it'll be this kind of structure right and there'll be an array of this right and it'll be my post second my poster my post fourth and that's the structure that we're uh next yes expects in right so we're gonna say return i'm gonna return the paths and then i'm also to pass something in here called fullback and what i'm going to do here is use something called blocking now i will explain this one in a bit when we use isr properly but this is basically going to block the page from showing or it will show a 404 page if it doesn't exist okay so just bear with me on that one and you can read up on ourself you're stuck right so at this point we've got our pages being prepared for us right so the next step is you cannot just use get static paths alone right we've told next year's which pages to go ahead and prepare but now we need to go ahead and tell next year's when it tries to prepare that page how does it use that like slug or that id to actually fetch that posts information so i need to go through to each page and do something called get static props you have to use get static paths with get started props okay so this is the next one so we say export const get static props okay and this one is going to be we're going to pass in something called get static props from typescript so i'm going to do an import and this pulls in the data the types from typescript so this actually just imported get started props from typescript which gives us all the type definitions and this is an asynchronous function yeah which we're gonna go ahead and this is something called the context here right and we're destructuring it to get something called the params out right now get static props it doesn't return anything yet hence why it's freaking out so at this point i now need to have a pretty cool sort of that was actually the one that i had it knows that because i've got the code um but i'm gonna go ahead and show you the the query that we now need to do in order to get this working so this one is a bit bigger but basically this is the query that we're gonna need now explain it don't freak out it's gonna be good it's gonna be fine okay don't don't get scared at this point but what we're now gonna do is uh we're gonna go ahead and we've got underscore type equals equals post and then we're gonna say and also where slug dot current equals and this is called a query basically placeholder so what this would actually represent is it will get converted to something like this my first post right and what this does is it returns an array back to us right so what i'm doing is i'm just getting the first value back now if i do this i'm basically querying for the slug dot current my first post and i'm getting back the first value and then i'm pulling all these fields from it right now the one which we don't need just yet is this comments we're gonna do that later but we got the id create that title author description main blah blah blah and if i do this i should get one aha you see i get the information back all right so this gives me the information if i don't do the zero you can see i get an array of result right so we actually need to query for the zero and that gives us back the actual uh the the object back okay so at this point i'm going to use this i'm going to use that placeholder syntax i showed you and i'll show you how to replace that value with a dynamic value okay so at this point i'm going to go ahead and say const query equals and i'm going to use my backticks and paste it in now slug you can see is in this kind of syntax you're like oh i've never noticed that one this is why isn't he doing the normal backtick syntax well what you can do is you can say const post equals await sanityclient.fetch now when i pass in the query i can basically pass in values which will replace that right and it will make sure that it doesn't mess up the syntax so i'm going to pass in something which will replace and we actually need to pass an object here i'm going to pass in the slug value which is this one and what value do i want to give it well i actually want to give it params dot slug okay and you can see here we have object is possibly undefined right so in this case i can say we know it's undefined so it's okay right so you can see if you know it's undefined it would be optional you can do this if you want to be sure that it's there you can do this the safer one to do is this one all right this will gracefully handle it right so at this point we have all the post information for each page so you can see what we've done here right this gives back an array of paths which gives us all the slugs that we're going to need back and this one actually uses those slugs to then fetch the information for each page right now at this point what we need to do is we're basically going to like kind of put you know i guess we're going to protect ourselves right we're going to say if there was no post that came back right then i'm going to do something called i'm going to return a object called not found right and if you return an object called not found in xjs when you're using uh fullback blocking as a type this can be true or false or blocking when you do this it will return a 404 page so we're kind of forcing it into that state otherwise if it found the page i'm going to do return the props and the props are going to have the post and that's going to be inside now as a as an argument right so to ensure that this all worked right my props come through here i'm going to destructure him i'm actually going to say or actually i'm going to show you a simple breakdown here we need to define our prop types right so here i'm going to say interface props and at the top of the file i'm now going to have the post as part of that right so it's going to be post and this is going to be a single post object now inside of props i can see i have my post so i can now destructure this and say get the post out okay and if i console log the post now what we should see right if we've done it all correctly now is we should be able to go to our website and we should be able to go to forward slash post forward slash my first post and hey we don't get the 404 anymore if i do an inspect you can see i get an object back which is all the information for that page now this is the magic part where i need you to focus and give me some feedback if this made sense right we've got my first post my second post and that gave me back the second info the second post information and if i try and do my third post which doesn't exist it's going to say that there was no postpartum which returns the not found object and we should get 404 so here is proof they will literally only go ahead and pre-build the pages which exist so only use the pages which exist and the reason why how it did that is it did that by basically first finding the pages which exist with get static paths so use this to basically find the paths or the pages which exist and then they use getstatic props was the next function that runs which basically populates the information for the page so in this case the second post works right that is damn powerful when you when you understand how that works right and if that didn't make like whoa kind of sense to you smash the thumbs up button because it is really powerful in what we're doing there right giancarlo says 100 makes sense understood and it's awesome nice thank you dude now i'm going to explain the final part here which is isr right so if we just did that well it will pre-build the pages but we've still got the problem where it's going to pre-build it but let's imagine 60 seconds later somebody comes onto the site well now it's going to be and they say they changed the blog right well it's going to be the old cached version that got built and shown on the screen which means that any updates from that moment forward won't be represented on the page so how do we now make it so that if the user comes in after 60 seconds or another user comes in after 60 seconds it goes ahead and actually re-updates the cache and basically generates a new page well i got you back right check this out so for here underneath the um here where we have the uh props being returned all you have to do to add in this incredible functionality which will literally keep updating the cache after these times is add in something called revalidate and this is what enables isr right if we put in revalidate 60 this means uh after 60 seconds right after 60 seconds it will update the old cache now what will happen is imagine if the old cached version now what will happen is is imagine i'm the 59th second user and i just came in at the last second i'd get the old page now imagine uh jay comes in off like about five seconds afterwards well here i've got the type on fullback blocking so it will literally have a blocking black it will just be a little bit of a delay you can actually have a loading spinner if you want at that point but only for that person who comes in it will show a a sort of a loading state or it'll just show like a kind of a wait a little bit longer but it will serve a side render that page after 60 seconds and then cache it and then that one gets served for the next 60 seconds in a static fashion and then after 60 seconds or service i render the next page cache it and then that one gets rendered for the next 60 seconds in static fashion right so if you really want 60 seconds is quite aggressive you can have it as like a day or an hour like optimizing powerful stuff right um right so sharia says all right um i think we're good okay so at this point uh i think we're i think we're still good i'm gonna freak out right there's still i think we're still okay all right my stream still says that we're live so i'm not gonna freak out jay are we good uh okay so there we go all right let me know if you're watching right now i had a bit of a weird situation on my screen but we're good we're gonna let it stop us right so revalidation sick uh giancarlo are the old cash pages then removed and deleted 100 from the server yes they get removed and put away and you can literally see it if you do npm start right so i don't know if i want to kind of go through all of that now um but we could no i don't do it now but basically i cover that in depth inside zero to full stack here so if you want to see an in-depth explanation join us at proper react.com i do cover that in a coaching call it's actually already on on one of the coaching calls but yeah it literally will delete the old cache page put in the new one it's so damn powerful right now that we've done that we can accelerate right we can accelerate we can go really fast with the next bit so now what we can do is build out the page right so i'm going to now go ahead and build out this page over here so command b so i'm going to build at this page now so if i go to my first page over here boom i can see this is my first post first of all kind article and so forth i'm now going to have this on the screen right so i'm going to build this up so we're going to get rid of our console log post and because we already have this on a type we can actually safely run now at this point and start coding things right knowing that we have the correct definitions and so forth i have an image here this image is going to go ahead and have that handy function that we used earlier so url4 let's go ahead and get the music up and get the energy back up right so url4 and i'm going to say post dot main image okay dot url there we go i'm going to go ahead and ensure that it's there do the bang bang comes in nice and what i'm going to do here is for the image and we'll say class name equals width of 4 a height of 40 and object cover so it doesn't stretch nice and this is going to be like one of those banner style things right so on the small screen it kind of shows you can mess around with it and kind of see how you want it but i'm gonna do this one all right so this is gonna be like the banner so you can see at the top we've got this banner as well i'm gonna do this one for this and then i'm gonna have for the main uh that's good yeah all right oh guys 1 100 likes that is it oh man and we covered isr already oh man right so smuggler says this is not automatically generated after someone visits that page anywhere with isr uh after 60 seconds it will get server side rendered and then generated yes but if you don't do isr it's going to be an old page and if you update that page it will show the old page so you have to that's why you basically defeat the dynamic content problem that you might have okay so let's go ahead and carry on so we got the image there now we're going to have the article sort of syntax which is pretty cool if you've never seen it here we're gonna have a h1 with a post.title all right and then i'm gonna have class name equals text for excel and i'm gonna have a margin top of ten margin bottom of three margin mom of three nice crazy how you made this like a few hours now the company days a few years it's more of a learning experience typical that way right right article over here class name is going to be max width 3xl i want to kind of limit the width so as you see on this page it's limiting the width right and then i'm going to go and say mx auto to center it so that way it's centered now so if i go ahead and make this oh god if i go ahead and make the center you see how it's centering that bit and then we're also going to go ahead and give it a padding of five so it's not so close to the side okay now the next thing we want to do um how do i join your newsletter man jay let me know how they join the newsletter link is in the description to join newsletter you get the pop-up farm playlist as well so it's free guys i'm gonna do h2 post description so here i'll do post dot description and uh cast name and we actually shouted out on a pretty sick video the other day which was uh for the um youtube rewind which was sick i like that all right thank you for that guy who should put a shout out i think it's william candelion also a bit sick video right text excel fontlight and i'm gonna do text gray of a 500 margin bottom of two right and uh abbas we don't actually do statement we don't need state management in this it does it all with the server rendering techniques we use right looks sick right looks really really good so far another post which is cool nice now we're gonna have the uh underneath this we're gonna have the div this has got the author block in so this one here okay now um thank you vikrant thing very sweet of you there's an image and then the source here i'm going to go ahead and say url4 and i'm going to say that you have the post dot author dot image right and then here i'll say dot url right so basically what i'm doing is i'm using our helper function again i'm going to ensure that we have the the uh string not so it's not undefined and that will give us elon the author okay so with that said somebody said you should work on facebook microsoft my friend worked at facebook now he works at uber i'm meeting up with him in dubai so yeah awesome stuff but now i'm good on youtube i'm gonna youtube all right so we've got the class name we're gonna style this out a little bit for this picture i wanna basically give it a smaller height and width of 10. so height and width of 10 and then i'm going to give it a rounded full look so that will give it a much smaller sort of footprint on it right and then what we're going to do is have a p tag underneath right i love how people ask questions if i'm gonna answer some of them what i'm coding i'm like guys i'm concentrating as well uh font extra light all right so this one's gonna be super light it's actually gonna be the extra light that you're seeing here right so extra light and i want this to be text small right text extra small actually that's what was good and here i'll say blog post by blog post by all right and i'm gonna have a space and here i'm gonna say by name post.author.name you can say blog post by elon musk okay i'm gonna zoom into this and then after that i'm gonna say dash published at um here we're gonna pass the date so we can't obviously show the date right well instead we can use next images if you want right um so uh thank you danny shelby i love the way you teach them obsess retelling that's awesome thank you man so at this point we're gonna pass the date so post stop uh created that is the date so here i say new date i pass in the post dot created that so post underscore created that and then what i do is i do dot to locale uh i'm not going to do a date string locale string is the one that i want okay and now what this does is it passes it as a string which is pretty nice it has the date it has the time looks pretty cool and it's on your locale okay so this looks pretty nice guys right next thing you want to do is style the div so it kind of comes a bit more in so flex it so it comes together item center will center on the y axis and then space it between a space x of two and bam we've done that right next thing i want to do is where it says elon musk i want to have that medium green right so as you guessed it or if you haven't guessed it already i'm going to put a span tag here so span tag i'm going to grab the author name cut it pop it inside of my span tag and then i'm going to span a class name style here i'm going to say the text here should be green 600. boom we get elon musk in green i love tail and css right uh igaga says what is isr incremental static regeneration a very powerful technique in xjs it's just game-changing stuff uh if you want to know more really take your time with this build and build it out and get isr working but if you want to know more i teach it in depth in uh zero to four stack hero react.com link is in the description below okay guys we're almost at 1200 likes let's go absolutely killing it today right so underneath the div we have got the next step so we've actually got this another post which is called so now what i need to do is render out all this text all right so this text was actually presented inside of something called a rich text block so if you remember if i go over to the post and i go to my first post here you're going to see over here at the body how the hell do i put this on the page right well we're actually going to use something called react portable text right so i'm going to install this dependency and this is one which has been built to work with sanity cms and i'm even going to show you how their typescript definitions are outdated and how you can fix it and contribute to an open source project right because they need to fix something right and i fixed it but let's go here and here i can do npm install react portable text so let's go ahead and pop this in while that's installing we can go up to our top of our file pop it in import portable text now what we're going to do stranger says hey why i'm using next image right now i'm not using it because i have to white list all the urls which i'm unsure of hence why i'm using normal image tags right so at this point you could just implement lazy loading if you want to uh to optimize normal image tags all right so at this point come on j now if i go under here what i'm going to do is i'm going to have this new portable text i'm going to have it inside of a div and inside this div i'm going to have portable text so portable text and this portable text has a bunch of things associated inside of it okay so the first one is a data set and project id and i'm going to use our environment variables to populate this now as you can see we get errors here and it's saying it because it doesn't have data set or project id inside of its typescript definition so the way you fix this which is a bit annoying is you click into portable text and as you can see here what we have is some type definition typescript definitions they don't have data set and they don't have project id which they have in their documentation so in a situation like this which happens a lot of the time trust me i had it with stripe as well and i actually contributed to the the source code so you'll see me as a contributor to stripe pretty pretty fun but what you can do here is basically add it in so you can say data i mean i wouldn't really this isn't the best way to add in but you can add it in here but if you update your node dependencies it's going to change but what i would recommend is make a pull request to their documentation or to their modules and then basically and get this fixed for the good someone can do it right and then who knows maybe when you're watching this is fixed i'm going to add it in here and then i'm also going to change this to say const as well okay and now as you can see we've added in the two values and now if i go back to my typescript definitions it will no longer complain about it because it has those definitions in there we instead are missing a few other things so in this case what we're missing now is the content which is the post body so content equals the post body post body and you guys can check out portable text their documentation it's pretty cool uh how they have it uh we've got an empty class name which we're gonna have to have and uh also something called serializers now for serializers you guys can pretty much feel free to copy me for what i have here but what we basically have here is serializers are essentially how it basically takes an item when it goes across that array of objects right so that basically that rich text is an array of objects it could be an image it could be text what does it do when it comes across a h1 for example what does it do when it comes across a link for example some of them like images already done but here you can actually pre-define some so i've got a few examples here where we have an object h1 we basically go ahead and render it out as a 2xl h2 as an excel list and so forth so you guys can feel free to copy that as you wish and for links it's going to highlight them blue right so you can feel free to copy that and then if you want to know more information go to the react portable text documentation right but at this point let's go ahead and check out what happened so aha i just bought tesla to celebrate 100 000 subs let's go back to our first post right and you could you should be able to see that it's working now if i go back to the first post bam it's come up with the picture as well so this is literally what we have here right this is the same thing that we have here the post content this and everything looking pretty nice well instead we're missing one thing right now it's too close to the top so i'm gonna give it a margin top of ten and that will space it away so now we have the same spacing applied between the body attacks and this we still got to do the comments but overall guys we actually have the article in there and i promise you that's legit so if i go here and i want to go ahead and basically copy some of my other text so what i'm actually going to do here is go ahead and do something pretty pretty cool i'm going to take my text i had at the other one i'm going to copy it here so that way you guys can see the first actual thing so i'm copying that over um did it work no okay i'm gonna copy this stuff and see if it works paste okay i guess we can't do that that's fine so i'm gonna copy some of this over some of this text over for example all of this text and paste it in over here there we go that looks pretty cool publish it now we should have a bit more information on our article okay and as i mentioned before isr and because we're in dev mode it would actually show us the non-cached version but as you can see that looks a bit more like an article now okay so my first post laura mentioned why do we use it boom and then we've got the bottom bit right pretty sick all right smash thumbs up button let me know so far if you're enjoying this looks pretty good right so this is looking really nice um i think you tried silver use case i'm not sure what you mean but this is looking pretty nice so far right and what we now are going to do is have something called a mutation okay so mutation is i i kind of want to do something it's pet peeving me a bit i'm going to upload a better picture for that top title or for that top bit so i'm going to go ahead and change this to something like the zero to full stack hero there we go for the post maybe that's about we'll see let's go ahead and see if that changed it i've got a bit of a weird picture up here now let's see if it did it i mean it's not the nicest picture but we can see let me go ahead and change a different one all right let me go ahead and try and find it over here so youtube banner there we go nice i found my banner nice i'm gonna publish a new banner and publish it and now what we should see if i refresh uh refresh now sorry refresh again i need to it's cached it so it's gonna wait 60 seconds maybe i haven't published this one to change yeah i didn't publish the change there we go all right so if we refresh now i should get a new picture there we go this one's nicer there we go nice by now okay cool so it's pretty cool um muhammad says i enjoy it the way you teach is cool and relaxing that's what i'm talking about dude almost at 1200 likes this is what we want to do so this is looking pretty sick right so we've read the information from here we're using isr we have a responsive build already which is looking pretty damn sick like look at that right that is nice for a blog right and then we're gonna now add in the final part which is an api interaction whereby we are gonna go ahead and use react hook form to implement this form and then we're going to go ahead and basically have validation so that way we have to go ahead and do it and then we're actually going to have the ability to push this information to the database and then render it over here okay so um giancarlo so basically when we use nhs it depends you i'm not saying you don't need redux it just depends on the use case right now we don't need redux because of the way we're pre-rendering our pages but redux has its place i.e things like baskets all right in the case we have to pre-render a blog you can use this this is bell okay this is sick bro i really do enjoy it john fitness motivation thank you dude appreciate you man in fact i'm gonna go back to some new tracks now and then this kind of get this thing going and let's get this comment section built out okay i think we're doing awesome on time as well right are we looking jay right is it worth learning typescript hell yes what i've learned in typescript right so at this point at the bottom i'm going to now have my i'm going to firstly have a horizontal line after this i'm going to have a horizontal line after my article and this horizontal line it's going to go ahead and say uh max width i'm going to just show you guys what i put in basically i'm going to go ahead and pop in this class name boom max width large margin y of five oops and mx4 border bought a yellow 500 there we go so now i've got this nice little line at the bottom right and then i'm also going to go ahead now and have a form okay so for this form i'm going to go ahead and say get rid of the action but this form is going to go ahead and have labels span and input and it's going to repeat this a couple of times right so a label is going to have a span and an input so i'm going to go ahead and get rid of this so span and an input there we go and an example of what the hell this is is basically the first one we'll say name and that'll be the label sorry and then the placeholder here will say something like uh name or john appleseed right so john appleseed right so we can hit save now you can see i've got a name at the bottom right so what i'm now going to do here is i'm going to go ahead and do the following uh let me just do a quick check in all right so almost 1200 likes guys looking sick i'm going gonna copy this a few times bam bam bam so we're gonna have this instead now for the name the email the comment and then i'm also gonna have uh just those three things name yeah name email uncomment right so leave me one comment and this final one is going to be not type text is going to be actually long text i believe it was or was it it was it's gonna be text area not input it's gonna be text area right and it's not going to have this so you see typescript's picking up on errors we're going to say rows of the text is going to be eight rows that you can type in this can be like a bigger block of text now that looks awful right what we have right here i want to make this look a bit nicer so what i'm going to do now is firstly for the form i'm going to side it a little bit in this form i'm going to go ahead and say that it's a flex flex column so now everything should go in a sort of you know in a row in that sense which is a padding of 10 margin y-axis of 10. so it's got some space to breathe we're going to go ahead and give it um also padding on five just go ahead and padding on five in this one uh max width i'm going to give this a max width of 2xl center it with mx auto and then i'm going to give it a margin bottom of 10. so that way it should be a bit more spaced out okay so now we've got the comment the name and so forth right we're going to get this looking like this right so um yeah very sick okay let's carry on so we're gonna go ahead so everyone's asking how how important is typescript typescript is important because it's a way of writing robust code that's important guys don't underestimate robust code okay i'm going to add some headers in underneath the form title so you guys can feel free to pop these in this just says enjoy the article leave a comment below and a horizontal line okay so now you can see we're starting to get to this level okay you see under the article we get a line leave a comment below and then we just need to make it look like this okay so for this one the labels right now you can go ahead and do what i've done in the past and actually go ahead and um make a utility class a custom one but i'm not going to do it in this one because i've done it so many times before but i'm going to use this nice little cursor trick where i hold option and click several places and i get this multi cursor in this case command d does the same trick if you highlight on something and i'm going to do margin bottom of five so i've typed in three places you see we've got a bit of spacing between the components now and then what i'm gonna do is i'm gonna go ahead and style the span tag so these are all going to be grey pieces of text so i want these to all be gray so span span span are going to be class name text gray and i'm going to make it a 700 so a dark tone all right and a slightly gray let's see if we do 100 yeah so it's definitely great all right now gabriel what's up man gabriel says tap also helps you with other languages that are type strong 100 agree with that thank you for sharing that if you ever moved to java or any other languages like that you're going to be pretty familiar with how you use types if you use it um so it's going to be pretty cool right so inputs inputs inputs inputs and the text area so inputs and text there i'm going to give a class name and i'm gonna start styling these up now each one actually has the same styling so again you can do the same thing uh you can make custom utility classes but i'm gonna show you how i do it now so i'm gonna do shadow uh which we've got a nice little shadow i'm gonna give it a border they're going to be rounded i'm going to give it a padding y of 2 padding x of 3 and this is going to be a form input field so we're actually overriding the form input stars this is something intel and css version 3. margin top one we're gonna give it a block style block style so boom already looking pretty nice so that will take up its own width block elements basically take up their own width we give it a full width i'm gonna give it a ring yellow of 500 and then i'm also going to go ahead and that was that's actually that done so that's pretty sick right i'm going to go ahead and just stop that so we've got name email and so forth now i think the actual ring thing was if i do this yeah there we go ring right so you can do ring focus i think it is is it focus ring um focus outline outline zero so anyway anyway keep it as that for now yeah but you can change the color of that if you really want to i've got always off top of my head but this final one i'm going to change as well so this one's going to be this input is going to be this one sorry we're going to go ahead and say that this has got a shadow it's got a border it's going to have a rounded um and then padding y of two oops padding y of two padding x of three so a bit more spacing and then i'm going to give it a form text area so it's actually a nice one that comes out of the box for tailwind um margin top of one hit save and then block width for and you'll see that this will take up a new line because it's a block element now a very quick way of hacking that together ring yellow 500 bring yellow 500. cool all right so looks pretty cool and now immediately look at the ui on that right compared to the one that we had like before massive difference right so what we can also do now is have it so i think you know what let's both remember let's do outline uh none ring okay so now we can do focus ring is it focus ring boom your boy always comes through with it that's how you fix it right so you can add those in and now you can actually make the ring even smaller ring or one ring zero is it ring zero that's fine that's fine i'm happy with that i says take this one and put these in there because that was bothering me i was thinking what is that online none there you go so now we get this nice little yellow effect so i'll bow right the theming's looking pretty cool right so at this point how do i in the most optimal way hook up a form and do stuff with it right so i'm going to show you how to do this so we're going to use something called a react hook form so react hook form i use this in the gmail build as well so you can go ahead and check out reacttookform.com to go ahead and get more information on this but i'm going to show you pretty much how to use it that's going to be the much more fun way of doing it it's a lot more efficient when you're using this click get started and you just have to install npm react hook form to get started with this so command j npm install react hook form while that's installing i'm going to pull in my dependencies from the top so we actually need the following from the top use form and submit handler all right guys almost at 1200 likes let's go stick all right uh so use form use and submit handle is the ones we want and what i need to do here is actually have uh a special registry a register sort of a function right so use form so in this case i go here and i'm gonna go and say const and i'm gonna destructure there we go that's the one i needed i actually need the register i need the handle submit and i need something called form state which has the errors inside of it right as you can see let's go over here this is basically going to give us this is basically how we connect our form to do some cool with it right so i'm going to show you how we actually do that in a second but firstly we actually have to define the form fields in typescript and i'll show you why and this is basically going to level up our code as well so i'm going to say interface i'm going to say the iform input so you can call it whatever you want basically it's just an input form input or iphone i don't know whether it's by as i was named given to me so we're going to give it an id of string and i'll show you where this is as well right it's gonna be a hidden field i'm gonna say the name is gonna be a string and then we've also got a few more fills we've got the email and we've got the comment right so these ones so id name email and comment and then this input field type what we do is we use it as a template here so now our form knows that it can only have these types and by the way if you ever want an optional type you can do something like this you can have name question mark which basically says the name isn't required it can be also blank in this case we require all these fields now the id is the interesting one you're probably wondering well sonny you don't have an id field in your form well what we're actually going to do is where we have the form i'm going to have an invisible id which embeds some information inside of it so the one that i'm interested in doing that for is actually this one here this one here so i'm going to say input type hidden the name is underscore id and the value of that field is going to be the post that got passed into this uh component it's going to be that id so it's the page you're on it's going to be that id okay so this is where we use the magic register functions our register function so you basically it's the syntax we're going to do it spreads out the register it basically enhances our input field so it can do the connection to react hope form which allows us to pull the data from the form in once clean sweep um in simple all you need to do is go to all your input fields bam put it in and give this the correct names right now this one's going to be name but this is also a required field so in this case i add in second argument and say required true and that's that done i go to the second one register and this one's going to be email and this is a required field to require true and then the final one is going to be this one which is going to be for comment and this is also a required field okay now what happens is if i try and submit this form and any of the required fields are left blank what will happen is we will get a nice little validation fail or an error right and where this will come is it will come underneath here so errors will return when the validation field uh validation name fails basically and what we're going to do is we're going to have a div all right and inside this div i'm going to have all the errors right so like you saw here the name field is required comment footage required the way we do that it's very simple actually we just say errors dot name so that's for the first field errors.name and that comes in over here so where we had the errors being poured that gets populated over there so errors don't name if there's errors don't name then we just go ahead and render out something so in this case i can render out the following i'm actually going to do all three in one so i'm going to go ahead and paste them in so i save a bit of time bam arrows don't name pull this one out name footage required arrows.com and pull out the comment field is required and the final one the email field is required right each of these are going to be in a flex container where we do flex columns so they're stacked up on top of each other and i'm gonna say padding of five boom now with that craziness done uh if i go ahead and i need a submit button how am i supposed to submit this phone right so the final thing underneath that is going to be the input button for the submit so input type is submit and i'm going to have a class name this one is going to be let's put it afterwards actually looks weird there let's do a class name this is going to say um now rube singh says i want a full stack development course join us at proper react.com and join us zero to foursecure that's literally it the link is in the description we've got your back with a full stack of course uh anyone from zero to full stack hero let me know right what you guys think of it so bg yellow 500 and then i'm going to say when i hover over this button uh yellow sorry when i hover over this button i'm going to say bg yellow 400 all right so already i've got a button here now when i hover over you see that this the thing changes i'm going to go ahead and say when i focus on it the shadow should be an outline so when i basically click it and then i'm also going to do a few other things i'm going to say that the um focus should be shadow outline i'm also going to give the current focus the ring that little ugly ring outline none all right text should be white i'm also going to say the font should be bold so let's hit save on that already a few differences we need the padding to change padding y of two padding xr4 already looking a bit better i want to be rounded and i want the custard to be a pointer bang all right and look at that already looking sick if i try and submit this guys it will we haven't got the handle submit function hooked up yet so that's why it's doing this serene cowden yo what's up six dollar donation appreciate man it's great to see you back sonny it's great to be back dude thank you so much for tuning in i appreciate you man bye why input submit instead of button because you can because i want to style it so i don't want to have to override button stars so that's how we do it right so i'm going to turn that off there we go turn this off one second bow all right so at this point pretty cool we've got this the next thing i need to do is react hook forms is basically we need to connect its way of submitting the form so the way we do this is we go to our handle submit which comes up here and i'm going to create another additional thing called on submit right so on submit and what we do with the onsubmit function is basically where we would typically have a normal function which is written something like this on submit um something like this right what we're actually going to do here is use a special submit handler prop type right so what we're going to do is we're going to say that this is of type submit handler and we're going to pass in the input type that we've gone ahead and casted so now it knows what to expect right and what we're gonna do here is we're gonna say async data so inside of data now it will know the data field so if i do data dot look at that it knows exactly what fields are coming from my form so this isn't from magic this is from basically using their function and then wrapping it without uh casting it with our form input type okay so at this point yeah guys 1.2 k likes what already in two hours we're doing so sick right now all right let's keep moving this is going awesome right so at this point uh we're going to basically try and push the data to the the back end so in this one i just want to check something i'll do data right now to see if it works but if i try and submit now oh oops i haven't hooked up keep forgetting so this on submit we need to go ahead and go to our form down here where is it boom here and i want to do on submit on submit and basically i need to write it in the following way i need to wrap their one so handle submit and then pass mine in as an argument right so their function takes mine as an argument and mine is what handles the data now as you can see what's really cool about this is if i go down here now firstly if i submit boom is it actually starts reacting so i can say sunny sanger sunny gmail.com and also guys make sure you have that as an email i forgot to do that um this one is going to be type is email there we go so you have some validation there and then comment is yo smash the like button and subscribe there you go subscribe nice okay cool now if i click submit boom you see how it only submitted when that all the fields were full right so now that data comes to me in a very clean function over here in the data and as i mentioned before if i do dot all of these fields are perfect because of typescript have script just makes it so clean right makes it super super clean right so at this point we're looking good we're looking very good right so what i want to do is i want to push this now to uh the comments over on um on sanity so i want to push it as a data type uh with a schema maxwell what's up he goes thank you for five hundred excellent as always science question we ever used for one of your youtube products not at the moment i'm not planning on deviating but thank you so much maxwell i do appreciate the donation but who knows man i'm never gonna say no to certain things so you know who knows where it goes probably gonna do more vlogs as well so stay tuned if that excites you let me know right so um now you know it's going to become a thing it's going to be a thing i'm telling you right uh and i'll clip that there all right so on submit what we're going to do now is i'm going to basically have the following so i'm going to say await and i'm going to have a fetch right and what i need to do is i need to make a fetch to a my api which i haven't even created yet and what i'm going to do for this is i'm going to create an endpoint called create comment and i'm going to pass in the following so it's going to be a method which is a post request and i'm going to pass up the body and i'm going to stringify the data from the form okay now what this is basically going to do is i'm going to push this data from the form over to my api back end and what this would be is it was a post api request a rest api we're doing and they're going to pass the data and what i want it to do on the back end is then go ahead and update the database and mutate it and push it in okay so uh in that case what we do now jay we good yeah i think we are yeah so at this point now what we're gonna do is um here we go hey from lebanon what's up guys i'm gonna go ahead and say then once it's finished we i just want to console.log the data just to see that it all went through or good okay so and then we're going to say um okay then i'll show you how we do afterwards right and i'm say catch afterwards if there was any errors and just for now i'm not going to go too far into it i'm just going to say catch if there was any errors console to log the error okay and we can do some cool front end stuff afterwards now next step is create the api endpoint so in next.js because we have that intermediate server we have a built-in api and you can test that by having looking at this hello.ts uh function which gets built for us what i'm going to do is create this create comment so create comment.ts function and i'm literally going to i'm actually going to take this right and i'm going to go ahead and pass it over here like so right there's actually going to be the similar kind of layout as to what i'm doing but what i'm going to do here instead is i'm just going to call this function create comment right or it could be handler whatever the case and then i don't need this data right now right but the request and response is perfect that works for me right we get the request response and then what we do is we can do some stuff with it and you can test this and prove that i'm not joking um by going to the localhost forward slash api hello and you'll see that dummy requests come back the one that we see over here right so at this point we can pretty much use this to go ahead and get things kick-started off now what i need to do is i need to have a config at the top of my file which looks something like something like this right we have a config we have the data set the project id and then we have the sani api token which i will give you in a second right i'll show you how to get i mean all right so we're going to go ahead and pull in our sanity client all right so remember the one that i used set up earlier i'm going to pass it the config over here okay so in fact i think we can we don't actually need to pass in um the sanity client i think we can actually just use the one that we had earlier and it would work although no i think we need the special one for this all right so in this case what we're going to do is i'm going to install the sanity client over here so npm i sanity client and then i'm going to go ahead and import sanity client here instead of using this one i mean you could probably try the other one but i'm this one works for me right now and i'm live so i'm going to go with this sunny client here bang and we've got our client config cool so we've got everything set up i just need the sani api token so what you want to do to get this magic token is go over to your sanity dashboard all right so this one for example go to your api tab over here right go to tokens and then what we're going to do is we're going to go add api token and here i'm just going to type in youtube sanity and i want the editor token this is the one which allows us to read and write access to all data sets with limited access to project settings okay click save now i'm going to click save and then it will show me the token so i'm literally clicking save now it shows me the token i am copying that token okay so i have now copied the token and i am now basically leaving that so now in my clipboard i have my token okay so the next thing that i want you to do is go back to your code go over to command b go to your environment dot local file right and what i want you to do is sani e dot api token so sanity underscore api token remember it doesn't have next public in which means it's protected now and i want you to paste in that code so i'm going to hide it here i'm pasting in that code saving the file and i'm closing the file okay so i saved it i put the that code in and then now i'm doing is that variable and i'm restarting my next js server because i changed the environment variables okay argentina in the house what's up man all right um with then is this a necessary await good point actually i didn't have that before so you don't actually need that so shout dude uh you don't actually need the await here yeah if you're doing um with the then you don't uh you don't need the 08 but before i had a try catch and i was messing around with a few things but yes good spot okay so at this point okay we now have that code in play we now have our api key up and running and what we can do is we can start coding on the api now the reason for that is that key allows us on our api which is a protected zone which is safe it allows us to read and write to the database which means that we can communicate with our api and then that will securely interact with the database so what i can do here is now i'm going to go ahead and basically pull apart those four variables from the request body okay so over here i'm going to go ahead and just oops i'm going to destructure my destruction let me go back here there you go let's do something else yeah i don't know if i like that object that one i just had right so i've got the const id name email and comment so jason.passrequest.body so i'm basically destructuring those values from the form submission that i pushed through and then what i'm going to do is i'm going to go ahead and i wonder if you get 1300 that's crazy honestly all right and um now i'm going to go ahead and just uh do a try block and this is going to basically allow us to capture any issues that's going on um and i'm going to say a weight right and here i'm going to do the phone i said wait export default this needs to be an asynchronous function right i'm going to say await client.create okay and inside this block what i'm going to do is i'm going to pass in the following so what i'm actually doing here is i'm creating a document insanity cms just like i was manually doing before right so i was doing it here i'm actually doing it in a programmatic fashion now so i'm going to create a new type called um comment right which we're gonna have to create a schema for so i'm gonna go ahead and say comment and then i'm gonna say post is gonna be of type reference so this is a reference to another post and what this means is it will actually go ahead and reference the entire object so like a relational database in some sense we've got a name we've got an email and we've got a comment okay nice looking pretty good so far right so we've got this in in play looking quite nice and then i'm going to go ahead and say after this await right so i outside the try catch block those outside the try catch i'm going to catch the error if there was an error and then i'm going to go ahead and say console.log the error oops console.log the error and then i want to basically return a 500 status message with the error message inside of it right so i don't actually need to console log it and screw it up all right otherwise i'm gonna go ahead and return a message which basically says the following it says 200 to all good and it says comment submitted okay so hit save and i'm actually going to go ahead and just add a little console log here so you can see it as well inside the inside the you'll see it in the um here you'll see it when we actually do that now okay so at this point our create comment endpoint is actually up and live right so this works i mean this hopefully works let's try it out so what we're going to do now is pull open everything that we need i'm also going to go over here and do this now if we don't see an error message we should be good right so i'm going to type in sunny sangha sunny apple.com yo this is sick right hit submit and boom okay and you see in the server logs comment submitted right um it's using sanity without specifying an api okay between this especially version it's fine we can do that here um but comment submitted okay so where is my data then so if i go to my my uh document over here my sanity studio i can't seem to find my comment this is because we need to update our schema so that way it knows to look for that right so this is actually pretty simple when we get this working i'll show you how i do it we go over here we go to our schema send a youtube schema and then i'm going to go ahead and create a new schema now what i'm going to do here is i'll show you how to do this and you guys can feel free to just copy it in okay so i'm going to create a new file here or comment.js and basically this is what you would have to put in now basically the way i've done this is very simple guys all i've done is looked at a post and i've restructured it accordingly as i needed it in this case it's got a name which is comment the type is a document the title is comment the fields which exist inside of it a name also this new approved right which is basically means that people can comment but until i the moderator of my blog approve their comment it's not going to show on the site because if it's a blog i don't want harmful messages to be shown on the blog so this is going to allow us to restrict that then we have email comment and post which is a reference to the existing post so if i do that and we refresh we still aren't going to see our comment right we're going to see this we're going to be like oh i thought i'd done everything you know was not working well we got one more update we need to go to our schema and as you can see here what we actually need to do for the schema is we need to import our comment right as part of the the additional thing and then we just need to drop it drop it in here now when i hit save rebuilding our sanity studio bundle and we should see now comment bam and we should see the one that i added and it should say this is sick nice all right so you see how that worked right oh nice everything dot it says love you love your teaching style sonny love from london awesome stuff man what's up so as you can see it came through so now we've got successful pushing that went through that was a full stack kind of thing right front end we built the api we communicated to our api and then we went ahead and made a mutation to a standard ecms so looking pretty sick right now all right we did that now what we're going to do is we're going to finishing finish off the rendering part on the front end right but i also want some feedback where i also want some kind of a message to show me if i actually had um the submission go through or not so what i'm going to do to make that happen in a nice way i want to say like thank you for your submission right so in this what we do is i'm going to create a piece of state which keeps track of so i'm going to go ahead and create a piece of state so submitted and set submitted we're going to initialize the state with false and what this is going to do is by default it will be false but after you submit the form what i want to do is i'm going to set submit it to true right otherwise if there was an error set first right so set submitted to false if there was an error right but what we can now do is rather than rendering the format of keeping it on the screen i can go ahead and do the following so this entire form i can now do something like this i could say if submitted right then it should go ahead and render something else it should render out the form so i should grab this entire form cut it put it inside this block and now we get a bunch of complaining because we don't have a submitted block here so if i just put in h1 say submitted all right and to test this is there we can do a uh let's just do andy b uh andy there you go shout out to you dude uh and we can say yo pop fam and hit submit and now we should see in a second it says submitted so now we can start styling this because we have hot reloading so this is my kind of way of doing stuff right i like to just kind of mess around with it and build it as i see it so in this case i've got a div and this will have a h3 inside of it and a p tag outside of that now the p tag here will say the h3 so first he says thank you for submitting and then we're also going to have once it has been approved it will appear below right so once it once it has been approved it will appear below so you can see this at the bottom right and then i'm also going to go ahead and start this so it looks a lot better than this so flex flex column very easy to go ahead and do that uh padding y of 10 margin y of 10 okay so it's going ahead and pushed it down a bit background should be yellow and i'm going to do 500. i'm going to do text should be white i want to do max width to excel right and i'm going to say the margin x auto so that way it centers itself the h3 should be bigger so it should be a text 3 xl and it should be bold so font bold hit save and bam look at that the difference is insane all right now instead of padding i'm going to make it all padding myself something there you go now look at that thanks for submitting your comment once it's been approved it will appear below and if you come back to the screen fresh it will no longer be it would be fast you can actually add another one so it'll stop you from like spamming the hell out of the thing right now what i want to do is show underneath the comments right and i want to basically filter it based on the things which are going to be um basically like um approved only okay so what i'm gonna do is do you remember that we previously had a uh a query that we were using to go ahead and pull some information so in this case you can see the query that we had was this one right so what we can now do is enhance this query introduce a new custom thing called comments right and what i'm going to do here is i'm going to introduce it here and i'm going to say this is going to be an array basically i'm going to select things so basically i'm doing like a sub query now i'm going to select a few things and what i want to do here is i want to make sure that it's i'm targeting everything which is of type comment okay and i'm going to make sure that the reference the post reference is equal to the id of the thing which i am nested in so in this case the post reference right is going to be equal to um so but make sure that the post reference is equal to the like upper level id so basically this one right and then i'm going to go ahead and also ensure that approved is true right ensure that the um that they're approved is true so that means if i go ahead and check this now oops we've got an error here where i have the following that's because i've not done let me just double check my syntax boom [Music] there we go okay so there we go i just had a little typo now you can see there should be a comment on the first post so you can see comments well this one did we comment on the first post we actually did so we're gonna have to see which one i actually added it to did i do it here i don't know if i didn't do it let's do a b c a b c dot com abc submit cool we got the feedback now if i do this again we should be able to see a comment is it comes back with zero okay interesting so we need to have a look as to why this is happening um so we can figure it out but in this case post ref and id let's have a look at the actual sanity database and debug it so if we look at our comment and we look at any of these so if i look at this one it is linked to the first post all right in fact i've probably just got a silly mistake here so reference um we've got the id is not oh yes of course all right there we go i fell for it casper thank you dude i would have i would have actually spent way too long on that it's because it's not approved right that's why so i need to approve it right good shout so if i publish this one so now it's going to come back in at the visualization studio so if i go here and i do it now we go here and comments there you go it comes through thank you dude that is how i know you are like clued in right now that is that saved me a lot of headache dude thank you um that really really helped me out okay so with that said now we're gonna pull the comment in i'm gonna do one more so we can see and i'll probably make this one a bit nicer so it's not spammy um let's do this again let's go ahead and say uh casper butch caspar birch uh thanks for the bug fix dude all right there you go submit now customers made it in awesome stuff and then i can go as a like moderator i can come in i can see casper commented let me approve casper all really awesome awesome stuff i can approve it over here and now if i refresh we can see i mean where if i go to my visualization tool and hit enter i can see casper's comment as well right so i'm going to copy this now i'm going to enhance our code over here so where i had previously um done it oh yeah so i actually had it before i i forgot to take out so this is where we basically had it before so what i'm actually going to do oh no i did have i just did it now of course yeah so we're basically going to keep it there right so this will pull the data in now as uh as we've done it so what i now need to do is enhance my post type definition right so if i go to my typings pipings.d.t.s i now need to enhance this so that it knows what a comment is right so i'm going to go ahead and create a comment type so down here i've got the things which a comment has inside of it created our id rev type updated uh approved is a boolean and so forth and then on my post what i'm going to do is i'm going to say it also now has a comment which is of comment array type right now array you can also do it like this right it really doesn't matter right but that's basically going to enhance it now so now our code knows that it has comments right aidan massas thank you he goes mr sunny jancar is ilsun the way you teach your stuff in a simple way so appreciate it thank you so much honestly that really does mean everything so i appreciate you sharing that with me all right so um at this point we have all of this pretty pretty sick working right so i can now do just to prove console log the post go back to my build uh come on and inspect and i get the object i get the comments come back if i refresh sorry let's refresh to see it one more time and i see my comments now boom i get the comments come through so we can now go ahead and render it right so we can actually go ahead and render this out now and actually get this on the screen so you can see where i'm going with this all right it's moving pretty well uh we're almost done almost done right so at this point what i'm gonna do is underneath my code underneath at the bottom next to my form so underneath my form i'm gonna have the comments down here okay so the comments i'm gonna have a div oops a div and inside i'm gonna have a h3 and this will say comments and then i have a horizontal row like a line to separate which will be like this comments and then i'll have all the comments listed out okay so the way i can do it i can say post oops post dot comments all right so post comments i want to show you guys how it works dot and then you can see map because it knows about that what it is right so i can map through each comment and then i can go ahead and return the following so not an object sorry i can return the following and here i want to have a div with a p tag inside of it and this will be the comment dot name and it's going to have oops comment dot name is gonna say to the other person or that the name is gonna say the comment.comment there you go and it knows that this is a comment because it was a comment type right i'm saying if i was to go ahead and do dot oops it would have all the different comment sort of fields that we have right so it'd be sonny said this or something like that right now if we hit save we can see that casper birch thanks for the bug fix yo this is sick nice we have the stuff coming up at the bottom right and casper says thanks thank you dude saved me a little headache for that one um it always comes in clutch when people do that right yes i really appreciate that so comment dot id and you can see i can just comfortably code now knowing that these are correct right this is correct class names and it works so if i do span here by the way i'm going to span around the name and i also want to have it this bit and i'm going to go ahead and span some yellow text here so i'm gonna say text should be yellow 500 save and now again a little bit nicer for the overall container around here i'm going to firstly do this should have a padding bottom of two this should have a text to be for excel hit save boom okay and then the overall div we're gonna start b flex flex column [Music] and then i'm gonna say padding of 10 margin y of 10 so top and bottom and then i'm going to show you guys a pretty cool tailwind css 3.0 thing that they have so max width 2 xl uh and mx auto to center it but i'm going to show you the cool thing here which is basically we can have a shadow colored shadows now so now you can have a yellow shadow if you want of 500 so in this case if i do that and i add in the shallow you can see that it's actually added that in so if i do space y of two all right let's space the gaps but you can see we've got a yellow shadow now so if you want shadow like colored shadows now it's easy to do guys really easy to do with this all right so already looks pretty good right so look at that nice works really wicked and there's a little space that is bothering me there you go bam and yeah get a nice little space cool looks really good i like it right so at this point we have got validation we've got comment features working we've got the approval of comments we've got our content management system managing the entire blog we can literally click in it's fully responsive everything works the way that it needs to work and it has got this nice little effect over here damn powerful for what we have done in the amount of time we've done it two hours 45 so far this is crazy guys this is really the power of sanity cms combined with nexus it's a match made in heaven for something like a blog for something like an e-commerce site so i hope this is showing you what you can do with it so what we're gonna do now is i'm gonna show you guys the steps of deployment okay so the first thing i want to do is remember that i've got the uh sanity studio locally running on my localhost 33.33 well what i first want to do is i want to have a way to access the sanity studio anywhere that i am right so what i can do now is i can deploy my studio and it'll still be protected because i'd have to log into the correct account like google and then i can get access to it but what i'm going to do now is go ahead and where i've got sanity studio running i'm going to keep that running over there for a sec but i'm going to go ahead and actually cd into it so in this case if i do ls you can see sanity youtube so cd sanity youtube and now i'm in the correct folder don't get that confused i'm going to type in here sanity deploy and what this does guys is it takes the studio and it will go ahead and it will deploy it online so you can see enter a name for the thing that you want so in this case i can go ahead and say um let's give it a name so let's just say sanity youtube sanity yt right 70yt and here we can see all right so here we can now see let me just check something all right so it's building the output folder cool and uh i'm saying my music is gone where is it now we're good okay so he's building the output folder oh it's sick james goes you're killing it nice all right guys we're literally finishing up so it's awesome stuff they stay with me for the deployment bit um a gaga says it's a very powerful stack yeah dude this is sick this is really like a game changer stack right this is why i wanted i was excited for this one but as we can see here right minifying javascript bundles deploying to sonic and there we go sony eyt dot sound eato studio it will pop up connecting to sanity logging in i was already logged into my gmail hence it allowed me through and now guys this is literally my sanity that i showed you guys before with the same comments from casper for example and we still have full control and the amazing part about this is my local and my actual um one that was up so if i do 33.33 you can see that these are literally still interconnected with that live feature that i told you so if i do my second post one also one two three look how my local is connected to the deployed version that's crazy right that is literally really powerful really cool to see that so now i have my i've deployed my sanity studio and the next thing to do is deploy my nexus app so three things we have to factor in we have environment variables so remember those three those the uh yeah let me let me find them there was three there was i've been i've lost them the sanity data set summit project id and the api token so i'm going to show you now how to go ahead and deploy this app right so first thing you want to do is go over to your github and you want to go ahead and set up a repo so let me go to my github repo there we go i'm going to create a new repo and i'm going to go ahead and call this one something like let's go ahead and say um we're going to call this one sanity demo youtube right i'm gonna get private create repo and then what we're gonna do is i'm gonna go ahead and remote add the origin i should be all good for this one so i'm gonna use this middle terminal here boom add room origin and then i'm going to go ahead and do git status and as you can see loads of untracked changes i'm going to go and do git add all and oops that's actually going to do something i didn't want it to do so we need to be careful about this because my source control is including my other npm modules which is what not what we want so here inside of git ignore we actually want to go ahead and you could actually not deploy your sanity youtube if you don't want to it doesn't have to be pushed up but we are we are going to do that okay so what i'm going to do is go to my get ignore i'm going to add in the following i'm going to say add in ignore anything from sanity youtube sanity youtube there we go so [Music] cool anything from there we're going to ignore actually i want to ignore the node modules the uh distribution actually we don't care about that the config's fine plug-ins statics fine okay maybe let's just do that one for now and see how it goes right so i'm going to get idle and then get commit and let's just call this one you should give it a name i'll just say finish the build finished the build and now get push boom setup stream origin main bush that and we should see that i have my code be pushed over here okay so i haven't actually added my oh okay i didn't do add origin sorry okay all right so oh it hasn't pushed yet yeah so let that push in all right can you show me what you're doing i'm new in the stream yeah we're actually adding in um where we're currently deploying a sanity cms backed next.js app so it's a blog app and we're currently pushing it to our github all right so that's just pushing over now i think i pushed something which we shouldn't have um but who knows would be interesting to see mpn ignore that okay compiled stanley studio okay i should have all right sure all right so what i should have done is actually ignored a few of these things as well it's okay it's fine all right so that will go ahead and do its thing and it will push to our repo so i'm going to go to verstel and then i'm going to go to my new project and import git repo so sanity demo youtube and this one it needs to basically push before i can import it so it's just being a bit slow on live stream now i've done deployments a few times over so i may not even deploy this one i may just show you how it's working but basically what i can basically the way it would work is you deploy it you update your environment variables so those three variables that i showed you guys previously you would have to go ahead and pop those in as well inside your versa and then it will go ahead and deploy your next js application super easy to do that honestly it will pick up this next chest automatically and it will do uh it will do the deployment some reason my github's not pushing right now which is a bit frustrating i'm not sure why that is happening um but why do you get status to see what's backing me up okay um components pages scientists yes all right anyway so i'm not going to push it i'm not going to i'm depressed i'm going to show you guys a run-through over what we did in today's build and i want to do it with my song there we go i'm literally about to break 1300 likes which is crazy way of finishing right so let's run through what we did in debate today's build right so literally if you want to know about deployments you can literally do that in what i've done previously before right and it would deploy i'm going to try one more time get out or get commit uh finished build oh no okay i see aha i've actually done it from the wrong directory oh okay uh all right get at all there we go get commit finished build get push okay so that was actually an issue yeah let's try that now okay i think i might have screwed that up because i might have not done it here let's do a refresh okay we're good we're good i'm going to show you the bird all right i'm going to show you all right so we'll do this and then i've got my environment variable ignored correct go over to versal and we are going to deploy and now just now this one import it and you can see let's go ahead and actually refresh it should pick up there it's in xjs build there we go import next js and we can go to environment variables now this is the one where you've got to be careful guys so i want you to go ahead pop in your next public that one i don't mind showing you right this one here and i'm going to go ahead and pop this in as well so i'll pop in the final ones um which were and local sanity project id so add and this one here and my project id was this add and then the final one is sanity api token so remember that editor token you need to add that in right so i'm not going to show this one you guys thought i was going to forget i didn't forget all right so i've done it and now you've got this up and i click deploy all right so this is just to make it super i want to do that entire build finish to finish so we can do it right radical peter says yo papa what's the song in your bills like your vids all of this is actually in the papa fam epidemic sound playlist so if you sign up to the newsletter in the description you actually get access to this for free right so it's the whole papa fam playlist i this is what i actually listen to when i code so um yeah you can feel free to jump into that dude so this will go ahead and build it and then we've got a little error here which is the package lock generated build cache not found interesting okay i'm not sure what what what happened there let me try here go ahead and deploy this again let's give it a go again if not we're going to go ahead and do that another time because it does work i've deployed this one before finish build let's go ahead and do the build logs redeploy let's try one more time redeploy with existing no let's give it again all right delete normal jewels it's been a while sunny how are you doing i'm doing awesome dude thank you so much right i think it could actually be because of the package block as well no bill cash available uh that should be going through now okay if it doesn't it's all good okay there we go we got for it so you see what i did there if you get an issue like that go to your deployments redeploy all right so interesting we got this forward text it says oh i see okay so this is because of the typescript definition issue right that's because we modified portable text interesting so you can do a uh yes and ignore this one and it will get past this uh which is super annoying okay never mind what i'll do is i'm gonna update the code in the github repo and it will work right so don't fall stressed out if that doesn't deploy but that's all it was remember when we added the react um portable text custom uh type typescript's basically freaking out saying oh no no you can't do that so in fact what you can do at that point is in this case i mean you could literally ignore it if you really wanted to um but i don't recommend doing that okay but in fact what i'm going to do is i'm just going to wrap up with a build a demo and just end it on a strong note okay so we're gonna go ahead and show you guys what we built i'll use my initial build as a demonstration but let's go ahead and pull this up now one second let me go ahead and pop this in right i'm gonna pull side to side so you guys can see everything all right where's it going my localhost 3000 bam okay nice so today guys we went ahead actually i'm going to deal with my my theme song is it no there we go if you know me you know this is the theme song so this was the build we did today absolutely massive right we can go ahead and see we've got the medium build right here which is powered by sanity cms remember use the link in the description to make sure you go ahead and get the double down benefits by using the proper fam boosted package that we have with the guys over at acms we built a awesome build today actually had incremental static regeneration which killed it absolutely worked and it did all of the sort of content management behind the scenes for us allows us to maintain a blog like this with ease we have our awesome static optimized dynamic capable pages using isr right and you can see here we've got our blog content we have the ability to leave a comment we have form validation using react hooks form and yeah guys this was the entire build we done a massive build in about what was it three hours so absolutely crushed it just about to hit in at 3 1 2 300 likes fully responsive build i hope you guys have enjoyed this i'm just reading the last of the comments is there a homework for this build this build this con trust me build this one it's probably the biggest learning curve you'll have i'm probably going to compile a nice little boot camp for next just now and now that we've done that i think it's our fourth or fifth the fifth build so i'm going to compile all of them together get the best bits out sharon says sunny you're so down good thank you so much and yeah guys as always if you enjoyed the build smash the thumbs up button hit the subscribe if you enjoyed this and you want to see more content like this hit the bell notification icon so you don't miss the future builds and as always guys it's your boy papa react and i will see you in the next video peace somebody said i almost forgot to like no dude you can't forget the light thank you guys i'll see you in the next one [Music] now [Music] you

Channel: Sonny Sangha

Views: 180,144

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: I2dcpatq54o

Length: 182min 34sec (10954 seconds)

Published: Wed Jan 19 2022