🔴 Let’s build a BLOG with Next.js 13 (Sanity v3, TypeScript, Tailwind CSS, Auth, CMS, Preview Mode)

let me feel your love again yo what's going on Papa Farm welcome back to another Banger of a video today we're going to be building out the Nexus 13 Vlog with sunny version three that's two pieces of Cutting Edge Tech right now they literally released within within the space of a month sunnyv3 within the space of a couple of days so this is one of the first most intrusive Tech builds I have done for new bits of tech so get excited let me know what you're watching from right now and as always guys enjoy this video let's go ahead and take a look at what we're building today the next js13 block with sunny version 3. check this out Sonny's daily blog this is it guys we've got a fully responsive website right now welcome to everyone in the chat to see everyone's popping off right now this is awesome what is going on guys so right now I'm going to show you the fully responsive bug we have right here we've got Sonny's daily Vlog you can go ahead and scroll down and this is all using the oh uh the latest and greatest from next year so let's go ahead and click into sanity studio version three we're gonna click into that right now you can see bam and guys bear in mind that was instant that was a static page right so let's go and check this out we can go ahead and go down to our article you can see all the great stuff that is released inside studio version three and guys just to mention this is all powered by a Sony ecms backend so this is why I'm excited to show you now I have never ever done this before on a build because it wasn't possible something you recently released this within a couple of days ago and I want to go ahead and show you guys first so as you can see this is not on a custom sounding URL this is actually part of the next JS app which means it's now an embedded Studio which is crazy we have so much power to customize it do whatever we want with it look at the color scheme I've gone for I've gone for a nice coat of Dark theme right here I've added my own custom navbar header and what's even more cooler guys is that something I've never done on a build before is now possible if I go ahead and split the pain and I go ahead and add in the preview option over here so I've added this custom filled in check this out guys I get a preview mode enabled which I'm going to show you how to enable and then let's go down to the sanity block right here right so Sunny Studio V3 now check this out as I go ahead and update the information on here look at that guys it goes ahead and shows me a preview in real time this is streaming using a bunch of cool Tech right now it's using a bunch of powerful things from sunny it's using the new nexjs 13 server components and this allows us to get a nice preview view before we publish that information and now on the actual website how we can do the exact same thing let's go to the localhost for the home page if I go to forward slash API forward slash preview it now puts my app into preview mode and it loads up the preview there this means it's going to pull in all the sanity information from my backend even if I haven't published it so this is great for if you want to go ahead and have you know that careful control over the reviewing content before it is live on the actual website now it's worth mentioning that all the blog posts are using really efficient optimal rendering techniques such as the new generate static Rams which is a replacement for isi and xjs13 I'm going to teach you what all of that jargon means so don't stress we've got a lot of good stuff coming I can see so many people tuning in we have India France Ghana Haiti Senegal Greece UK USA Spain this is what I'm talking about guys welcome to the Papa fam and uh yeah this is going to be one hell of a build now I just want to mention a couple of things before we dive into this build a few things about the tech stack right now we are going to be using Nexus 13 as I mentioned a couple of times this is a framework for react and then we're going to be powering up the entire back end with sounding his amazing content platform now when it comes time to use it sanity make sure you use the first link in the description because we are going to be giving you a literally a double the amount of free quarters so they've hooked us up go to sammy.io forward slash sunny and you're going to get access to this right here which is a special command which allows you to go ahead and redeem pretty much double all of the free monthly usage so we've doubled everything we've got a nice little thing going on with sanity right now the team are incredible so make sure you do this to get all of that free good stuff now we are going to be diving into sanity version 3 which as I mentioned before was it literally released days ago so right now it's not even been out for longer than a week so this is literally breaking a Cutting Edge new stuff they've got four typescripts coverage right now they've got an incredible developer experience which you're gonna see for today for yourself it's a lot nicer to code with now they have Global search and content filters it's amazing for the content creators as well because imagine you as a developer have one job but actually uploading the content and managing all of that can be completely delegated to someone else this allows all of that to happen very easily so a massive amount of use in this case we've got workspaces to go ahead and separate different areas of the company different um you can have different countries all that kind of good stuff and as I mentioned before we can embed the studio into our own website and customize it however we want they actually have a really good migration guide so if you are looking at any of my old tutorials make sure you check out the description we have got a nice little guide on how you can upgrade some of my old code which is V2 over to V3 and don't be scared know those tutorials aren't outdated you can go ahead and use the migration guys to go ahead and level up your stuff so do not stress guys we've got you covered over at the papa farm right and if you haven't already and you want to go ahead and support myself and the guys over at Sani make sure you go ahead and head out head over to the product page Sunny studio version three give them an upvote Guys these guys deserve it is absolutely incredibly powerful of a platform and you're gonna see just how powerful it is when we go ahead and Implement all of this today and guys trust me it's so much easier than you think okay just follow my steps enjoy the video it's all going to be up on YouTube afterwards don't stress right for now we're going to go ahead and dive into it now as I mentioned before if you find any of this to tricky or is too over the top and it kind of gets a little bit too intimidating check out our course of Reserve paparea.com link is in also in the description we've got our course zero to full stack Hero full community where we go ahead and help you become go from zero skill set all the way up to getting your first developer job and helping you after that oh we've got over 750 students right now absolutely really killing it absolutely loving it weekly coaching that's all over at Papa react.com and I'm excited if you haven't already joined us over at the University of code make sure you check it out they're literally getting daily emails coding challenges sent to your email inbox so every day you just check your inbox you get a nice little coding Challenge and then the day after you get the solution to that challenge Trust Me by far the most effective thing I found for our students so check out the University of code so those two things are said let's dive into today's video get excited get ready this is going to be a big one make sure you go ahead and have your water nearby it's going to be a lot of fun so as I mentioned before typescript is going to be used in this we've got Tailwind CSS we've got the grok query language to go ahead and pull this all in we have embedded at the forward slash studio so I'm going to show you how to do that with next year's 13 and we're going to go ahead and finally deploy this to the cell so that way you have a live production app which also allows everything to happen now it's worth me mentioning when we do have the forward slash Studio root this actually uses sanity's authentication so you can't just go into the studio and use it willy-nilly you have to go ahead and sign into an account which you've got to allow gone ahead and authorized and you can add different users add different members to go ahead and change the information and so forth in this case I'm already logged in so as you can see this is protected otherwise you'll get a nice little login pop-up and it's also protected by course origin requests so tons of stuff okay tons and tons of stuff trust me when I say this is something that you're gonna wanna watch back a couple of times okay so we're going to dive into this right now and I'm going to show you how to do everything I just said okay so smash the Thumbs Up Button if you're excited about this one and a lot of you asking if it's recorded no this is absolutely live but the video is going up on YouTube straight after we are done here today so first things first let's Dive In we're gonna go ahead and actually got loads of new music now on the papa Farm playlist again that's in the description as well and I love this one this one everyone was asking for this song where the song was from but to get started off we're going to go to telmancss.com and we're going to head to the next shares guides and I like to use this Command right here okay so first things first we're going to go ahead and set up our project so open up a terminal time to get into some Flow State okay I'm gonna open up a terminal oops I've actually already done that nice and at this point we're gonna go ahead and do I like to go into my documents builds and I always do that because honestly I want to show you don't just randomly install stuff everywhere right I have a nice folder structure it will help you out a lot in the long term then you're going to paste that command in that you saw earlier MPX create next app if you haven't got MPX you need to install node very easy to do simply Google node there's tons of instructions and we're going to be using the template with Tailwind CSS okay so the template with Timon CSS now for the name I want to change this I'm going to say something like sanity version 3 blog next.js13 you can call it whatever you want there's no right or wrong here I'm just going to Chuck you into that okay so we're going to go ahead and hit enter now sometimes you might get prompted if you want to install dependencies in this case I didn't it just went ahead and did it but if it does ask you just simply hit the enter key okay now I'm going to dive into some of the characteristics of this build in this build we have got a bunch of different things going on we've got these nice hero icons to be to handle the icons we've also got these beautiful animations right now if you have if you never ever done anything like this and you've never you know experienced how to build a responsive website this is actually a great project for you to start on as you can see no matter what size the page is the entire app is moving around and changing as it's needed right so this is something I'd highly recommend you follow from a beginner absolute starting standpoint so that way all your websites can work on phones websites tablets whatever it is your website is responsive okay so once that's done we're going to go ahead and do CD sanity version 3 a Blog and I'm gonna do mine next.js13 there you go so that's what I called it you can call it something else call it whatever you want and I'm going to type in code dot now if you don't have the code dot command then all you need to Simply do is open up your vs code command shift p and type in install at this point if you'll see install code command and path mindsets code insiders because I'm using a beta version you will see code once you do that you'll get that code command if you can't do that simply press command o or simply hit open and go to the folder where you installed your files okay so this is our home directory now as I mentioned we are using nexjs13 but all of these templates tend to start off from next year's 12 and then what they've allowed us to do is have this incremental approach we don't have to just take it all on Hands-On we can go ahead and adopt next year's 13 as we like to all right thank you so much for the first donation veteri with that beautiful don't you go thank you so much for teaching me next yes and telling I recently won an internship I even won a blockchain hackathon oh my God sorry I took them yeah it's amazing dude your builds are fire that's awesome I'm gonna have a quick water break I don't know what that was Jay screenshot that that's actually incredible and Well Done For That winning the hackathon dude that's incredible already flying past the hundreds of likes that is what I'm talking about guys amazing amazing stuff okay let's dive into this so we've got the pages folder this is the traditional way that we would go ahead and build out our apps with an xjs okay so instead of this I want to go ahead and change this to an app folder now so previously if I put a search.tsx file that would correlate to forward slash search on my website this case I want to get rid of this I want to instead of doing all of this so we're going to run this app just to show you I'm going to do yarn Dev if you have npm you can do npm run Dev and so forth and then in this case I'm going to move my code over to another screen and I'm actually going to open up another browser over there so that way we can have a nice little setup okay I'm going to do localhost 3000 and as you can see now guys we've got the daily blog which local oh I need to cancel my old book let me cancel that one there we go and I'm gonna go ahead and cut this server and run it again let me do it again so yarn Dev there we are okay and here we are so now what we can do is and somebody said I'm relatively new to no shares would you recommend learning V12 before v13 um no it's completely awkward honestly they're all as I mentioned this incrementally adoptable so you don't whatever you're using an xjs 12 is not going to go to waste the theory Remains the Same but if you're coming in from a new standpoint it's probably just best just to kind of jump into the 13 route um or it is relative you can do both you can do both that's the truth okay so at this point I'm gonna refresh now what you should see is welcome to next.js this is your starting point great now at this point we want to remove that down to command J and I'm going to go ahead and literally delete this file because we're not going to use this anymore okay and now we can even delete the app.tsx file because we don't need that either okay all we need is the API afterwards which you're going to be using now on the level where we have the next config we're going to create a new photo called app this is the new app directory for Nexus 13. we're going to create a new file in there called page.tsx now once we've got that set up we're going to to make my screen a little bit bigger to help you guys out we're going to go back into next year's next config and here we're going to enable the experimental app directory flag this allows us to use the new app directory while it's in beta okay and don't worry at some point this will just get updated and you won't have to do this anymore but for now we have to do that I'm going to hit um command G now what I need to do is I need to go ahead and rfce oh I've got my Snippets oh that's annoying um so I've got this weird problem lately where I can't do my snippet so instead we're just going to create our functional components we're going to say export default and we're going to call this one function page and this is going to be resemblance of our home page okay so this is just going to be a page with some content on it okay now this one I'm going to say home page right there and then what I want to do is we change the next config so I need to cut my server with Ctrl C and do yarn Dev once more okay now this is amazing we've got loads of viewers tuning in from all around the world so we're going to click allow or the typescript and now what we'll see is when I go to this page pay attention look what he did it found that we didn't have a root layout and it created an App layout TSX for us now in xjs13 we have these beautiful new files and these are all reserved file key names page.tsx resembles the page itself the layout resembles the overall layout of itself now we actually have instead of the head here we have a new head.tsx component which allows us to customize anything that we want to put in the head so here we can say the blog and now as you can see if I refresh the page the header gets injected with the blog title okay so this is looking pretty good so far now as you can see this does not look like Tailwind TSS that's because we need to import into our new layout.tsx file so heading over to Styles and this is what we need to import global.css so at the top of my layout file what I'm now going to do is I'm going to say import and now I want to go ahead and say dot dot styles for slash globals CSS and at that point what we should see is our Tailwind CSS kick in together that's where we want to be so this is a good starting point right now okay now first things first is we want to go ahead and just say welcome to the blog welcome to the blog and what I like to do here is just sanity Check Yourself by saying text for Excel something along the lines like that and then refresh right and then what you're going to find is with the new server component sometimes the hot reloading doesn't work as expected so you just have to do a little refresh doesn't mean it's broken Okay so um hey guys I see everyone tuning in the chat I'm not ignoring you you're absolutely incredible thank you for tuning in okay so first thing that we're going to do now is set up Sanity on the back end so as you can see right here we've got a starting point for our app now this is going to be the home page and then we're going to have different directories different things around right now so eventually we're going to have a forward slash studio and so forth on our app on our website okay So eventually the goal is to get to this level where we look something like this where I can go to the website I can go to the studio and it's all going to be hosted on a vessel URL so first things first I need to actually set up the as I mentioned into go ahead oh Mr Frank what is up because this blog in the news app are so Fire Let's Go what's up Papa Farm special team member Frank OG Papa fam welcome back dude right so at this point now I want to create another terminal so I've still got my first one running with the server inside of it and I'm going to use our special command Okay so there is a special command in order to go ahead and get the benefits of all of the free stuff that Simon you give you so in this case if you have forgotten what that is just simply head over to Sana e.io forward slash sunny and the command will be right here so you're going to copy this command even if you're using yarn you still want to use this one as this is going to be for setting up sanity okay then we're gonna go back over here and we're simply going to paste it in okay now I want you to pay attention to all of my steps here what this will do is it will create a folder for us called sanity or whatever we decide to call it and inside of that it will have a studio which will have its own dependencies what I'm then going to do is remove it from its original enclosure so that is part of my app so this is the kind of shortcut that I found works really quick for me and it's something that I like to show you guys so I don't do it the Orthodox way I like to do it a little bit of a hacky tacky way but it's kind of a it's way easier this way I found okay so at this point we hit enter npm create sounding elas with the coupon code Sunny 2022 okay now as you can see here I've already got an account if you didn't have an account or if this didn't work you may have to install the sanity CLI so simply Google sanity CLI and it will go ahead and give you a little bit of help right there okay so at this point we've done that and if you aren't logged in it will ask you to log in as well I am already logged in so the project name in this example let's go ahead and give it a name and let's just call this one next js13 sanity blog hit enter now with that done it's going to prompt us another question the second question is what do you want to use for the default data set I'm just going to use the default so hit enter for yes which is the production data set now create our first data set on the site you can have different you know staging production and so forth different ones project output path we're just going to hit enter in this case and then we're gonna at this point we get asked if we want to use one of the templates available to us we are going to be using the blog schema template in order to set up our blog today so we're going to go down with the arrow keys hit enter and then for typescript we're going to hit y for yes we want to be using typescript because typescript allows us to reduce the overall number of bugs in our app now as you can see here it says how which dependency manager do you want to use we're using yarn today and then it's going to go ahead and install the dependencies as I mentioned there's going to be a few things that will change here okay so just let this install and then once this is done we can proceed with rearranging things so that way we have it embedded because right now this is doing in a way that is going to be a separate app I'm going to show you my little hacky trick as to how we can go ahead and take it from a separate app into our own and embed it really nicely on our own route for example forward slash Studio okay so let's go ahead and wait for that to get down [Music] and in the meantime we can go ahead and have a look at some of the things that we're going to be needing to do so first up we are going to need to install something called Next sanity so while this is happening we are going to be needing this dependency called Next sanity so we simply head over to the npm package next Saturday and this is going to be used for basically connecting everything that we need from our Sami backend to on xjs front end because we're going to copy that head back over here and once this is done we will go ahead and run this command as well so just let that finish this thing now as you can see they've got a bunch of different things which allow us to help and help us to get set up so what I'm going to be doing is fast forwarding a portion of this and I want to show you where I got the information from so that way you can do your own research if you have any questions or anything like that so check this out so if you go down here we've got a bunch of really nice instructions actually so if we go to the next anime preview it actually shows us how to do everything that we're going to be soon doing for how to set up the preview environment but in this case I'm going to show you just a very simple follow me through okay so now that that's done so that's finished really nice we're now going to go ahead and add next time e2r application as well okay so once this is down we can see now if we inspect our folders We should now see that we have a sanity let's go ahead and have a look we've got the next.js sanity blog folder as you can see this has its own node modules outside of ours so this is where you have to pay very careful attention Okay so that you can easily make a mistake at this point because there's a few little integral Parts I need you to understand firstly what I want you to do is go to your package Json on the outer level pop that so come on J hide that pop that on the left hand side of your editor go to the packet Json on the right hand side pop that on the right hand side of your editor these are the dependencies for my nextges project these are the dependencies for the sanity project all I'm going to do is I'm going to embed it into my own so I'm going to take the sanity Vision dependency copy that and I'm going to do a paste over here so I've got the sanity Vision dependency I also want the sanity dependency and I also want start components so I'm going to pop those over as well and then I'm going to take the the sanity es link config studio in the dev dependencies and I'm going to pop that here as well and that is everything that we need out of here all right so you can simply get rid of that save your main package.json file okay so now we're going to make this back to full screen and trust me that makes sense as to what we're going to be doing here now all I need you to do is type in yarn and or npmi to install the new dependencies that we dependencies that we added so this will install sanity start components all of that stuff that we could see previously okay now once that's done what we're going to be doing is essentially we don't need this photo so we have to actually get rid of that folder so I'm going to remove some of these things the first thing I'm going to change is grab the schemas and I'm going to take that out to the top level package Json level I'm going to move that outside of here okay and we're going to click update Imports yes that's fine and then we're going to take the sanity CLI the sanity config okay we're going to take those as well outside so we're going to take that to the package adjacent level then what we can see is we've got the static file which we don't need we've got node modules and all this other stuff now at this point I don't need anything so I'm going to go ahead and delete that overall upper photo so we have actually reduced a lot of the headache right now okay so we're deleting that right now and I don't know why it takes long when I'm on live but we're going to let that do its thing so that's going to get rid of this file we don't need that one so at this point now we've got a new higher level of looking at things Okay so we've got our schema types that shouldn't be erroring out that should be completely fine actually um let's go ahead and just double check a few things yep so at this point now schema types from oops I'm gonna go into my sanity config and what we need to do in here oh yeah that's right it's because we have to go to the same level as this you just want to update any failed dependency in their Imports okay so now what we've done is I've now so jam ninja asked a question as to what I just did that so what we did was is I took two separate projects and I essentially merged it so what I did was I took the sanity Studio which was a separate project and I've now brought it and embedded it into my own app this is the easiest way that I found to do it right so I mean there are loads of tutorials online but I personally have my own way of doing things this is the way I recommend it because it's super quick once you not to do it okay so at this point we've got the project ID the data set and all this good stuff we shouldn't really have it like this so what I'm now going to ask you to do is go ahead and do the following so I want you to now create an environment file so environment.local okay and we're simply going to have three values inside we're gonna have next public sanity project ID next public sanity data set next public sanity API version okay now in this case I'm going to use a few separate values here so the first one I'm going to use is 2022 11 15 for the salmon T API version for the data set I'm going to be using production and then I'm going to paste in my project ID now in this case you will have your project ID here okay so in this case you've already seen mine so I'm just going to pop it in as well so I'm going to go into here I'm going to paste it in now these are all next public values because we don't mind if these get exposed no one can do harm from just doing having access to this so we're going to hit save right now okay now at this point I'm going to close that file and I'm going to go into my sanity config and I want to change this a little bit more so that way we follow a bit of a nicer structure okay so first things first is I'm going to import my dependencies at the top my new environment variables the project ID and the data set the second thing I need to do is I need to add something called a base path now the base path is essentially where I'm going to render it on our website so in this case I'm going to have the base part like so okay then I'm going to go ahead and get rid of the project ID and data set actually what we can do here instead is you can just get rid of the value and this is going to go ahead and default to our environment variable value instead right and then we're going to move around a few things so for the name we're going to call this one the papa Farm content studio with underscores right and it takes the underscore and it replaces it with a space afterwards so that's going to be the um name and then for the title we're going to say the papa Farm content Studio because this is going to be where the studio Lies over our forward slash studio room okay now once that's done we've got our two plugins this is the vision tool which allows us to basically test out our work queries on the back end so in this case if I was to show you that the vision tool is simply in this case a division right here so this allows us to run group query so this one I just need to refresh it and I've got this oh I've closed it running that's why let me go back to my deployed version and we should be able to see an example of that in action so if I go here to forward Studio uh we should be able to see the vision tour there so that will just allow us to go ahead and run queries the desk tool allows us to basically update the information as we can see right here so this is the desk plugin the vision plugin was simply for the grok queries okay so in this case you can see I can run a grok query a grock is the query language we're going to be using to query the database over at sanity right so in this case this is looking great right so far and then we've got our schema types which we're rendering in from over here and these schema types essentially build up the structure and format for which our data will be inputted so everything you're seeing in this regard to the post itself all of the different fields all is fed through by the schema so we have a different schema for the category the block content the author and then the index file is where we combine it all together and then we simply import that into our configuration file inside econfig.ts okay so I hope that makes a lot of sense now we're not going to go too far into as to how we're going to go ahead and change any of the schema because we're not going to change the schema we're using the base template that they give us to go ahead and get things off the ground okay so with that down we are then going to set up our route right so in this case we now need to go ahead and actually have so even in this case for the summit ecli I'd prefer to be using our configuration files instead so now what I'm going to do here is I'm going to pour these in like so get rid of this and then over here as well just like that now they do in fact update the server but I like to restart my server when I've changed that many different things so we're going to go ahead and restart it okay then what I want you to do is make sure that when you refresh your page you're still seeing this and you're not getting any errors that's a good start okay so now what we're going to do is we're going to first embed the sanity Studio on the back end right so the way we do this is we can actually see a lot of the instructions over at next sanity so if we go ahead and head up to the table of contents we can see next sanity Studio Dev preview so if I click onto this it will show exactly how so this is what we just did now the config the CLI this is slightly different but it's fine and then this is how we need to go ahead and embed it right so inside of that page we're going to go ahead and create the following Roots now so as you can see this is where I get my examples from the eggs I'm not making this stuff from the thinner it's coming straight from documentation okay so we need to make this route right here so Studio forward slash index forward slash page now in the new nexjs 13 routing this will resemble a um a root okay so in this case if I create a new file I'm going to call it Studio forward slash Index this creates a folder called studio and a photo with a net called index I'm going to create a page dot TSX inside of it which will resemble my page inside of that okay so this is going to be the page in fact we don't need a functional component here instead now what we need is this example so we're going to make a client-side component next year is 13. so I'm going to copy that in and I'm going to copy everything like so I'm going to paste that in now as you can see this is pulling in from our Simon T configuration we've got our next Studio which is going to go ahead and render the studio at this route so this basically Works in a way where we're essentially going to a forward slash Studio the index of that route which is defined by this according to the studio backend and then we're going to have the page itself now that's not all we're almost there but we now need to to go ahead and create a head file remember I said there's some reserved file names just for like the home page head layout and so forth we're going to create a head.tsx as well okay and over here it's very simple all we have to do is take this pop this in like so and we can simply go ahead and customize that as we wish now I'm going to show you what I did in regards to mine and how you can go ahead and do the same thing okay so at this point if we pop that in you can see you want to Simply get rid of the default export that's perfect and then you've got the custom Studio head so this case I'm going to leave it pretty much blank the Favi icons everything itself but you can customize the head the title all that good stuff in fact if you wanted to go ahead and say the pubfam studio you can do that as well right um code review hey what's up dude good to see you in the house all right so we're going to go ahead and hit save and then after that we're going to add a loading indicator this just allows the overall experience to be bad the reason why we have to have a loading indicator here is because the loading portion is a client-side portion where we want to basically be loading on the client now a lot of the time with Nexus 13 all of our components well by default all of our components are server components so we have to go ahead and tell it explicitly where it needs to use the client rendering okay so in this case we're going to be using the loading.tsx and there again if you are confused at any of this next year's 13 talk make sure you check out the video probably be over here around the video after some point Jay hook it up um or Jay will pop it in the chat right now and it's a video explaining all about Nexus 13 and those specific files that I'm talking about right now so loading DSX we're going to go ahead and pop this in right now and use our code snippet like so feel free to pause the video and copy that out if you need to okay so with that set now we should be in a position where we can test out our studio back-end so now let's go to localhost forward slash studio and let's see what happens now I already know what's gonna happen but I want to show you how we're going to handle it so at this point we should be loading the studio up right now so we're going to go ahead and wait for it to load and let's see what happens so in this case you can see we've got our loader this is the loading.csx file and then you've got this to access your content you need to add the following URL as a cross-origin request uh calls origin to your Sami project so they made it really easy all we have to do is Click continue this will take us to the sanity i o manage page and at this point you can see I'm at my page and as you can see you should have the boosted free plan if you use the sunny coupon code okay so the first link in the description to go ahead and get that we're going to click on ADD core's origin all right and now you can see we basically have allowed it to go ahead and you know get this through so this is the awesome part this is where we have authentication now you probably were wondering well the studio looks great and all but what if somebody just went to forward slash studio and they want to update all their information on my blog and they say you know I suddenly like coding in C plus plus right which is not true but how do you protect against that so here we have the sanity authentication handling this for us so in this case you can see the proper Farm content studio is here we can go ahead and log in to an account that we have authorized beforehand so Sunny if we go to the sanity.io forward slash manage right and we go to our project so let's go ahead and see for ourselves here we've got the next shares sanity blog you can see members right here now as you can see you can add in Project members right and in this case we've got an unlimited number of members that we can actually add and at this point they they can then log in with the provider that you've set up so if we go ahead and click Google I'm going to log in to my account right now so it's popped up with my Google prompt I'm going to log into Papa react.team and now just like that we should get access if I've been granted it so this is perfect this is what we wanted to see and as you can see guys this is on our actual next.js app so this is localhost 3000 for studio four slash desk right so literally we are at the studio we are on our own xjs app this is amazing right this is really really powerful don't underestimate this so at this point we can go ahead and create our posts our authors our categories and so forth so if I was to create a post now you can go ahead and enter in all the information all that good stuff and it will come up here now what I'm going to do now is I've already pre-populated this information it spent a lot of time pre-populating it you can go ahead and pre-populate it yourself just by simply going out and popping in a title slug for example and then you can put in the author main image categories and so forth and then click publish okay but what I'm going to do is I'm going to replace the project ID with the ID that I've already basically pre-populated the data for so nothing will change in that regard it's simply going to go ahead and allow us to basically get a shortcut into um not having to pre-populate all the information again so what I'm going to do is I'm going to change it to a different project ID right now so I'm going to go ahead and replace this right now I'm changing my project ID I am restarting my application and now on my apple on my website you can see I have a pre-populated proper fam content Studio up and running okay so nothing else changed just the data because it's now connected to a different app so in this case you can see I've got all this information right here so we've got you know the sanity studio and again at this point you could have just paused and added in your own information your categories and so forth and it's super easy to go ahead and do it if there wasn't one available you simply click on ADD you can create a new one at that point it pops it open it's super easy you create a new category publish it add it there done right but something to be careful of is try not to leave these empty like this right if you have got this make sure you remove it so you've got a clean set and then you click publish done okay so that's great now we've got our dummy data set up we've got a sanity back-end embedded and then we're ready to go ahead and hook the front end up so now you can see we've got the front end and we've got a protected back end right all running on next year's server components now tell me right now in the comments isn't that damn power like come on that is damn powerful we're gonna customize it as well to make it look really really cool right so quick little water break before we carry on and we're doing very very good for timing as well okay so let's go ahead and customize this to make this look a little bit nicer so right now I want it to look something like this now that looks a lot better right well I've got my colors my theming rather than just this right this is a bit like meh I wanted to look like that look at the difference between that and that this has got branding behind it right the pubfan content Studios nicer now what I'm going to do I'm going to show you how to just go ahead and do that so first things first we need to go ahead and create a theme file right so the theme file very very simply I'm just gonna go and pop this on the side or close all my files head to package.json level I'm just going to create at the top level called theme dot TS right and this is going to need a few things from my Asana e dependencies so I'm going to need something from the build a legacy theme right now in this case what I've done is I've already got a few prompts and I did get this from an example online but I just customized it as I needed so these are just CSS variables my white it correlates to a white my black correlates to a slightly gray because you shouldn't really be using like pure black pure white in this case I'm using pure white but gray is a lot more easier on your eye contrasting and that's why you know SVS code isn't a black background right and then we've got the paper fan brown color or some stuff and then red yellow green okay great then what we're going to do is I'm going to go ahead and pop in my theming that I've gone ahead and set up beforehand so I just need you to go ahead and have a look at the code that I've popped down now so at this point you can pause it feel free to write this out again all the code that you see right here will be an is it's actually available on the papa GitHub repo in the description so you can feel free to check that out as well okay and now you can see look at this beautiful stuff right so this is gonna basically correlate to the stuff that you're gonna see over here we just have to Simply connect it right so at this point I'm going to go ahead and hit save and simply what is happening here is it's using the props from here to go ahead and pre-define those values and so you can change your color theming up here and it will basically handle it accordingly so at that point you go to USANA econfig and now we need to basically tell it to use that okay so I'm going to log Zoom back in again so I'm going to say theme is my theme and oops my name and this theme I'm going to import from the directory that we just created now as soon as I hit save let's see what happens to the colors ah now we've got a nice little color scheme right so now you can see the colors are on par with what we did right so you can feel free to customize those colors play around with it you know have a look and literally go as far as you want in that regard right so at that point this is that's already looking a bit better right we have the colors behind it now we want to customize these top elements so I'm going to show you how to customize two of the components um that we can customize there are so many ways you can customize you can literally change everything about this to make it completely bespoke but I'm just going to go ahead and add in two things that I think are cool one I'm gonna add in this custom logo component and then I'm going to add in this top nav Studio bar component and again remember if you haven't already check out the University of code for daily coding problems and challenges right given by Yours Truly right so check it out if you haven't already so we're going to build this out right so pop in back over to our code we're going to go and say Studio and then we're going to pass in an object and then here what we're going to say is if I press Ctrl spacebar you can see I've got components and then inside of components Ctrl spacebar allows us to see what we can replace right so this is some of the things we can replace so in this case I'm going to have a logo which is going to eventually belong to a logo component that we're going to create and then I'm going to have a nav bar right which is going to go to something which we're going to create as well called Studio navbar okay so let's create these two components right now hook it up to our studio and then we're nearly done for the studio right yes we have to still go ahead and configure the preview but we'll get to that later so command B now what I need you to do is go ahead and create a folder called components okay inside of components I'm going to ask you to create a new file and in that file we're going to call it the studio navbar.tsx right rfce bam right now we've got the studio nav bar and I always get the question you know something you don't need to import react anymore yes you don't it's just my Snippets tool that I use automatically does it so that's why we end up having it right so in this case we've got the studio nav bar we are going to need the link component from next.js link right so that's going to be needed very shortly and we are going to need some icons from hero icons So eventually here we have a few things like this backwards icon right so I'm going to need this uh the hero icons to be installed into our dependency anyway so let's go ahead and do that right now so we're going to head over to heroicons.com and here we get some beautiful Tailwind CSS icons that we can go ahead and install so this is how I search for things I can go to the documentation to then go ahead and show me how to install it so what we're going to do right now is go to here and I'm going to change just copy that because I'm using yarn and then I'm going to pop in command J go to my second terminal and I'm going to paste it in so yarn add Arrow icons react awesome right so now with that bit done we can start importing what we need so in this case I'm going to import a solid Arrow so as you can see here from the solid variant so you've got different variants outline solid I'm going to do the solid variant Arrow U10 left iPhone okay so that's it we've got everything we need the the dependencies are installed and so forth now what I need to do is firstly just to get it previewed up on the page head back over to my sanity config firstly save that file config let's go back over here and I'm just going to import my studio now button I'm just going to comment that one out for a second okay now as you can see my studio navbar is at the top right now you can see it got rid of everything which is not ideal right we still needed all of this stuff we still need the desk of the vision all of that so how do we keep that well the first things first is we want to render the default Behavior okay so inside of the studio nav bar we do get some props now we haven't got the prop typing definitions yet or as I'm aware of so in this case we are going to do the Forbidden cost to any right so in this case we're going to cost any and then what I want you to do is first things first is just pop in a props dot render default render default right props and then you're going to basically pass it that through now what this is basically doing for us is it's going to allow us and what you can do here to clean things up is you can go ahead and just destructure this to render default and then do that but we actually needed the propped object which is why I left it like this okay so now if we hit save you can see it renders the default and then we can still have whatever we want on the top okay so at this point I'm gonna have a div at the top and then first I'm going to have a link it says go to website so it's going to be a link which goes to the home page and then we're going to have a link and it's going to say go to the website right and now what we're building right now is this backward button over here right someone says can I make login and sign up using Sammy we just did it basically effectively yes right now for this um link we're going to go ahead and give it a bit of styling so here I'm going to say class name and we're going to say the text should be a a nice popper fan color so in this case I'm going to use a puppy foam color in fact what I'm going to do is I'm going to Simply pop in the coloring itself so in this point bam now I've got the text for the purple color flex and I'm going to item Center it hit the refresh button we should see it comes into a nice little orange color okay now next up I'm going to have the arrow you turn with a bit of styling so we are using Tailwind CSS styling right here to go ahead and configure what we're after so high of six width of six text is going to be the color of the papa Farm a margin right of two now as you can see that's a lot better that's not nicer and for the overall div we're going to say it's a flex items are centered on the axes justify space between them and give it a padding of five okay and do a little refresh and just like that now we should have a bit more spacing at the top and that looks a lot nicer to what we're after all right so in this case already looking beautiful and if I click this now it will take me back to the home page great right and it's using our nice little nexjs link component to go ahead and accomplish that now for the right side this is more for just to Showcase how you can go ahead and have you know something like like this on the screen but this is not that important for you to go and do so in that case what I'm going to do is I'm just going to pop in my snippet that I have here to Showcase how the main emphasis there is that if you haven't already checked out the University of code then what are you doing go check it out okay so we're gonna pop it inside of that div sorry and in this case what am I freaking out about I think I have actually gone too far there we are yeah I got one one div too many all right so I'm gonna pop in a div there there we are okay so in this case hit and refresh and all this is doing right now is it's hiding it on the phone but on a medium screen and above it's going to show that into that container and then inside of it we've just got a nice little link that takes you to the University of code so make sure you check it out if you haven't already and there you go right that's how you can do it so the main emphasis of that was to show you that you can customize this however you want you can have a custom header custom you know logo in this case that's what we're going to do next so now we've got our custom little header assigned we're going to go ahead and hit save and close this out I want to do the final step which is the custom logo okay so for the logo same steps command B we're going to go into our components create a logo.tsx file rfce nice and now here we're going to do the same principle right so we have our props at the top in this case we're going to pop in our props and just for these components we're just going to do a slight little basic props any yes I know it's forbidden until we get the type definitions from Sami I will do it that way once we've got the render default title and we might already have it to be fair but in this case I couldn't find them right so at that point now we're going to uh cross customize this so I've done something very simply here I've gone ahead and just put a image tag and yes you can completely make this a next an image tag and that would work like perfect in fact when I say in fact let's just do it right I know I'm gonna get killed for that otherwise I'm gonna do a width and a height of a 50 a height of 50. and then I'm going to say con object contain object cover let's do right then we've got the image and this is going to freak out and we're going to say if we've got the render D4 object then we're going to go ahead and run the default just like so and in fact I don't think we actually need that anymore right so we've got our overall Dev and the div we're just going to make a simple Flex box so it's going to be Flex items Center Space X of two there right now as you can see if we refresh and we go back to our I don't think I've actually imported it from my config have I no I don't think I did so if we go back to my sanity config here we are I need to import it from components for slash logo now it's worth mentioning as well anything in the components folder is actually a server component by default as well something I didn't know until very recently there you go all right so same rules apply for those right now we're going to go ahead and see we see this error this is what I was expecting now what we need to do is because we're using the next JS image tag we have to whitelist the domain and that we're pulling the image from so in this case we have to go to our next import our next config sorry go over here and we have to Simply type in images domains and we're simply going to add in a links.popreact.com and we're then going to go ahead and go to our server restart the server you're on dev to restart everything up again and now we should see on our servers that we have white listed that URL and we should be able to pull images from that domain so hitting refresh we should now have a custom logo which looks exactly like the one that we previously had on our website so we should see this right now okay let's go ahead and do that right now so okay let's just refresh and that's definitely not not looking right so there we are nice and the image pops in and beautiful that's it we have our own custom image look at that looks great we have the whole thing is by default is mobile responsive in this case he's here we're using all of their layouts so look at that it works on the phone so even if you're on your phone signing your studio on the embedded version you could literally go to your website go to four slash Studio authenticate yourself with your Google login and then bam you can update your blog from your phone wherever you are in the world Hit publish and you just it just works which is so nice right so so nice so that is the sanity Studio configuration done we will be adding in the preview tab shortly but in this case it's time to jump over to the front end and start building things out over on that side so low cost 3000 time to move over to this side of things first before we kick that off we're gonna have a quick water break open up the app.page.tsx and this is where we'll start so quick little water break before we fly forward even more Alexandria says amazing build I love it thank you so much guys and I have to I actually say that after this update with salmon you know even before I thought they were an amazing platform but after this update I truly I just think that damn awesome like they're so easy to use they're so powerful and it just it just works the way I would expect it to work and especially even as a developer the experience of just doing what we did right now was effortless right effortless it worked down to a T exactly what I wanted and you get this beautiful back end which handles everything right there was no complicated database setup we just handled it right overall amazing I I really can't floor them in that or in that regard but the team are doing some incredible stuff so that's um yeah that's pretty cool and now let's go ahead and head over to our next step so what I first want to do is you can see we've got our page here and we've got a studio here now what we can do in next year's 13 is we can actually compartmentalize these if for example we wanted a custom layout over here and if we wanted a custom there over there and the reason why this might be important is because I might not want my you know my header on my website for example this header notice how the header that you're about to see is not on my studio so this section over here is not on my studio but it could be if I was to add it here right now because it would automatically get added to my studio so how do we fix this problem in the new nexjs 13 layouts so I will show you how to do this now a lot of you saying I'm getting some errors yes you will get there is because it's pretty like tricky sort of you know stuff to take your time check out the code repo if you need to and just debug that's what debugging is for okay so in this case we've got the um we're going to go ahead and add something in called the group routing right I believe it's called the group Roots um so now what we're going to do is inside of the app I need you to pay very close attention we're going to create two photos Now by using parentheses this does not affect the root at all so we're gonna have a user folder and we're gonna have a admin photo okay so these oops not not there we're going to have get rid of that photo damn it get rid of that one um yes so now inside of the app photo I want to create a admin yeah so now we've got admin and user these do not correlate to forward slash admin or forward slash user they're simply because of the parentheses we basically omit that so this does not affect the route instead what we can do now is I can put for example the page in the user okay and now as you can see okay no oh don't do that yeah so we've got the page in the user yeah and then what we're going to do is we're going to put the studio in the admin and notice how and we're going to update the Imports yes and then you want to make sure you've actually updated all your Imports hit a refresh and make sure you're not getting any errors okay so now what we should see is if we've got this nice higher sort of you know level of uh of setting things up now let's just double check we've got an arrow here for the loading so let's go over to loading.tsx and see what the hell is going on so come resolve the loading.tsx in okay so now at this point when you do this you just have to basically kill your server and restart because you have moved so many files around that it can sometimes screw things up okay so hit a refresh and you're good right head over to forward slash Studio notice how none of my URLs changed because of this new group Roots right so this allows us to sort of separate our app into different areas but not affect where the sort of the the routing logic appears right so this doesn't affect the very much if you've got parentheses you see we're still at four star studio even though it's an admin because of those parentheses we protect the room okay so that's great now what I want to do is I want to have two separate layouts okay so the first one is there's two options in this case you can either have a parent layout and then you can have sub layouts or if I was to have a layout for example inside of my user what you'll find is this works okay but it's gonna firstly we have to change this to actually uh have it that it goes outside to reach my Styles which is because now it's inside of a photo that works but if I was to go into four slash studio now this will likely complain because we don't actually have our layout folder configured you see this we get this horrible mess right and this is because we actually need to create a studio allowed for that as well so I'm going to copy my layout go into my admin and I'm going to just create a um it's already created one for me yeah that's it and instead what we want to do is go and we just need to copy our import statements that way we've got are CSS over here now you're probably wondering something that's the same file what the hell have you done right well in this case first we don't need the head there that's fine but instead now this allows us to customize anything below these two roots in a different manner all right which is very important for the next step because the user I want to have all their Roots always have this header in so if I was to go into for example a blog like zero to full stack hero for example in this case I want to have the the header still here and that's part of the layout but if I was to have that in the overall thing then you'd be seeing this inside of my studio okay so that's why we have to eradicate that so now we've got the setup that we initially need we've got the admin we've got the studio for the root and then we've got the head layout we've got the user it's for the um and as you can see because we this is the first page.tsx at the highest level if you think about it these are kind of invisible folders so really that's the home room and then in here if I had a photo called search page.tsx inside of that then it would be for Etc so in this case great okay so so far we're doing really well for energy um we've got welcome to the blog and everything is looking amazing so far so uh now I can do is we're going to actually create our headers right so perfect stuff so we're going to open up our components folder and the first thing I want to do is create the header right so I like to always start with the headers because it makes a lot of sense right so just for the user layouts we're going to have a header and then we're going to have a banner right so for the header I'm going to Simply go into our components create a header dot TSX girl Gerard says hey Sonny always amazing me thank you dude I appreciate you tuning in so rfce we've got our header over here we can get rid of this to clean things up now inside of here all I need is I need two things I need the link and the image component itself so I'm just going to pop that in right now and then for the header itself I'm going to go ahead and change this to be a header like so and then we're going to have a div in fact we're going to have two divs right so we're gonna have two sort of parents there and these divs are going to correlate to this left section over here and I'm going to open up my screen brush right now and then a lot of you ask all the time what is that thing you're using to draw on the screen it is called a screen brushing first so I've got my left hand side div on my right hand side and then we're simply going to do a flex justify between to allow it to automatically configure what the space is between them okay so in that case we've got the pub farm and then the top div we're going to go ahead and say so first let's do that so let's just say for the header we can say Flex items between oops item centers right so the center on the y-axis justify between so they're sprayed out automatically from on the x-axis space between them if it ever gets to a small screen of two make them bold make all the text mode by default padding X of 10 and a padding y of five right uh Nami it says yo From Below in it Italian Italy what's up dude good to see you all right so this is we go ahead and hit refresh and now a lot of people are saying what how do I get these sizes I'm using the Tailwind in intellisense right so in this case firstly for the Snippets it's this one right here es7 redox Snippets and then for Tailwind it's this one right here so you're just gonna type and tell when you're telling CSS intellisense okay so hope that helps you guys out now with that said we've got the the sort of top section Downs we're going to put in the first div I'm going to have a link with an image tag and then I'm going to say the papa fam so I'm going to pop that in right now so a link that goes back to the home page an image tag with a width and height of 50 the class name rounded for to make it circular an image of the puppet farm and the anode tag which is required Now by default and then we've got a H1 taxi in the popper Farm outside of that for this div I'm going to make it a flex so it's gonna be Flex item Center and I'm going to space sum with an x value of two okay and then oh the numbers here are called uh yeah thank you for that decision and he goes just to Jasper is called import cost extension yes that's right so in this case now I want to go back to my layout okay so remember the layout right here and I'm going to pop in my header in replace of that component and if we go ahead and do that now you can see I've imported it and we can see that's still a server component by the way right so it's a server component and we've got a little nasty error there which we're going to fix in just a second okay so uh that is actually because I didn't put it in the body my bad right so it should be in the body like soaps body should be head off like this okay and then we're gonna put the banner in the body like so okay so don't make that mistake that's why you're getting that right so the children is what's in page.tsx and below the header is always going to show now for that section and notice how again I will emphasize this point as our studio route and anything below the admin folder doesn't have its own separate layout we don't actually abide by that so we don't have to have the header so we've got a custom one for that so you see no header in there right but for our one on the user Roots we've got it okay so firstly smash the like button if that's new because that was actually new to me when I was getting started with this and that's incredibly powerful and you can have as many urgent you want okay so destroy that like button we're actually doing really well today so uh it's awesome to see the retention from you guys all right so we've got the header in place now we're going to go ahead and pop in the banner okay so the banner is next so for the band oh sorry I'm not even finished with the header yet I'm jumping ahead so the second div let's go ahead and pop in a simple link which says sign up to the University of code so in this case it's going to be a link and this will just simply go to um the University of code so I actually have that link uh somewhere around here so I'm just going to quickly grab that and then it'll make it easier for me there we go okay in this case grab that link pop it in there and there you go sign up to the University of code and I've got a bit of styling here just to Simply go ahead and it's a bit of responsive styling so remember all the rules are by default mobile and then only when we hit a medium size or any breakpoint we should apply those sizes accordingly okay so at this point now if I was to Simply hit a refresh we've got this nice kind of top section right there so if we refresh you can see the error goes away that's perfect right looking really nice so far and that button takes us over to the University of codes on your blog post you can push to whatever you want in this case I'm pushing you to transform your new level of coding in this case so many people we've already got a thousand members inside of this University of code so if you're not here you are missing out on the best damn coding challenges every day I promise you that right so in this case bam we've got to sign up to University of code and then we're going to add in the banner next so the banner is actually going to be resemblant of this section right here so the banner is this section over here okay this is going to be a responsive element right J's also popped it in the chat if you're interested in the University of code so as you can see we've got the banner there so now what I'm going to do is go to my layout so let's go to uh user layout like so and I'm going to go ahead and create a banner component and as you can see I haven't got this created yet so we're going to go to our components banner.tsx go back over here rfce get rid of the react we don't need that anymore didn't make this full screen for a second pop this on the right hand side go to our layout for the user and we're just going to import this component that we have over here hit save close that and now we can go ahead and do that I just want to emphasize uh what we are actually doing in a visual sense right we've got Senegal in the house what is going on guys amazing to see you all right now for the banner same principle right no different we've got a two we've got a div inside of it and then a P tag so in this case we've got the div here and this is going to have a welcome to every developers uh favorite blog in the devosphere and then we've got this new product features on the right and remember it's a flex uh Row in the large screen but a flex column on a small screen so that way it's nice and responsive so in this case the first div will resemble that first section and then the P tag afterwards will resemble the product features in fact I'm just going to pop in The Styling for the P tag right off the box so in this case we've got our P tag with a bunch of styling text Gray Max width as well so that way it doesn't get too big and then for this div we're going to have H1 and an H2 tag and I'm going to Span in a bit of styling as well right so in this case you can see I've got an H1 which is 7xl I'm going to hit refresh over there so there you go you've got 7xl Sony's daily blog we've got an H2 saying welcome to every developer's favorite blog and then around every developers I've just spanned an underlined so as you can see here it spans the online so firstly something's looking horrible here so let's go over to our page dot TSX and we don't need this anymore we can get rid of this is an empty page as you can see it's not empty what's really happened here is it's abided by the layout and it's going ahead and pulling in the layout then you can render whatever you want on the page so technically it simplifies your code a hell of a lot once you get used to it right so I love it I really love nexgs 13 the way it works I highly recommend anyone starting a project it does it right out the box to learn how it works okay but the Banner's not finished yet right it's almost there it's not finished yet so for the overall surrounding div I want to ignore that one it's going to be this div that I need to style so this should be a flex div we're going to flex column and then on a large screen Flex row okay so that's the first thing I told you guys about okay and then I want to make it um on the large screen a space on the x-axis of five so that way they get spaced out a little bit more so in this case you can see um that's that's pretty good they've got a little bit of a gap between them justify between so that way they use up that space as we get a bigger apart that's good and then I also want to do something um I'm going to do a font bold I want to say padding on the x-axis of 10 depending on the y axis of five and a margin bottom of 10 as well okay and just like that you can see that that looks immediately a lot better right so great right so that's looking pretty nice and look at it just very small little tweaks make a website right so the font being bold a few things like that absolutely incredible right so it just really starts to come to life when you start adding these things in so we've got the banner looking pretty nice so far next up we have D um we're gonna create the blog list right so before we do the blog list we have to address something so for this page what we can do with the next.js and Sanity is on nextges we have something called preview mode when you enable preview mode it allows you know Frameworks like sanity or back-end platforms like sanity to actually leverage that header or that cookie that's been set on the preview mode um header in the next shares and it allows us to basically go ahead and give a preview of what is unpublished on your sanity backend so what we can do here is really really nice it we can actually set up two API endpoints one that allows us to enter preview mode one which allows us to exit preview mode once we enter preview mode sanity can then go ahead and Stream in the data that is even unpublished but you've got a draft State on your sanity content platform this is crucial because think about it in production so let's imagine you're writing a new article you don't want to just publish it and then keep updating it while everyone's able to read it you want to actually be able to preview it see how it looks see how it feels on the website does it read well get people to check it get people to author it all that kind of stuff and then when it's perfect you want to publish it so this is what preview mode is ideal for I'm going to show you how to implement it right now so first things first we need to create a sanity client right so in this case we're just going to pause here for a second because we need to do that right now so right now we are implementing the preview mode okay so I'm going to go ahead and reduce this now so I'm going to create a lib folder at the top level so package.json I'm going to create a lib folder and this is like a utils photo no different right first things first I'm going to create a sanity.client.ts file this consider this as the setup for everything that we're going to need so first thing I'm going to do is import the create client and go ahead and get my project ID my data set which in this case would be the production and the API version so that's great we've got those things next thing I'm going to do is export a variable called the client we're going to use the variables above to go ahead and pull these in okay now for the CDN you can once you go ahead and deploy this you can use a CDN if you would like to okay so you can go ahead and do something like if it's localhost then go ahead and do uh you can return around for a essay if it's on if there's a versatile URL then true otherwise if it's localhost and folks really up to you in this case just for the demo purposes I'm going to say false okay so great stuff we've got our client down then we're going to go ahead and create a sanity.preview.ts right and this is going to be a like configuration file that helps us out with getting up that preview mode up and running again all of this can be found on the website as well okay so don't freak out if it's not that it's actually all in the next sanity documentation so if we go all the way up to next sanity and we do next time any preview you'll see that we get all of the code here to go ahead and get things out for example that's what we just did a second ago this is not a preview.js right TS in this case so we're going to import we're going to firstly convert it to a client-side component then we're going to go ahead and Define a pull in our variables that we need and then I'm going to create a hope a function called on public access only right so this is going to be used if uh it's just going to throw an error it's saying if you're not logged in you should get that error okay so and then if we don't have the project ID or the data set we're going to throw another error saying check your jam signing you Json or in file and then if all of that is good we're going to export a little helpful hook called user preview and we do this by basically invoking a Define preview function and passing in the above all right so what this is doing is basically just setting things up so when I finally pull in this use preview hook what it should then do is it should allow me to go ahead and make queries to my endpoint so for example my sounding e database backend and basically get all of the information including the information that is in the draft say not published it because remember a CMS platform is a Content management system which means that you can have information which is published very and it's immediately updated and you can have information which is in a drafted State as well which is crucial for this kind of platform to work right so that's great and now what we're going to do is create the API endpoint so as I mentioned we need to be able to enable and disable this preview mode so unable to do this what we have to do is go to our Pages API and I'm going to delete the current hello.ts file in just a second but I usually like to use that as a reference so in this case we can just go ahead well in this way we don't need a rental here right so inside of API so Pages API we still have to use a Pages API for the API at the moment right inside of that I'm going to create a file called preview.ts and this will correlate to our website for API four slash preview.ts and what I want you to do is simply pop in the following okay so this is what we need to put in here and now what this does is this is going to allow us to basically handle the request that comes in we're going to go ahead and set the response we're going to set preview data to an empty object you can actually pass in a token here if you've got authentication that kind of stuff we're going to redirect the user back to the home page right and then we're going to go ahead and then we're going to go ahead and basically send back the response okay so that is basically the first thing and then the second thing is we need a way to exit the preview once we're done right and the main thing really to know is here guys is oops um get rid of that the one thing to notice is that we're setting preview data right so setting the preview that means that every time a request comes in it will see that hang on a minute you're in preview mode because we have preview data even though it's an empty object it's still preview mode there's still something there it's not no okay so now we're going to say exit preview so exit preview dot TS and you're going to be mind blown I promise you when this works right uh exit.ts now in this case we're going to have the similar function so we're going to go ahead and handle it we're going to say clear the preview data then redirect them so no different except this right now I want you to pay attention to something if we go back to the summit e documentation again I have not made this up it's all here there are pros and cons as to what you should be using and why you might want to use it and so forth and then it will show you how to go ahead and implement it so I'm going to show you how now we take that information we just went ahead and did and we go ahead and set things up so if we want to test this out if I go to forward slash API forward slash preview you can see it just redirecting me back to the homepage if I go to forward slash exit preview it redirect me to the home page that's great that means it worked right trust me it worked we oh we can test it in just a short amount of time right so now what we're going to do is open up our editor and we are going to go to our user um user page.tsx okay now this is where all the magic starts to happen right so first thing we now need to do is we need to go ahead and check if we're in preview mode okay so how do we do that well first things first we actually have this nice little helper function in next.js called preview preview data from next.js headers right so remember when I entered preview mode I set that data so what I can now do is I can say if there's preview data then I'm in preview mode I'm else well in fact we can just go ahead and do this because we're going to return anyway I'm gonna say I I'm not improving I'll just say the home page right so just say not in preview mode all right so I want to test this out now so we're not in preview mode right now let's go ahead and go to localhost forward slash API forward slash preview mode preview mode hey awesome stuff um someone says in the with the Supreme stream be available yes it will forward slash API exit preview mode bam they're out of preview mode so now we have a nice toggle that works based on our API response we can now pair this with the specific thing that we need to do to go ahead and allow us to basically stream in data from sanity's back end before it's published how the how do we do that I'll show you don't worry okay so at this point what we need to do is we need to create a query firstly so first things first we need to create a grok query okay so we need to install the grok or import the grok um module from the next sanity grock is again the query language we use to basically fetch so it's similar to SQL but it's basically the graphql alternative in signing is world right so then what we're going to do is we're going to say export const rock with backticks and this is how we go ahead and do it right so we've got a back tick right here and we're not actually going to export that we're just going to have it as a const right and then here what we want to do is we're going to create a query now in Rock right there's there's tons of documentation on how you can go ahead and query database uh stuff online but in this case I'm just going to show you how we do it in a very simple matter over here right so in this case we're going to have a grok and I would recommend you have the grok ins I think we have the grok uh uh yeah there we are starting eio developer tools enable these it allows you to have grok syntax highlighting okay so that's going to help you out a bit so we're going to have grow back to the back tick back tick not normal quote backticks right then we're going to say get me all of the posts whichever type post and then so this means all of type post and then we're just going to select similar to how we do it in graphql all the fields but as author and categories are references this will expand those references and get me the full information then we're going to go ahead and say order them by creating that so this is called piping we're basically piping the result of this and we're ordering it by created at descending right so all of this is all of this information is basically provided when we set things up using the schema that we had in the initial beginning so now we have our query that we can basically pour and if you want to check this out see if I'm not lying simply at this point go to your well let's go ahead and go to localhost4 slash studio and that will prove to you that this is exactly what it is right so if we go to our post or in fact let's go to the vision plugin and now what I'm going to do is I'm simply going to go ahead and pop in this right here I'm going to hit enter and as you can see I get all of my response right so this is really nice we actually have the response come back and as you can see now if I didn't have this right if I didn't have the expansion here so this means I expanded and even for categories as it's an array we have to expand all the array elements so instead if I got rid of that author I just want to show you what happens right now it will simply give me back a reference which means that it's basically like a join to another area of the table so in order to expand that to get the data out we add in the expansion and now you can see it gives me the entire information back so that's how we do it right so in this case that's uh that's great that's ideal that's what we want we can now use that okay so first things first after this um if we basically are in preview mode I'm going to handle it one way and if we're not in preview mode I'm going to hand it another way if we're not in preview mode so if remember if we're improving but we won't even get past this bit so we're going to say cons posts equals a weight right client and we're going to import our client from our lib file that we created earlier clone dot fetch query okay and remember we now because we have this right here we have to make our function asynchronous and we can do that because we're on our own server components with nexjs 13 right so if we're not in preview mode it's going to go ahead and fetch this stuff right so in this case I can actually show you this so I'm not in preview mode right now so if I was to go ahead and console log oops if I was to go ahead and console log all of the posts and I hit a refresh you will see I get a huge amount of you know all that information come through on the server the reason why it's not coming out over here is because remember it's server component it's rendered on the server so that means the console logs are also on the server you won't get any console logs over here nothing see empty right so at this point now we are going to handle the preview data right so what we need to do is create something called a preview suspense right preview suspense is going to be a component and this is very simple to do all we need to do is go over to our files head over to our components and we're going to create something called a preview suspense component.tsx and inside of here we're simply going to go ahead and pop in at the following now this is only a temporary solution from next sanity until they basically patch the modules that way it supports next shares 13 out of the box right until we until we get that sorted we would have to basically go ahead and manually have the use clients tell it as a server component wrapper right but then we can go ahead and use our suspense wrapper again if you're interested in anything about suspense or you're confused that next year's 13 video which will be linked up right now on the screen is the video you need to watch because I explain how suspense boundaries work in Nexus 13. so heading back over to our page right so in this case go to our user page right so here what we now need to do is import the preview suspense from the component library right so in this case we've got our previous suspense I'm now going to wrap our preview suspense like so okay and it's probably any problem wondering what the hell's going on here well in fact firstly we need to go ahead and wrap this like so just put div one um this requires a fullback that's why right so in this case this requires a fullback and all I'm going to do here is basically have a div with a P tag saying loading inside of it okay so let's go ahead and pop in on div which is saying loading preview data right now now okay now after that is down what I'm gonna do is I'm gonna have a and I've made a little mistake here because of let's just double check I got my code there everything looks fine fine uh okay yep there we go and then I've got my preview there we go all right so inside of here now I want to have a blog list right so what I now need to do is have a special version of my blog list so this one is going to render out the blog list itself So eventually what we'll have here is basically a component which is called blog list here what I need is something called a preview blog list so it's basically going to be very similar but it's going to be preview blog list okay now this preview blog list is going to be created now so we're going to go to our components create preview bloglist.tsx okay now inside of our preview blog list first thing we need to do is import a few things that we might need first things first convert it to a client-side component right because we need to know if the user is mounted this will be using that bloglist component I'll create in a second as well right second thing is we're going to accept a few props the first one is a query right and the reason being is because when we pulled this in you'll see we remember that if I go to my user page remember that as we pull it in we're going to basically be passing in the query like so all right so I'm gonna pass in the query like so I'm gonna then import this in to our app so first and then the final thing sorry is we're going to go ahead and do the following so here you can see I show you we've got a function called preview block list this takes in our props we destructure the props to get a query out of it which I'm going to be passing through here then this is firstly import that like so so we stop getting an error there we go and then as you can see now we're going to use our handy preview hook and in this case the first value is no but the second is the query that we pass in and this preview Hook is really awesome right the first one was a token in this case we don't need the token for authentication we're just going to pass in query this will give me the post but it won't just give me the normal post it will give me all the sanity posts which aren't actually published as well so give me all of the stuff which is let's say modified or not yet published from a get-go and it will actually stream that into my app right so in this case I've got loading posts and you can actually do I've just got this for debugging purposes we don't need that right now and then we're gonna pass through the blog post like so so this is essentially just a abstraction wrapper for the preview mode so we actually need to create the blog post itself to see what's going on now so first thing that we need to do is blog list.tsx and then we're going to say rfce get rid of the react at the top and this blog list will take in as I mentioned before taking posts right and we're going to have props and we're going to go ahead and give in those types or props right here so we're going to have a type definition of post which resembles all of the array of posts that are going to come through okay but first things first let's just test something out okay so firstly we have to go ahead and import our blog list where we need it so preview bloglist is imported already we go back to our home page and we can see that the blog list is not being used so we're just going to say log list uh let me just double check in fact here we don't even need any of this we're just gonna say render me out straight up a blog list and pass the query I'll pass the posts in like so okay like that and as you can see that's not complaining that's good so far if we go into blog list we just simply have to give it a post right so let's go ahead and take a quick second to create our type definitions I've already done the hard work here for you we're going to create a typings.d.ts file and this is for all of the custom time definitions that we're going to be writing throughout today's world now I'm going to show you basically an example of how we can just you can just follow my lead here I've done the hard work of going into sanity checking what they build out and there are actually libraries and plugins provided by Sunny which do something called in inference where they can basically look at the schema and build out the type definitions I haven't used that today but it's something which is definitely worth checking out okay so I don't want to disregard that all right so first things first everything every type is going to have a base it's going to have a Creator ID rev type and a revision basically and updated app right and they're going to be strings then we're going to have a post and the post is going to extend the base so it's going to have all of these plus it's going to have author body categories main image slug title and description and then I've done the hard work for you for the rest of the film so these are all based off the schemas that were predefined for us for example the one I'm about to put in is for the author and all of these fields are basically going to have a mapped to my own sort of style here so in this case Auto connections bass then this is what block is for like Rich Text for example so I'm just going to go ahead and pop in a few of them like so and you can feel free to pause the video or use the propagator Reaper to get access to these type definitions as well right now for the block we are simply going to go ahead and pop in things like that like so we've got span category and so forth right so in this case let's pop these in as well and then we've got the main image and the title right so I'm saving you a bunch of time just by popping these in so now we've got all of our type definitions that we're going to need I done that work manually right basically to go ahead and figure out what's what but you don't have to do it you can save yourself the hustle okay so you can pause the video you know write that down as you need to that's going to be your type definitions for this bit as you can see now we don't get the error because typings or D dot TS is automatically imported in an xjs13 okay so that's great now at this point let's go ahead and set up our blog list component so this has got a lot of moving parts to it and in fact what I want to show here is firstly I want to console log console log the posts dot length and I want to show something here okay so when we are in preview mode I want to see how much we're getting in terms of a response then I'm going to add in a drafted image and then we're going to see what we get back as well okay so if I go in here we should see like nine so in this case am I in preview mode so let's exit preview mode exit preview and as you can see I've still got nine right because nothing is in draft set so now what I'm going to do guys is I'm going to open up a separate localhost for Studio okay and what I'm going to do is I want to basically emphasize a certain point here okay so I've got my studio on the left I've got my app on the right and I've got my terminal in the middle so let's go ahead and add in for example another post and this post is going to be a test right so I'm going to say test it's going to generate test the author is going to be let's just put in as a j uh the image here I'm going to go ahead and pop in an image right now so I'm going to select an image upload it just like so I'm going to pop in something like my face okay categories let's go ahead and add an item let's simply pop in the um YouTube category publish that that's fine and just say hello world in the body okay now this is not published okay this is not published so what I'm now going to do is I'm going to go ahead and do a forward slash API preview and now once I'm in preview mode guys if I hit the refresh you can see look oh oh loading preview there you can see my preview Handler is working guys right but notice something remember when we have our preview mode remember what we did previously we actually had to make it a client component which means the reason why I'm not seeing logs right now is because now we should be seeing 10 over here there we go so that means that it's showing everything plus that one drafted item that I just had okay so that's actually perfect it works so that means that we now work if we do exit preview we will see nine coming back over oops API four slash exit preview now we should see our home page rendered with nine but as you can see the proof in the pudding was that if I go ahead and do API preview it goes ahead and simply has a loading preview data fullback as it loads the preview data so that's amazing now there is something I noticed if you've got the react Dev tools enabled you're gonna have to disable it until they fix that there's a little bug in there at the moment that I didn't have time to basically raise I told the team by but right now the react Dev tools are causing a bug with next year's 13 server components and this sanity mechanism where it's streaming in so you can't actually use the reactive tools with this so simply uninstall or disable the extension temporarily while you get this sorted okay but when you push the production won't be an issue okay so at this point quick little water break guys absolutely incredible stuff okay so let's go ahead and move on I'm going to go ahead and pop on some new music as well there we go let's get into a bit of a flow stay now because we've got a nice a big juicy bit of coating right now so uh and you can see I've not published that right so that's great but if I was to publish it now now what you'll see is when I hit refresh we should have 10. if I exit preview man API exit preview and look at that 10 because I published 10 this is just because I haven't it hasn't refreshed right so you've got to do a hard refresh sometimes look at that after I publish it went to 10. so perfect stuff it works so let's carry on strong guys let's get into a nice kind of enjoyable State this is where it gets fun we've got the blog list with the posts and now I need to get this into this beautiful website with ISR all this cool stuff first things first let's build out this right here what you see [Music] so first thing over here we're gonna have a horizontal line with a border and that is simply going to be like a strike through line now you're going to have to refresh your page after you add this in because sometimes the next year 13 server components the the way that we actually go ahead and get that hot reloading mechanism it doesn't always work the way that I expect to do so you're going to find that same thing happens to you right here we're going to have a div on the side of it we're gonna have all the posts okay so how do you do a hard refresh just Commander I'm just talking about normal refresh sorry right so inside of here now okay we are going to have a Dev right so this is going to resemble the div itself in fact we're gonna Post stop map for every single post right and I have got an entire video about the mapping function if you are watching the replay of this afterwards around the video there's going to be a pop-up on the screen that teaches you all about the es6 mapping function make sure you check it out all right so in this case we've got a um we're gonna have a div here a div and the post is going to be the key for that div because you should always have that it's going to be post dot ID so you know you can see I get all of my intellisense beautiful that comes back from Taiwan okay it's B says you're amazing Vibes that's what I'm talking about destroy that like button guys destroy it come on we've got literally over 300 likes on the way let's go and I'm telling you this videos and get to thousands I'm telling you all right so at this point we've got the dev then inside there we're going to have a div with an image tag all right so he's gonna have an image tag inside of it um and this is going to be a next JS image tag like so okay now this image tag I'm gonna go ahead and pass in the source now what we need before I can use this image tag is the URLs that sanity gives us back are special CDN URLs which means that cached on the Sami network but we need to have a URL that we can use and basically white list to go ahead and allow us to actually render it on nexjs image component so here's how we're going to do that I'm going to create a helper function called url4 and what this is going to do is it's going to allow us to basically convert the the URL that comes back into a representable URL that can be compared into our image component that allows everything to work so in order to do all of that we need a helper function so let's go into our lib create a file called url4.ts inside of that file we're gonna go ahead and create the following so I'm going to import the following dependencies client and image URL Builder from Sony image URL this is slightly more modern than the previous approach you might have seen Okay so we've got a builder object then after that we need to Simply create a function and Export that function okay and this image URL Builder will simply allow us to basically return the value and then what we can do is we can go ahead and have a URL that we can pass into our image component so I'm going to hit save now this helper function is what is going to allow us to have that magic which passed in from the summit emoj URL module okay so now I can import this into my application and then you see here this is the magic bit so here we can do Dot and in fact you can actually set that height width all this stuff on the CDM so when it makes that request over at sanity you can actually change it to get you the image at a certain resolution so the CDN is very powerful right so definitely check out what you can do with that image URL in this case we're just going to get the URL itself and then we're going to allow on xjs to do its thing so at this point we're getting we are going to get an error now the reason why we're going to get an error is because we haven't gone ahead and whitelisted the CDN signing i o from our image directory so we have to go ahead and what this did so next JS next configs let's go to our next config.ts and we're going to add it to the list of whitelisted images or domains right we then need to restart our server so Ctrl C to cut the server and then we're going to run it with the on dev and we're going to go ahead and hide it there we go nice right and then we hit a hard refresh so just command r and now what we should see is a huge image on the screen just flying in that's because we've got a fill right now which is not ideal uh and it's not doing it's not definitely not doing what we want okay so at this point we now need to go ahead and get this into the state that I like so we need to make the surrounding div relative so whenever you have a fill image you want to make the surrounding div relative and then I'm going to say the width should be for the height should be of 18. okay let's give it a drop shadow and in fact I'm just going to pop in the rest of the styling to save us a bit of time so I'm going to give you a drop shadow and when we hover over I wanted to animate the scale a little bit as well so this is what the transform does let's hit a refresh and as you can see now if I hover over these you can see nothing's happening because I've done group hover right group hover means that the surrounding div would need something called a group this just simply means that if I hover over any of the elements inside of this it will count as a hover so we have to first say group I'm going to make it a cursor pointer and then I'm going to say this will also be a flex Flex column right so now let's go ahead and see what this did so if I hit refresh you can see if I hover over it look at that oh I get this nice like little growth effect right and these are all the images coming from the back end that's the one I actually just recently added Curry stuff okay so now we've got this looking like horrible quite frankly we have to get a looking much nicer so next up alongside the image we are going to have a another div okay so alongside the image we're gonna have another div and this div will simply have the following inside we're going to have a div inside of that and I'm gonna have two P tags okay the first P tag is going to have the post title okay so this P tag I'm going to replace it with the post title it's going to be a font mode okay the second P tag is going to be the date basically the timestamp so what I'm actually going to do here is I'm going to go ahead and replace this P tag with the following so new date asked in the creator app and I'm going to say two Locale date string I'm going to make it a US time string and this is the formatting I'm giving for us this will give it a nice format something like this December 13th 2022 okay if you're watching in the future make sure you let me know in the comment right now by saying what what's up all right so they say absolute uh bottom zero I love it when I look back on my videos like oh yeah ages ago and then I looked back and I'm like wow I was talking to the audience back then we've grown so much it's crazy so I'm gonna go ahead and say absolute now what we have to do here is a nice little trick because I want to absolutely position this on top of the image and have this nice effect so how do we do that so against the absolute bottom width for and then I'm going to give it a bit of styling we'll say background opacity with a background color drop shadow and a few things in between right so let's go ahead and pop this where did I go so here and I'll explain what we're doing here so what I've actually done here but if I hit the refresh let's just wait until it comes in there we go so what I've done there is I've added in a background color of black I've given the background a blur so you can see how it slightly blurs into the background a background opacity of 20 so that way you can just barely see through it rounded the corners off slightly drop shadow large text should be white panning a five and flex depth right so justify between because eventually we're gonna have these on the other side okay so that's exactly what we've done here now outside of that div I'm going to have another div right so again if you do find any of this very tricky make sure you definitely go ahead and check out the papa GitHub repo all the code is currently available on there I've actually already uploaded it as if you do get stuck and you need to resort to it then go ahead and check out all right so at this point I'm gonna have a div and inside of that div I'm going to have the category title okay so that's going to have a category title inside of it and this I'm just going to style out accordingly I'm going to have a background color of our Papa Farm color and I'm gonna have the tech center and so forth so just a few bit of basic styling things in order to give us that overall look now in this case you can see the categories pop up but they're kind of ugly I want to fix that I want to say that they should be in a flex column Fashion on the mobile view but when we hit a medium screen or above a flex row right and then I'm going to give it a gap of two gap of two is a bit cleverer on the waxes only because it knows that if it's not if it's in the opposite orientation it won't just have this random space like SpaceX of two right so on the medium screens we're going to give it an X spacing and then items should be centrally aligned as well now if we hit the refresh we should see that that looks beautiful now it's got a bit of spacing between it and on a larger screen oops what am I doing okay on the larger screen you can see it it's on it's in the vertical mode that's perfect right so how the hell do I fix this nastiness right now so this should look like this why doesn't it look like that right um well we're almost almost there well first things first is underneath all of this right we're gonna go ahead and have so right now where I have the category outside of this div one two three so outside of this div we're gonna have a div with two P tags inside of it okay the first one is going to be the post title okay the second one is going to be the post description hit save now we should see if we refresh the page is we should see the test and the description underneath of it okay and then I'm going to go ahead and start this accordingly I'm going to say the margin top here should be five and this is gonna be a flex one because I need this to take up majority of the space that we have left over right now here for the class names I'm going to say this should be an unlined text should be large and it should be a font board all right let me know if you're enjoying this right now this should be a huge amount of focus because we are currently flying all right then we're going to say that the text should be gray with a value of 500. now there is a slight issue in some of these you see it goes onto three lines four lines five lines right that can be too big for a preview for a very basic preview we might not want that that's the problem right so in this case now you can see it's starting to do this but I want to have it cut off so what we're going to use is something called the line line clamp right so in this case if I type in Tailwind CSS line clamp you'll get an article that pops up called Tailwind TSS line clamp right simply head down it will show you how to install it so we're going to install this into our project right now come on Jay go to our second terminal simply pop in and say yarn and we're going to add that in then we're going to go ahead and add it to our list of required plugins so if I go into my Tailwind config on the side now you can see inside the plugins require it and now just like that we have access to the line Clan function the line clamp function is awesome basically I want to say here it's going to clamp the lines of truncate it essentially but you can do up to like five lines up to four lines we're gonna say after two lines that's enough right we should we should cut it so now if I was to go ahead and do this you can see nothing goes over two lines it always does a dot dot dot great that's perfect now the only final thing we need is the read post right so the read post so the read post is this little arrow right there so for this one I want to go ahead and where we've got our div outside of here I'm gonna have a P tag and this is simply going to say read post and what I'm actually going to do is I'm going to have the arrow right icon pop in at here with a bit of styling very basic styling we can import this from the top by doing the following we can import it from the hero icons Library go back down and a little bit of basic styling here to fix that so what I'm going to do is just a very simple bit of signing with a flex ruling font mode and when I hover over it underlines okay in this case now you can see that when I hover over the entire group it's a group hover it underlines that now this is super hard to see what the hell is going on so we have to go to the overall outside div or actually the one surrounding the posts and here is where I add in the magic I'm going to say grid grid columns one on a mobile view when we get to a medium Sky screen I'm going to say grid columns too because we want to get to a bit of a bigger screen then what I'm going to say the padding X should always be a value of 10. it's right now it's touching the side too forward right then it's going to say a gap of 10. so I want a gap of 10 between everything I want the gap of between the y-axis to be 16 so really I could have done Gap X and okay that's fine and I'm Gonna Leave a gap and why I think I'm padding bottom of 24s that way when you scroll down you've got a little bit of breathing room after the last article so let's go ahead and hit refresh and this will make a huge difference now look at that oh just a little bit of breathing room though right and when I go into a bigger screen look oh we get two and look at that oh nice right that's clean okay all right so everything's looking very clean so far but this still doesn't look right right why is my main website restricted to a Max with but this looks a bit too too wide if anything so how do I fix that whoa what we're gonna do is we're gonna go over to my original page layout which is surrounding all of our child components so we're gonna go into our app user layout and right here for the body I'm going to Simply add in a Max width of 7xl with a margin X of Auto this means it will never get bigger in any of the user side routes so if I refresh now bam that overall is a lot easier to read than what we previously had right overall beautiful looks great okay now what I'm going to do is I actually want to delete that tester of course kind of irritating me um so I will that's fine we can have out for now it's fine I'm just gonna low-key see if I can just modify that um it's fine we're gonna waste time on that so in this case great we've got all of the UI looking great now I just need this to be a clickable element now you're going to run into this issue a little bit with next year is 13 where if we have a client-side or server side component but I don't want to change the entire you know I don't want to change and yes you can refactor this into a post component 100 and I recommend you highly do that but at this point what if I want to have a a sort of a linking bit of logic right so in this case I just want a linking I want to wrap this in something like a link right well in this case it's a bit tricky than that because this is a server component and sometimes as much as that does work it is based off a dynamic prop so we have to sort of have a balance here of what is client what is not client so what I'm going to do is I'm going to show you how we can do there's a few ways you can do this I'm going to show you how to do a higher order component client-side component right so here I'm going to create a client side route dot TSX file and then I'm going to go ahead and say rfce this is a client-side route now if we go into our layout you can see that here we've got this children right so I'm going to copy that children I'll simply pass that as the props this just means that if any children are underneath it are simply going to get rendered out okay so instead of this I'm just going to say children get rendered out so that way they can basically this is a wrapper now and then we're going to say link right but I'm not only going to leave it at that where we've got children I'm also going to pass in something called the root jury and for the root I'm also going to give the time definition what I'm going to say the root is a string okay so in this case now we've got our props children and we've got a root string and then the href I'm going to pass in as a root okay now this is going to use the client so this is going to be a client-side component okay now this is where Nexus gets quite clever because it knows that by separating the logic and by passing the server component through as a prop it knows that what what it can render as a client and what it can't render as a client it will handle that on its own so what we can now do is this overall um wrapper for each end of the element I want is that when we click this it's actually going to become a clickable element that takes me to that page right so and it's going to be forward slash post four slash the slug right and the slug in this case will be for example if I was to click on sanity Studio V3 the slug that resembles this page to the blog post page is going to be the slug value here and that's also going to be the one that gets pre-built in static terms okay so now for the Post map div we're going to go into our blog list and here I'm going to go ahead and changes to client side root right and as you can see if I go down here so client side root should change as well going back up here we don't have the class name that goes in anymore right so in fact why I messed up there sorry I have completely screwed something up so leave that as a div leave that as a div and what we should be doing instead is wrapping the whole thing with a client-side room there we go yeah and then take the exiting component wrap it around the end like so okay now here we say href equals and I'm now going to pass in a back tick so I'm going to say not href sorry the root equals back ticks and then I'm going to say forward slash post forward slash and we're going to do string interpolation we're going to say post dot slug dot current that gives us the current slug Rule and then also because this is now the higher value that needs to have the key okay so just like that if you did it all right what we should see now is that if we simply do a refresh we should see now that these are clickable elements right we've divided the server-side logic with the client-side logic correctly so if I was to go into the meta clone now if I click this you can see one it worked took me to post four slash meta clone that's perfect that means it's actually exactly what we wanted right now which is ideal Okay so first things first as well is I want to give you a live demonstration of the preview mode so now we have finished with the UI for this side now what I want to do is I want to pull out this and I'm just going to show you that the preview mode actually works the way we anticipated that right so in this case if I was to go to forward slash API forward slash preview now what we should see is loading preview data there we go and this is now being streamed live so if we go down to our sanity Studio watch this if I type in four and I go ahead and simply oops um whatever I've done this uh go here sorry there we go yeah so four so if I was typing sounding Studio oh my God this is cool look at that guys it's literally streaming it in that's damn powerful right so you at this point you can probably change everything mess around with it configure it and all this stuff right so simplify the powerful customization I'm not sure why that one is actually um oh yeah okay so in this case I actually added my own custom field so here it says unknown filled this is not unknown but what I forgot to mention was I added in a description field so let's do that as well uh I completely forgot about that so let's go into post and what I want you to do is go into your code so yeah you if you ever get that error that's because I forgot to add in I forgot to show you that actually so schemas post and where we've got our title underneath it I'm going to Define another field called description enter a short snippet for the blog so I've added in my own custom field so that's just an example of how you can add in your own custom Fields into the roots right and now if I go into sanity Studio you should see that that is no longer erroring out instead it just gives it up at the top with a nice little description right and again preview mode working in all of its Glory if I was to say uh wow yep powerful you see how we can you can demo it and now you can be like okay that's perfect that's what I want I'm ready to publish it right and you can go ahead and test it out and things like that so before we jump into the actual page viewing aspect I want to show you how we can have a preview mode here for this home page now you can upgrade it so that way you can eventually have each individual page but I'm going to keep it relatively simple in this case so I just want to show you that how instead of having two windows up we can probably enhance this a little bit more so that way we can have a preview mode show up on the studio itself which is down powerful okay so how the hell do we do that so first thing I need to do is go to sanity config and here is where we're going to go ahead and create the thing that we need so let's go into our sanity config okay and then inside of the plugin so inside of the desk tool we're going to add in something called if we go here you can see default document node so I'm going to create a custom one I'm going to create a custom default document node so what I'm actually going to do is create a folder a file called structure structure.ts right and you can feel free to you know refactor this put in the appropriate files and so forth we're going to import something called sanity plugin iframe Pane and the sanity desk right and import that we need firstly we need to install this new plugin so Summit you plug in iframe this is a plugin from sanitium solves the instructions for how to install is R online as well so in this case you can see here we've got the install command how you can do it so I'm going to do yarn and add silence here come on J pop it in like so bam oh back over and here you can see they've got some instructions on how we can go ahead and do it so I'm going to show you how we can conditionally add this in if we're looking at a post so I don't want to show this preview for everything I just want to show it if it's a post okay so if you're wondering how I get the next part this is where I got the example from okay so I'm going to show you now how we do this and then you can pause the video look at it introspect it have a look at it and you know figure out what needs to happen so this is the function that we are going to write okay get default document node okay so in this case um we're not returning anything okay so I need to say if the schema type oops sorry if the schema type so if the schema type so firstly the three the two things we get here are a s whichever goes s which is stands for structure Builder and then the second argument here was actually the options right so we're going to say if the schema type is equal to post sorry post then we want to go ahead and add in this new custom view okay so in this case the way we do it is I'm going to pop in a block of code right now so what we do is we part return something called the structure and what we're doing is we're modifying it we're saying get the document and here's the views and we pass in an array of different views and what we're doing is the original form is essentially what we see previously it's the thing that we already see so the form is actually this so the form is already this stuff right then what I'm saying is because remember it's an array of views so the form is all of this the next view we're going to add is an iframe and they're passing in a bunch of options now what I've done here guys is I've passed in and said one if we've deployed this it should show the not by The Local Host but the actual deployed version otherwise you should show localhost 3000 and then automatically afterwards it should append API preview to any of these URLs that we have we're going to make the default size desktop and we're going to change the reload to be there is a button to reload but we don't there's actually another option here I can't remember where it was but it was like on interval as well but we don't want to have that and then you can pass it in attributes and so forth I'm going to give it the title or preview so we simply hit save now go back over to our sanity config and if I pass in the get default document node and hit save now now you can see oh we have a new preview pane because it's one of the arrays of things that we passed back so let's let's have a look what happens now so if I click on preview we should load up API preview loads up the preview data and now you can see I get my website which is amazing but you're probably wondering what's the point if you can't see both so here you can split the pane and then you can actually do the following so let me go ahead and why does that happen oh yeah let me split the pain click preview and now just like this I have a preview on my right I can go down to my sanity let's have a look and I've done it for the home page you can do it per post which is probably more useful but in this case now I can save like version five and you see how I can see it all in one screen which is absolutely phenomenal right so this is all the power of Sanity Studio of V3 embedded in our own website with amazing plugins like you see right here right so this is game changer I'm sorry but that's absolutely incredible right so as you can see super clean super nice installation and then we go we've got a nice kind of live preview on the side so that's the live preview down and that's just an example of one of the many many plugins that you can go ahead and add including the new Global search functionality so in this case you can actually go ahead and even search over here which is a brand new Sonic V3 option you can add a filter in and you can go ahead and filter based on anything and it basically forms these Global search filters out of your um your schema definition so you're not to do that it just doesn't mind you which is great if you've got tons of documents inside of your app okay so absolutely phenomenal stuff let's go ahead and carry on strong the next next step naturally is to build these pages so what happens when I click on let's say like the sanity Studio code well right now we get this what I ideally want is something like this to happen if I click it we get this beautiful page right which renders all of this Rich text right and I'm going to show you how we can render out this Rich text so if you see on the back end so if we were to look at our actual Studio itself you can see the Rich Text Editor comes through like this is simply Rich text with images everything we need to render that into this right on the screens it actually renders out onto as a blog post right and this is basically looking at what elements we have is it a H1 is it H2 and then we basically render it based on that so I'm going to show you how the hell we do that and then I'm going to show you how we can statically pre-generate these pages so that we can go ahead and have a extremely fast website so on my website you can see right now notice the header never changes if we simply click into this one bam it's already ready right if we click into here bam it's statically generated pages and these are all revalidating after 60 seconds I believe so if I go to the university of code every single 60 seconds this will basically go ahead and refresh the static page if users are still visiting it absolutely Game Changer stuff quick little water break before we build the dock the actual Blog Page itself and let me know if you're enjoying the video so far foreign likes that's amazing guys already at 300 likes this is crazy all right so at this point remember if you haven't already subscribed to the video and smash the Thumbs Up Button if you're enjoying and want more content just like this so at this point let's go back to our app and then we need to create this route so first thing I want you to notice is notice how we're at post for Slash and then we're at wildcard value so we need to create that route so how do we create wildcard values in our routing system so Dynamic routing well it's actually simpler than you might think what we're going to do is inside of our user folder we're going to create a folder for that route we're going to create a post photo okay inside of that so another photo is going to be made with square brackets and we're going to say slug slug is essentially that um in the back end where we had here you see slug so slug V3 for example is a slug and when no matter what blog you're in each one will have its own unique slug so in this case I've created a photo post Slug and then I'm going to go ahead and create a file inside of it called page.tsx we're going to do a standard functional component and in this page we're going to go ahead and simply make this a post page so this one is going to be simply called the post right this is a post page itself this takes props and this has prop types that are associated with it the prop types follow a very predictable shape so in this case because the um props actually contain the dynamic values so in this case if I was to go ahead and destructure this the props come through and we get the params and we actually get the slug directly out of those params so now what you can see here is I could say post slug right and just like that what we can actually see now is we shouldn't be getting a 404 instead now you can see the layout will be preserved we can see the sanity V3 okay amazing so post Sonic EV3 if I was to go back home and I went to for example the Spotify clone you can see post Spotify clone amazing so now we have the information on our side so that way we can make the appropriate graph uh grok Q um core to go ahead and fetch the information okay so remember as we are on a server component we can just do our fetches very simply now in in the first line of our functional component we could say const query equals grock okay so in this case I'm gonna say grock back ticks and then with firstly in order to use group we need to import it like so so I'm going to pop it in like so at the top and then inside of our query here I'm going to make a very simple query I'm gonna simply go ahead and pass in the following to it I'm going to say um I'm gonna pass in this right here okay so we're basically querying if the type is post and if the slug.current value is equal to this wild slug value right and then we're going to get the first result back because we that's all we care about is that if there's a result back that's the one that we need to see okay then we have this so we're basically pulling out all of the information we're expanding the author we're expanding the categories okay now how do I pass in this Dynamic slug value well when we make this call all we do is we say const post we're going to give it a type of post we're going to say a weight client dot Fetch and basically as you can see here client we need to import from our lib right so our Simon T file as you can see the second argument is actually going to be the params so any param that you have in this case slug is the param here and luckily enough we've also got the names plug here but if this was ID for example this would be slug ID so be slug ID right but in this case because we've got es6 the same values can be the same thing there so in this case this gives me about the post so now we have the entire post information so if I go ahead and say console log oops console log the post check this out guys so if I go ahead and do command J and I go into my terminal and I refresh let's go to I'm in preview mode again um let's go to oh let me exit preview mode quickly exit preview there we go we just get a nice load um I'm gonna go to uh the zero to full stack here which is our amazing Flagship if you haven't already check out search for stack here and join us over at the pop fun yeah cheeky plug and now you can see I pull in all the data right so the post gets loaded out this is all the information from the post so this is exactly the one that we're after the author is me the name is sunny and you can see the body of the text and everything and then you can even see like the title zero to full stack hero so that's everything that we're looking for right there okay now at this point we are going to uh render it out on the screen so I have all the information now it's just a case of populating it on the page okay so at this point let's go ahead and start building out this beautiful article page so we're going to get to this page right but you can see the layout already makes it a little a hell of a lot easier because now we just need to focus on this bottom bit we don't have to care about the rest so we're going to say article and in this case the article section so the first section is going to be a div okay and then here we're going to have a div inside of that div okay and this is going to have an image component and the image component is going to look like so we're gonna pop in the url4 as our helper function and this is complaining because we haven't imported the next JS image stack okay so there we go here a simple refresh and we need to go ahead and make this now um so basically the outside div this needs to be a relative right and what we're doing here is a very nice little trick so we have two images layered up right so in this case we've got the div and then behind it we've got a absolutely positioned div exactly behind it so this is going to be a relative container it's going to be a minimum height of 56. it's gonna be a flex box with flex column by default on a phone it's going to be a flex row okay it's going to be justifying the space between then we've got the dev here which is going to be an absolute div this is going to say top zero oops top zero and then we're going to say width should be four height should be four oops height should be four and then I'm going to say the opacity should be 10 blur the background slightly because you want to get a nice little effect and give it a padding a 10. all right let's hit refresh and see what's happened and now what you can see is very subtle right very very subtle right so that's uh almost almost where we want to get to okay but before we can sort of um Carry On we can say class name here shoot Panic X of 10. uh padding bottom of 28 section is going to have space between all the Y components have two of two border I'm going to give it the papa found border color and I'm going to say all the text here should be white because you can see all the text inside of there is white okay now the minimum height everything looks okay so far now what I want to do is outside of that so outside of this div I'm gonna have another section right and this section is going to have a div inside of it and inside of that div I'm going to have a div and a H1 and a P tag right oops no not inside that one they're gonna have a P tag here all right so again just don't worry don't just take your time it's completely fine if you get a little bit lost at this point um so the H1 here we're going to replace with a post title and the P tag is going to be replaced with a simple sort of a Locale string okay so let's go ahead and Pop That in right now this is going to be the poster that day so let's just go ahead and see what happens there and right now you can see I believe we've got a slight a little hiccup so the image here is not the right sizing but we can fix that in a second right so for the section here I'm going to say padding should be five background is going to be the color of the proper thumb so let's go ahead and Pop That in right now and which before let's hit refresh with this div we're going to go ahead and there you go that's why I wasn't showing okay and then so that's correct yeah yeah that's correct that's right okay so we've got zero stack hero and then here we're going to say Flex Flex column margin as we get on the bigger screen we're going to change to a flexible row justify between gap on the y axis of five all right for the div we're going to leave that unstyled the P tag we're gonna leave that uninstalled and then outside of that div I'm going to have another div and this div is going to have an image and it's going to have the author right information it's the image and the author information right so here we're going to have the image okay that's going to be the author's information and this right here is going to be Flex items Center space on the x-axis of two right and then after this image component we're gonna have a div and we're gonna have H3 and this H3 is just going to Simply have the post author dot name right and uh underneath that we're actually gonna have the author bio but the reason why I'm leaving this as a to-do is simply because I've got to do extension as well because you're wondering is because I need something called a portable text editor in in order to render that which we're going to come back to in a second okay and if I don't just remind me shout at me right so width of 64 at this point let's go ahead and hit refresh that's looking already a bit better right and now you can see on there it looks nice that looks good that looks pretty nice okay so we're going to say text should be large with a font Abode for the H3 so class name text should be large with a font mode that's looking already good okay and then underneath this so where we have our uh width outside of there we are two levels down so one two after this we're gonna have a div and this is gonna be the one with the description in so it's gonna be a H2 this is a post dot description and now inside of this we're going to have the description itself so this is going to be metallics panning on the top of 10 to just give it a bit of breathing room a div and this one is going to have the categories Justified towards the end okay so this one is very simple we just say post dot categories.map for every single category I want to go ahead and render a div with the category title right so in that case you could just give a P tag if you really wanted to be syntactically correct category so this one would be post oh no sorry category dot title and then this one you should give it a key which is going to be the category oops dot ID there we go and then we now style this so we're going to say class name and I've already done The Styling here again it's kind of what we did in the initial homepage but the inverse okay so it's gonna be like uh all of that good stuff but the div actually here surrounding it this one should be Flex items Center and immediately that should sort of stick it closer and then we say justify end to push it towards the end margin top of water to push it all the way to the bottom and the SpaceX of two and here refresh and just like that pal that's all I'm actually looking away nicer right and now if I go back over to let's say the sanity Studio V3 now you can see in the background we have this nice beautiful sanity Studio V3 background so I really like this effect because it just gives it a very modern blog feeling and it gives a very like kind of a cool effect right the only thing that we need to do is underneath the author there's a little bit of a bio but that's rich text and we will handle that afterwards once I get to that point okay so that is overall pretty damn good so the the only step that we actually need to do the rest of this is completely rendered from a portable text block if I'm probably wondering what is that is that really all we have left and trust me it is damn powerful what we're about to show you okay so what we now need to do is we're going to use something called a react portable text okay so I'm gonna poop in something like this so react portable text and this is a sunny IO plugin right so again you can go ahead and check it out this is how they recommend it themselves so what I recommend we do now is first things first we need to add and import it into our application right so let's go ahead and do this and if you're enjoying sanity right now let me know with a comment in the description saying I am going to try out Sunny EV3 first link in the description as well let me know if you're watching right now and I kind of wake everyone out right uh thank you so much Pat Pizza she says I highly recommend zero at full stacker the course is Rich and many real world use cases and War expansions from beginner to Advanced a level right Tess says no matter how long this build takes your dedication keeps me super pumped that's what I'm talking about dude that's what I love to see right so in this case we're gonna install react portable text into our application right next up we're gonna go ahead and pop in um the following so I need to go up into the top import portable text into my application okay and what I'm going to do now is I need to actually create something called a rich text components file I'll show you why we're going to do that okay so underneath this section over here so just below the uh the bottom what we want to do is I want to have it so that uh let's pull out my code yeah so under here right I basically want to take the information from the body so in this case everything else is rendering out except for the body so this stuff right here I want to take this and as you can see Rich Text editors have this ability to say what a H1 is H2 what a link is uh if you want an image we can go ahead and pop in an image and then what we have to do as developers is provide something which will go ahead what we um what we need to then do is go ahead and say when you get an H1 you should do this when you get an H2 you should do this and so forth so this is how we do that okay so we open up our code we go ahead and then I want to quickly point this one out as well someone just said uh what's Sunny's degree so yes I do have a degree and I have a master's degree but that is not the reason why I am a developer at this level I'm self-taught most of it honestly and that's why we have a course because I'm self-taught and that that I pause it for this one reason it's not fundamentally necessary anymore right self-taught devs people in my students students in my course kill it absolutely kill it without a degree right because they just you just need a mentor and you need the right uh content and resources that's it it's free on YouTube if you want to get a shortcut zero to full stack hero that's it doesn't matter about what degree you have and all that kind of stuff but yes I do have a master's degree first class just then I I had to throw in the thing was painful is how to get it right but um yeah it's not it's not what defined me today but yes if you want to know I do have that okay post dot body okay and now in this case we render out the portable text and then you see here we basically pass in the value so this is cool I guess but the problem is is that I need it like that right so what the way that this actually comes in to uh the into the the way that this actually gets returned is if I was to go ahead and show you a query right now so let's go ahead and show a query you can see that the block comes back uh Mr Frank five dollars donation thank you guys what the hell am I gonna say about Sony has a PHD in react that's what I'm telling you dude honestly it's all about practical experience but Frank Og man so here you can see um we have a block so where's my block text um so if we go into the body yeah here so you see here right we have uh like a zero one two three these are known this is one known as block text and inside you've got certain children and this can have like a span so a famous build blah blah and all we need to do is we need to create a function which can basically take that and interpret if it's a H1 show it this way if it's H2 show it this way I'm so forth right so I'm going to show you how the how to draw so I'm going to turn this into this right and again you can I'm going to show you how to do it to a certain level you can then take that run with it and build whatever the how you want to build okay um so I'm just telling you straight up right so in this case this takes something called components okay so components equals now I'm going to create something called Rich Text components so a file called Rich text component so I'm going to go into my components create Rich text components.tsx okay and now inside of a rich text component what I'm going to do is I'm going to import the following so import the following helper functions and my URL library is actually incorrect here I believe the one that I'm looking for is outside is it outside again um yeah there you go so oops so it's not that one it's underneath again yeah there we go right so I've been getting my library and then we're gonna basically go ahead and Export something in the following shape okay so bear with me and I'll pop it in right in fact what I might do here is this is actually completely available on the documentation um rather than me kind of re-explaining the same thing again so if you can see here we've got serializers right so instead of this now what we're doing is so this is react portable text I think I used a slightly different one I used uh horrible text react I believe so let's go back to my code page Mobile text react yeah slightly different one I used but you can honestly use you can use that one that I just showed you or you can use um portable text react right so components here you are and then you can see customized components this is basically where I've got the uh the boilerplate code for all right so I'm going to show you my example so I'm going to copy in the the bulk of it and then someone goes I like his accent but no it's fake I like his teaching but not his fake accent either I really don't know how to tell you if I was faking being British this entire time kudos to me that deserves a like but otherwise uh yeah you do Sana he is very generous with their free plan they are absolutely incredible I love that team they're incredible they're honestly really cool to work with um Jay is too funny all right so in this case I'm gonna carry out I'm getting off off topic so in this case we're gonna go back to reach text component and I'm going to go ahead and say export const Rich text components equals and uh oh Jay Jay is too harsh but if you if you break the rules Jay's gonna kick you out all right so uh in this point we've got types and then I'm gonna go ahead and um pop this in so I'm gonna run you through it so don't freak out okay so you can literally feel free to I'm gonna scroll through the code a bit and you can go ahead and feel free to pause it see what yourself about what's happening but I will explain every single point here so firstly we have types now types is basically if we get to go ahead and see something like an image what should we do right so in this case the value comes back when we have an image in this case our image value would include the sanity reference to an image right so in that case we could do this previous logic which was url4 and then transfer it to your url so every time we see our image what I'm going to do is I'm going to have this fill logic with a div and it's going to be a height of 96 a width of four okay so every single time I'm going to customize membership so every time I sees an image in that rich text body it will render out this way next up we have lists bullet lists or numbered lists if it's a bulleted list we're gonna have an unordered list and then we're going to go ahead and have a margin left padding y list disk which allows us to have the Little Dot and then we have space y and then for a numbered list we've got a list decimal okay with the ordered list syntax tag the next one is the block this one's a bit more important we've got the H1 h2h3h4 the children are rendered out as render props and then we have text 5xl text 4XL 3XL 2XL as we progress down from H1 to H4 each one is fun bold each one is padding yf10 padding wife 10 is quite important here because the line breaks aren't picked up their line breaks are not picked up there is a way to do it I couldn't live from you find out yesterday so I will find out but uh otherwise for now panning my F10 on the headings was also a great option okay and block quote is another one I really like because if you've got a quote inside of your Rich Text for example like I do in many cases like here for example it's really nice right so you can have a block quote as well then we've got the marks marks is more for like emphasis italics link so in this case whenever we have a link it counts as something called a mark and in this case we can go ahead and say with the render props of children and value if the value starts with forward slash then we're going to go ahead and apply append this over um we're going to go ahead and pass in the the this object right so in this case it's not it's absolutely fundamental I just added an extra last minute but in this case we've got the link tag itself which is an xjs link tag and then it will go ahead and allow us to basically convert the rich body link tag into a presentable link tag and what I've done here is added an underline with a decoration of the pop-up arm color and when you hover over it goes into a black color okay so now if I go ahead and save this all right what we're going to see is if I go back into my page no TSX and I go down to here and I basically import my rich text components this now acts as a serializer so it takes that massive amount of text that we saw in earlier so it was just like a plain text blob so it takes this and it will literally go ahead and change this now into it as we see fit so as you can see look at that it looks beautiful right so then you can see my links are clickable so I can click this and it'll take me straight to sanity IO right so look at that something also by the way if you're wondering and you want to read more feel free to check out some of his homepage they've literally got it at the top and that's where the link to the product Hunt is really honestly help them push to that to that 500 or top spot right because they really do deserve it after doing this amount of work but that this is really probably the best CMS that I've actually messed around with so it's honestly it's a game changer I'm going to be adding it to my own back ends for a lot of things okay so in this case and kudos to the sound 18 for that that's absolutely incredible right so at this point if I now go into for example let's change it up to go to the university of code as you can see now bam my block code gets rendered out my H1 gets rendered out my list got rendered out my H1 and let my images got rendered out and these are examples of the coding problems that you get daily at the University of code and then look at that just absolutely mad this is crazy like that look at that that works on the phone that just works perfectly like look at that it's a full blog guys and that's rendered out on like you've got and you've got the whole back end at forward slash Studio which once we deploy it's available online and it's protected with authentication which is managed and you can add as many members as you want through signing his back end like like what the hell this is so cool all right so now to make things even more better I'm gonna take it a step further because yes we like Fast websites but I want it to be blazing fast I want it to be so fast that you don't have to wait right so in that case now this is where next year's 13 comes in right so next year is 13 as we've got Pages which we can predict beforehand what I mean by that is I can simply run a query to go ahead and check all of the Slugs that exist inside of next.js and then I can go ahead and pre-populate those pages at build time and then what I can say to next next yes is I every 60 seconds or even 10 seconds or you know every five hours whatever you want to do I can go ahead and tell it that you need to go ahead and revalidate that static page which is super fast for users to go ahead and receive because there's no JavaScript it just goes bam and it just loads up I can go ahead and revalidate that every 60 seconds based on user's visit so I'm going to show you how to do that and it's so powerful that I absolutely love it right so in this case we are at the slug right so what we can do here is we need to do two steps if I was to go ahead and build this right now what we will do is it will actually go ahead and build out something called a static page so let's go ahead and just try this out I'll show you right now so if I do yarn build okay what I want to emphasize here guys is this is creating a production build of the app then what I'm going to do is I'm going to cut my actual application here okay now at this point what this is doing if I try to run my app is dead okay so this is creating a production build of the app the issue is that this will go ahead and do it but it will pre-build all of the pages uh like once and I'll show you that right now in fact I don't think it well I think it will actually it will serve a render all the pages so it'll be kind of slow right now right so in this case um let's just let that do its thing and then I'll show you how we can statically generate them and then how we can even do something even about Okay so let's check this out so generating static pages so you can see it generated three pages and it said that any of the post Pages asked something called server side rendered Pages now this is this is okay it's not as fast as it could be though so if I type in yawn star this starts up from my build my production build that I just built now it will start that version so notice the speed of this right I want to show you pretty quick pretty quick if I go into zero to full stack hero it's fast but it's still there's still a little delay I know I'm being picky but there's still a tiny delay now the reason why you're not noticing that delay is because it's pre-fetching right so then when we use the nexjs link tag it's prefetching these Pages which means this fills instant right but what we can't avoid is every time what we can't seem to like forget every time I do that it re-quiries sanity's database which can actually impact our quota quite bad so I want to do this at build time and create static pages and that way I don't kill my Sonic e query limits so let's go ahead and do that firstly well now we have this beautiful function called export async function generate static parameters it's a keyword this replaces the ISR all the old techniques that we used to know about okay now what I'm going to do is I'm going to have a query which is going to go ahead and query all the posts but it's only going to give me about the Slugs all right so all I care about is the Slugs okay now I'm going to go ahead and query the back end and I'm going to basically push that to both even though yes it doesn't have everything else it just has a slug it's fine for now I'm just gonna say it's a post okay and then what I need to do is I simply have to return a mapping of all of the possible slugs okay so what I'm going to do now is I'm going to map through and I'm going to say for every single item that comes back I'm going to map through and basically just get the currents which means that all the slug surface like for example this slug is a forward slash post forward University of code so I'm just going to get array of all of these the University of code Sonic EV3 Spotify clone all the different slugs that exist in my CMS then I'm going to go ahead and return the slug Roots dot map and basically here we say for every single slug I'm going to return an object so notice how I then parentheses with an object inside and then I basically say slug now this first key needs to represent this so if that's ID this has to be ID the second value is going to be the value here so in this case if it was ID slugged in it'll be slug but in this case they're both called sucks we can shorthand it now just by adding that in what we now have is the ability to create static pages so we're now in level up but I'm going to show you a problem with this as well so if I do yarn build this is super important I promise you this is probably one of the most valuable lessons with regards to Nexus 13 the whole stack rendering stuff this is your key moment to understand what's going on when I build now it now knows how to find which pages to build a pre-built as static Pages at build time now notice how it's Building 13 pages and look at this guys it pre-built post Spotify Chrome pre-booked test Pro pre-built Uber clone and seven more pass that means that it pre-booked 10 pages 10 pages if you remember from the beginning is how many I have inside of my posts as you can see there are 10 pages so now it knows how to pre-build those pages so if I go ahead and do and if you see here it's now changed the image to a white dot for the Post pages that means that it's a statically static generated page right so now if I do yarn start from my um from my apps this will start the production mode Let's go back to the homepage now now this is blazing fast absolutely blazing fast so if I go ahead 0 to full set of bam there was no delay there right if I go to next year's bam it's there super quick if I go to uh university called bam like that's fast that's absolutely quick because now it's just a static Pages no JavaScript so it doesn't even have to touch uh signing his back end anymore the problem now that we have is the issue of what if I update my sounding ecms backend data so let's imagine I update the University of code block so let's go to my studio right now I'm going to open up the studio and remember this is a I'm not doing yarn depth if I do yarn Dev it's going to server render every time so you have to build and then do yarn start to test this out right so this is an important lesson for everyone right but if I don't do this now what you're going to see because remember I'm in yarn start right now I'm this is a production build not a developer build so now I won't do hot like server side random drinks it won't refresh so if I go into the University of code now and again I explain all of this stuff inside the zero to full stacker in such depth that you understand to such a level so don't stress if you can't understand just join us as beautiful John Paul says don't delete this video I definitely will not okay so at this point now if I was to go ahead and say the University of code exclamation my exclamation my exclamation mark right so now I should have loads of exclamation marks after this if I publish it okay or let's say in fact do the University of code uoc okay and I want to go ahead and publish that change now okay so in this case if I was to go ahead and do it you see it's unpublished right now so I did publish it actually yeah I did publish it okay so it says the ulc right now so if I was to refresh and we go here it will say the ulc so if I did a yawn Dev build you would see the latest one but the problem is what about when it's in production right once it's released I don't want to have to keep deploying just to update my CMS backend so if I refresh now look I don't see UFC yeah what I now need to do is I have to do a redeployment so I have to do yarn build and then what this does is it builds the pages by checking out what the contents it needs to build and then it's going to get the ulc content this new one then I can do serve and I can do yarn start then it will show it right which is again it's a lot of work right and plus who wants to do that once we actually push it to deployment nobody wants to do that right so now I've built the page if I do yarn start you'll see that we get the problem we get the better page and all that if I do that you'll see bam right because it does it at build time but what if I told you that there was a way of adding one line of code and it basically just did all of this for us which means that means every 60 seconds every two seconds if I wanted every five hours one line of code can make it so that way every 30 seconds 20 seconds it will just rebuild that page in the background and then all the users will get served that cache page but it always be up to date within 20 seconds within the minute within two minutes which I think is forgivable okay what if I told you this way of doing that well there is there's a really nice way of doing that and it's absolutely Game Changer right and it's so easy to do all you have to do is add in this line of code and it's a reserved keyword export const revalidate right it's the easiest way they've changed all the confusing ISR stuff in xjs to now this simple effective strategy and you can do revalidate equals 60. in this case just to stress the test out I'm gonna do 30 right so I'm gonna say revalidate this page every 30 seconds right I'm just adding a comment there so you understand what's going on now if I do this build yeah you'll probably be a little confused but I'll show you why right but now what we'll do is this is game changer I'm telling you this is my favorite thing about xgs right is it it gets the best of caching and server-side rendering because what happens is after 20 seconds the server side renders a new page and then caches it and then everyone that comes in within that 20 30 second Gap gets to the cached version so it's so fast and you're not you're not killing your your quota with Sani but so even if you get a million users it's just serving the cached version and then after 20 seconds it server side renders another one so you're not you're not scaling a million sanity requests if you have a million users right so this is a game changer all right so now at this point you can see it's still got a white white label which is a static side generated you're probably wondering did they actually work did it well let's test it out for ourselves right so if open up this and I do a refresh now what I'm going to do now is I'm going to get rid of the ulc and I'm going to hit publish okay and I'm going to go ahead and hit refresh and as you can see it published but it hasn't yet refreshed so remember we said 30 seconds so after 30 seconds or so I should come back to this page which again is a production build and it should be completely changed so we shouldn't see you will see there anymore so now let's give this a try let's go ahead and walk around our app has it been 30 seconds yet I don't know has it been 30 seconds yet let's go to the university code and Bam it rebuilt it in the background and that worked right and I'm gonna say this actually works okay and I'm gonna hit publish and now I'm going to walk around my app so imagine like loads of users are coming around your app reading your articles okay cool you made a really important change that you wanted to go ahead and see in an action okay so in this case like you know I'll go to Sunny Studio okay this is great you know I'm going over here messing around on my app let's go ahead and check that out let's go ahead and check that again the University of code uh hasn't updated yet oh bam refreshed bam it worked this actually works right go over here hit a refresh of here University of code this actually works right and just like that guys it's as simple as that now now you can see we've got cached static Pages which get revalidated within the time period that we want right and if I go ahead and refresh now you can see that the final change is going to go into effect and just like that it works right so really honestly just so powerful right and you probably would want to do this as well for your home page so don't forget the home page as well so I would probably also recommend that you have this for the um the home page here as well so where you are for your home page because you're doing a white cool hair this is being statically generated so you don't really want to forget about this one so you probably want to add a revalidate period here as well okay and now your home page will also get that update um as you can see here it wasn't updated before but now if I have to refresh this page like the University of code bam works okay so this is absolute Game Changer of a level of tech we've got next.js server side rendering well we've got nextges server component we've got client components when they're needed we have statically generated data which gets revalidated whenever we say it needs to get revalidated which means we're not exhausting our sanity quota and then we've got this amazing Sunny back end which allows us to update all the information and on xgs just plays along with it right and we can have the best of both worlds we even have the entire Sunny E Studio embedded on the same next js13 website like what the hell is happening to Tech these days this is so powerful right so this is like an unheard of right so at this point we have our blog down so I guess the only thing that we kind of have to do now is deploy this thing right so what I'm going to do now is show you how to deploy this to the devisphere right um Mr Frank that's a good question please send that in slack he said is there a way to make a sitemap for stack regenerate signing page of SEO I will have to check on that I'll have to check on that right um but let's go ahead and cut this right now now I want to do is I want to go ahead and say yawn um I think there is though I remember someone asking me that before right so now we're going to go ahead and do the cell okay so at this point if you type in the cell and it says the cell command not found you probably need to go ahead and do an npm install G vessel to install this globally I've already done this so now if I type in the cell I'm going to deploy it from my command line now at this point if you're not logged in it will go ahead and prompt you to log in okay so now all you need to do is go ahead and hit Y for entering yeah so you're going to deploy from this URL I am already logged in and I have one account which is sunny Sangha so I'm going to go ahead and click OK link to existing project nope I'm going to hit enter for no what's your project name let's go ahead with that one as the default okay and which code is your project uh your code located yes that's fine uh setting up the project and it's uploading it now this will like this will fail okay I'm telling you right now this will fail because my environment variables have not been set but I will show you how we can do it this is my kind of a quick way of doing it okay so let's go ahead and click want to modify these settings let's click no enter and let's deploy it okay at this point if I click on inspect it gives me a link so this will take me to my other cell URL now what I can show you is we can go over to this bit right here go over to settings go to environment variables and there is a whole video I've launched about how you can set these environment variables beforehand in the vessel CLI check that video out Jay link it afterwards in the video and in the description as well in description in the chat right now um but basically how you can deploy from any CLI and then check this out so this is actually the simplest way of deployment so right now while that's happening you can go over to your code simply go into your environment file yeah copy it literally copy that copy that go back over and there's many ways you can actually do this you can have integration as well and I'm going to go here and paste and look at that you get this nice paste go ahead and click save okay now we've got our environment variables up and running wait until the one that we had running fails because it will fail this will literally fail because it'll say hang on you don't have a next time you project ID you don't have this you don't have that so let this do its thing we're almost there almost there well I'm gonna have to add something to a course white list as well um now once this is done we can actually check on the build status we can go ahead and say deployments GCS is building this will fail I'm telling you it will fail because uh we can cancel this button let's just cancel that and then we can go here and we can do Versa again so now I've uploaded the environment variables we can even run the cell environment pool so the cell EMV pull and it will go ahead and do that now you can see it goes ahead and inspects and this one should have the environment variables in place so now you can see it goes ahead and it will attempt to build just like we did previously right I'll do a yachty vessel build which will attempt to do basically what I did before with yarn build but with the environment variables located on their side so in this case this will go ahead and do that and then while that's happening I'm going to show you what we would actually need to do next so while it's happening um if we go to sammy.io dot manage for manage we're going to have to actually add in a cause um uh extra piece so this is the one that I've done um I didn't I accidentally didn't use the booster plan on my own thing so in this case here for example I'll show you so you should see boosted free this is when you use coupon code Sunny then you want to go to access right uh API sorry and then here this is where you want to add it so whatever URL that you end up deploying to you need to add it as a course origin but I'll show you a really easy way of doing this right so now if we were to go back to my deployment let's go down here oh project ID okay so this hasn't imported so in this case the project ID hasn't been pulled in so let's have a look why that hasn't been poured in um next turning your project let's go ahead and see yeah so probably because it hasn't actually set the environment variable as I wanted it to so in this case to debug it very easy you can just go ahead and do the following you can cancel this all give a cell environment pool okay and then this will pull in your environment files right so it's downloading your environment files and let's go ahead and see if we see dot m and now you can see all the environment files that are update up on online right so this is this is what we actually wanted I believe this happened because it wasn't finished building so now if I was to check it deployments so we have to wait until this one completely dies right because otherwise it won't do it I think it's doing it no yeah so this is one this is the correct one so I was on the wrong one okay so in this case look at that it created the pages built them out you don't have to do Versa I'm just trying to show you how it would work okay and then it says Ready nice okay so if I click on this URL I click on this now you'll see it'll give me a URL okay so firstly one it worked right and then let's go here let's go to zero to full stack hero click it and as you can see bam the page is loaded up and we can go on to another page let's go to like the sanity Studio bam we can see our Sunny Studio blog loaded up let's try the zero the University of code again you can join us at the University of code make sure you do all the links are in the description right so in this case that loads up perfectly right so everything works right but let's try out the studio so if I go to forward slash studio and in fact I've got a nice URL than this use this one so they give you a bunch of different URLs try and use the nicer one right so or your custom one that you map so in this case a studio for studio and let's give this a try and remember smash the thumbs up people smash the Thumbs Up Button if this works so in this case this will come up with an error wait for it this to access your content you need to add the following URL as a course origin to your Simon e project so in this case we are the you know the owner so I'm going to authenticate this and say okay let's do that it takes us over to Simon e we simply add the course origin it will then take us back and now we are approved I have logged in which means it allowed it to work and as you can see guys this is literally live on the same website I have my entire Papa Farm content Studio hosted on the website that is absolutely game changer that's so clean that's so nice we have an embedded content studio all this incredibly powerful functionality previewing Vision where we can do our own group queries all from the power of our phone anywhere in the world once we've deployed it that's Game Changer if I change any of the content I can rest assure knowing that my root pages will be revalidated my home page will be revalided the post page itself will be revalidated because the next.js is revalidate function it's incredibly incredibly powerful so time to go ahead and wrap this build up the way that we know how to the only way that we're going to go ahead and do this is the correct way right so I'm going to show you a quick run through of everything that we did today and as always guys smash this thumbs up because honestly this is like such a powerful build that we were able to accomplish today let's have a look at what we did today we had the incredible next js13 sanity blog all right we went ahead and built out a fully responsive website right so completely responsive using sanity's V3 which came with Remember full typescript support the embedded ability to have a studio inside of our own app right all of this crazy power remember we've got Global search we've got all the new workspace features there's so much stuff that they've added I couldn't contain it in one video right and then we combined that with the power of next year's 13. so you can go ahead and check out you know and then after it was working that was just so fast it's incredible everything works perfectly everything works the way that we want it to we even have the preview mode preview mode works a charm if I was to go to four slash API four slash preview we even get the preview Mode live right so all of this is working exactly the way that we wanted it we can then go ahead and view our preview data in real time from the back end so no matter what if I'm doing it from the live back end or if I'm doing it from the studio deployment backend it completely doesn't matter from The Local Host back end all from the uh the one that we see but either way if I was to change it even right now from here we will see this change in the real time let's give it a try right now live the University of code one two three bam this is live guys that's live on the internet right now streaming it across like that you can literally go to that URL and it'll work that's crazy that's actually crazy thank you papita thank you Olive Anderson thank you Mr Frank all of you and everyone else has been watching today absolutely incredible incredible build I hope you enjoy this one I hope you've enjoyed it and as I mentioned before guys if you want to know more about all of this stuff you want to go in depth to a whole nother level then you know where to go right we've built an entire course and Community around this it's called a zero to full stack hero this is where we take you from zero skill set all the way up to becoming a badass developer and absolutely crushing it right so it really I mean and we've learned how to do that in a way because we've we've taught so many students now to such successful levels right so not only have we got the zero to full stack hero Community the course with over the 750 members tons of content weekly coaching calls all that amazing stuff right Frank himself is on the handing page right all of this incredible stuff we also now have the University of code which is even more because I didn't think it was enough right every day we send you coding challenges every single day I will send you coding challenges in the form of a coding problem right so it'll be a coding problem there's like a little brain teaser and then you have to provide a solution and then every day the next day you're gonna go ahead and get the solution in your inbox every single day of the week every day every day that's it that's what our commitment to you is at the papa Farm we want to introduce as many developers into the world as possible and it is because of communities like the proper fam and amazing communities and companies like the sanity Studio the sanity team that the developer space is growing to your whole new heights which allow us to do incredible incredible apps and builds like the one that you saw today so without further Ado guys if you enjoyed this video smash that thumbs up button and as always guys this is your boy pumper react and I will see you in the next one make sure you hit the like button make sure you hit the Subscribe turn on your bell notifications I've got so much content coming that's it Papa fam is here to stay we're gonna hit bigger and newer Heights and thank you everyone for being a massive supporter in the year 2022. I'm going to see you throughout the this entire rest of the year and throughout the next year and Beyond we're not we're never quitting so I'll see you in the next one peace

Channel: Sonny Sangha

Views: 129,837

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: x3fCEPFgUSM

Length: 166min 3sec (9963 seconds)

Published: Wed Dec 14 2022