🔴 Let’s build a LIVE NEWS APP with Next.js 13 (TypeScript, StepZen, Tailwind, Dark Mode, GraphQL)

yo what's going on guys and welcome back to another Banger of a video I'm excited for this one hey look at the news that we got going on welcome to another live stream guys today we're gonna be absolutely doing something incredible we're going to be building a papa fam news app yes I said it a papa fam news app without further Ado let me know where you're watching from let's take a sneak peek of what we're building check this out the papa Farm news app this is something that I've been wanting to do for a while it does a ton of cool chicks tips and tricks behind the scenes and we've got next.js behind this and guys I've done something you've all asked for for a very long time look at this guys how oh I'm gonna show you how to do beautiful things just like that we're using next year's 13 so if I want to go ahead and search for something I can do it with Dynamic data so let's go ahead and check this out if I type in Ronaldo we can go ahead and search for Ronaldo we get some nice beautiful listings over here we can go ahead and check the science tab you can see we're actually going to go ahead and load up our science tab click on the papa Farm news take us home and guys as always this is fully responsive because that's how we do things here and you can go ahead and click into something so let's go ahead and click read more opens up a full screen right so this is not only just what appears to be a Simple app there are so many things under the hood here that you're gonna learn you're gonna learn about Dynamic data you're going to learn about static data rendering using the All and great next year's 13. I'm gonna break it down as if it was easy so I'm going to show you if you've been wanting to learn how to do this this is a video that you should be after so get excited we're going to be using step Zen to power all of this so we are going to be using an element of graphql but stepson's a lot better it makes the whole painful process of graphql easy it makes the whole thing very fast to set up let's go ahead and take a look at what step Zen is right so this allows us to build our graphql API very easily we can go ahead and optimize we can scale it's so ridiculously easy that I'm going to show you with so much fun today and usually when I go ahead and demonstrate things it's kind of like one of those things where sometimes it's a painful process for me to learn but step down was easy so I'm going to show you just how we can go ahead and use it so you can go ahead and write your first ever graphql API we're going to go ahead and interface it not with Apollo like we typically would we're going to be using next year's 13 server components and to top it all off to reduce the bugs typescript so lots of amazing stuff if you're enjoying what you're seeing and you're excited for today's video you know what to do smash that like button and get excited okay now before we jump into today's build I want to go ahead and show you what we're going to be pulling from so first up we're pulling from the media stack API so all of the news articles that you're seeing are in fact real and you can see they're actually very recent and this is all using ISR so essentially this is going ahead and efficiently caching the data and it's only revalidating for 20 seconds at a time so this is using some really high-tech stuff right here right and I'm going to go ahead and explain what the hell any of this means so you know what to do I'm going to show you how to deploy this project so you're going to have another amazing app on site on your portfolio once you're done okay now I want to go ahead and show you before you get started if you've been on the fence to join us over a zero to full Sakura or any of these videos get a bit tricky then head over to Papa react.com check out our Flagship course that's where we go ahead and show you break down the whole web development cycle we take you from zero to an absolute react hero right so you're going to be a full stack Hero by the end of this so go ahead check out propriet.com and we've done something incredible and it's blown up and I can't I can't keep it alive right so the University of code is now live so if you head over to property.com at the top you'll see the University of code so just forward slash universal code links in the description guys we send you out week daily sorry we send you out daily coding challenges right and it's so fun and it's been by far the most effective way to teach our students so all you need to do is head over to popular.com University of code and you'll get daily coding problems to your inbox every single day and on top of that we give you a bunch of ebooks as well right so ebooks music the playlist you're hearing right now and then what's so goes awesome about this is the next day we give you the solution to that problem so every day you've got a little bit of a coding challenge so you can go ahead and keep leveling up your skills so make sure you go ahead check it out there's an example at the bottom of the screen if you're curious about how the hell we deliver and all that kind of stuff so make sure I want to see all of you inside of the University of code shortly okay without further Ado I think we should go ahead and break down this build we should go ahead and explain exactly what is going to be inside of this boat so first up we have Dynamic data so I'm going to go ahead and just check if my Pen's working and it is awesome stuff Okay so we've got Dynamic data Dynamic data and oops I haven't saved it okay dynamic we've got Dynamic data in next year's 13. okay that's great Dynamic there let me do it here there we go Dynamic there we've got static data so static data is where it's built at build time a dynamic data is where every request we go ahead and generate that in information right but static data we can go ahead and do some really cool revalidation techniques in xjs13 and I'm going to teach you how to do today as well okay we are going to be learning typescript now make some noise in the chat if you're excited about learning typescript okay so typescript of course everything is part by react right you're going to JavaScript your react fundamentals are going to level up throughout this video and oh my God we just smashed past our first 100 likes that's what I'm talking about Kenya's in the house what is up Geoffrey I see some of the ogs in the house today welcome to the stream this is absolutely incredible we have so much more we have steps in them which is going to allow us to introduce our first ever graphql server right so that's going to be using step then and again all of this stack right here incredibly easy to use right and you guessed it I'm using Tailwind CSS because if you don't know me already I damn well love it right so I'm just gonna write tell in there right so at this point and if you want us to take a screenshot of this you can take a screenshot of this put up in your socials whatever you want to do but this is what you're going to be learning today right and there's a bunch more other stuff like the server components that are brand new in next year's 13. so get excited for this the music playlist has been updated in case you're wondering we've got so many awesome tunes now right so go ahead and enjoy the following stream and something I forgot to mention oh we have our first ever dark mode inside of a build right so I've got dark mode which I've been excited to bring you guys on the channel so this is the first video which I'm actually going to be implementing it right so a lot of fun stuff once we're done with all of this I'm gonna go ahead and deploy this to the cell and yes as I mentioned before all of the information that you see right here is going to go ahead and pull in live news there from media stack um the yeah the media stack API right which is a live news website so the media stack API is over here you can go ahead and feel free to check it out we get a free API key for 500 requests but I'm going to show you how to not run through those 3500 requests so that way you can go ahead and develop put it on your portfolio all that good stuff okay without further you let's dive into today's video smash that Thumbs Up Button we've got 200 people already watching this stream I love you guys let's dive into today's build let's do this guys okay so I'm gonna taper down the music a little bit let's open up our terminal so first things first we are going to be using nexjs13 right now I like to use the template for next year's 13 which allows us to go ahead and set up Tailwind in the process so I like to show you everything from the ground up right if you completely forgot what the command is or you don't want to come back to the video literally open up Google next.js Tailwind template right I think it's that one yeah next year's Tailwind CSS template right come over here it's literally I believe it's the second one the second one is the one that if you always forget this is the one you want to get no it's not that one it's actually a different one but I want to show you this one I think is TSS next year's Tailwind no it's not that one okay I'll find it I'll find it because I use it all the time I want to go ahead and show you the one that I use right here we are next yes install Tailwind Mercy next yes this is the one all right there we are so I'd like to show you because it's always worthwhile knowing these little tricks right and the realism of it right I don't want to be the fake coder who just memorizes everything but that's not how it actually works right so go ahead and copy this this is going to go ahead and set up our first next app we're going to use the template with Tailwind CSS and we're going to name it whatever we want to name it okay so I'm going to go ahead and do this right now let's go ahead and pop this open I'm going to make this super massive on the screen we've got Barcelona in the house and let me know what you're watching from Ghana we've got Kenya we've got UK Somalia Bangladesh what is up guys International today we've got U.S South Africa hey we got Haiti in the house this is cool this is cool Edan massage says you're referring to the new app directory right yes I am Morocco's in the house congrats on the World Cup guys absolutely crushing it and yeah this is this is gonna be fun Indonesia in the house Okay Belgium Nigeria whoa this is what I'm talking about Jordan I love it I love it Pakistan we got everyone turkey amazing stuff Ukraine Sweden it's Ethiopia oh this is a nut so Papa Farm is incredible guys the energy is so sick Tony says sunny what is up man all right so at this point we're gonna go into I like to have it inside of my document build folder okay and we're gonna go into a flow state right now okay so just you know enjoy the build if you find it's fast don't worry that's the whole reason is this video gets put up on YouTube afterwards you can take your time oh my god there are so many people in here right now Israel Czech Republic Germany Kosovo oh this is mad thank you guys India Mauritius Japan we're International I love it I'm speechless every time I'm speechless honestly so paste that in let's go ahead and name it and I'm gonna name this one let's just call it the news app and I'm going to say YouTube because we're on YouTube right now okay so pop that in and now it should maybe prompt you at some point sometimes it does it sometimes it doesn't yeah and so in this case it did so just hit enter to say yes and this will go ahead and initialize our app okay so this is going to go ahead and set up our template star and xjs app which is going to be an extra 13 and it's going to go ahead and in this case it's using yarn for me for you it might be doing npm there's not a problem if it's doing that okay so do not stress out do not worry and uh we have got already like three members that just joined into the University of code so while that's loading I want to quickly shout out again if you're interested the University of code guys I promise you we just launched them we have over a thousand people that are signed up to that newsletter nuts so do not miss out on that okay absolutely I'm smiling so hard because it's so fun I literally every day I'm waiting I answer my own coding problems it's is honestly so cool right so in this case I do them in ahead of time so that way I forget them and then I have to kind of re-recatch up on them so it's pretty cool all right so let's go ahead and CD into that new directory news app YouTube or some stuff boom okay now at this point we're going to go ahead and say code Dot this will go ahead and open up our vs code in the directory that we just created so this is our starting point this is a good place to be right now we can actually close our old terminal that's nice and what I like to do guys is always neat in your environment up right if you've got several screens use them at this point if not make sure you go ahead and just use multiple uh desktops like this in Mac if you're using a Mac right that's a little trick I like to do so here's your photo structure that you should get familiar with if it's too big too small let me know I will try my best to accommodate everyone why I don't like it too big or too it's more like this yeah okay so at this point we've got the pages folder open right so pages is the next js12 approach so typically what they did was when next year's 13 came out they gave you an incremental adoption strategies which means that you don't have to change all your code at once you can have next year's 12 code completely fine which answers the question that many of you have had are your old tutorials outdated no you can still do the next js12 ones and then use it as an exercise to then just go ahead and slowly transition them to next third to next year's 13. okay and if you want to dedicate a video on that then check it out Tony says here for the good vibe during inspiration Sunny thank you so much dude I love and appreciate all of you so at this point I'm just going to start off our next year's 12 approach and then I'm going to convert it to an xjs 13 app so what you want to do guys is you want to go ahead and simply type in yarn so command J to open up your terminal yarn run Dev and if you're using npm it'll say npm our package lock so that gives you the npm Run Dev it's fine and there's no right or wrong okay so at this point what I want you to do is go ahead and open up another window so I'm just going to open up another one right here and I'm going to pop it into a screen over here like so and now I'm going to go over to my localhost 3000 awesome stuff what the hell guys we have 250 people watching right now across all platforms thank you abstract thing first donation flew in that's some awesome stuff Rio de Janeiro in the house at 6am so I'm talking about I love you guys oh he's so cool right so this is a good sign so far right we've got our first page open up on the screen so what I want to do is I want to convert this to an extra 13 project so naturally everything in the pages folder is client components like we have known for a long time now we've got the ability to use these things called server components and by default server components exist inside of the app directory okay so what we need to do is go into the packaging level create a new folder and call it the app folder before we are able to use the server components in this photo we have to go down to our next config now inside of here we have to enable the experimental feature for app directory this is because it's still in the beta stages but it's completely fine to use it right don't worry about it if it changes which it most likely will right I'm not gonna like to you there'll probably be little changes then just check out the docs or check the comments everyone this is what coding is about it's about Progressive Movement tutorials will never be up to date because that's how it works things move right forward so that's why I have a community like zero to full stack hero link is in the description cheeky plug all right so in this case we've got this let's go ahead and oh command J to open up ask the server you can see we've got a change in next config restart the server so we have to cut it with Ctrl C and then we have to do it again this at this point you get this workspace contains the typescript version we can click allow that's completely fine okay and you see we get a bunch of things added in for us right so they've just updated our TS config files that's fine at this point open up your app and now we have a new page structure now if at any point you get confused with the next year stuff make sure you check out my next year's 13 introduction video we did a whole video on this explaining what next year 13 how it works and the intricate parts of it so make sure if you're watching the replay there'll be a pop out somewhere around here right now otherwise check the live chat Jay is going to drop a link right now for that video and just keep it in the back of your mind so you can go ahead and watch it afterwards otherwise enjoy the stream right now so at this point we're going to make a page.tsx file because this is the new naming convention for files typically we had the page so if I put search.tsx that would correspond to forward slash search on my website now we have a different approach which is more of a folder hierarchical structure so at this point page.tsx resembles my home page I'm going to use rfce and if you're wondering how the hell did he do that right it's because I'm using our beautiful extensions called es7 right so the es7 react Snippets so you want to make sure you've got these installed right now that's how I did that rfce trick right so react functional component trick so let's go back into our code right now I've already saved this up so we can pretty much ignore that now cool at this point if I click save you can see we get conflicting files because if you think about what's going on right now our website is fighting for the home directory this is the home directory and this is the home directory the only difference is next 12 next year is 13 right so in this case delete say buy to that it's gone okay now at this point let's go ahead and see what the outcome was and I'm going to just go ahead and make our life a bit simpler by popping it over here and I'm gonna just very simply go here and as you can see it created something called a layout.tsx for us and this is because we need a root layout file because this is the new way in which we structure our Pages the way we can go ahead and build them out okay guys honestly I just want to say I have still see your chat and you guys are absolutely incredible so I'm not ignoring those chats thank you to everyone there's so much positivity in the chat today I want to take a second just to say thank you I really appreciate every single one of you right so in this case page.tsx it's just the coding and the live stream is hard to get the balance and you guys are incredible right so keep on doing your thing now as you can see this does not look like Tailwind right so the reason why is because typically underscore app.tsx was our next year's way and as you can see what we would do is we would import all of the Styles into it like so so at this point what I want to do is I simply want to go into my layout.tsx because this is the new Nexus 13 starting place and I'm going to just pop it in like so do that hit refresh and now you can see I've got my new brand new fancy homepage right so that's really nice that's that's a lot more on par with what I was thinking what I wanted so at this point now we can go ahead and guys oh my God we got 300 viewers across all platforms this is amazing thank you guys for tuning in Smash the thumbs up button is all I ask right smash that Thumbs Up Button let's get this video to 500 000 likes let's do it Jamie Davis in the house I see you dude right so at this point we've got our Tailwind TSS connected great start okay so we can close out our app.tsx and for now what we can do is we can simply ignore the pages photo right we don't need it at this point so page and you can also see it the head now the head is pretty cool because here you can actually go ahead and inject any head element so in this case localhost 3000 is what it says here but now what we can say is Papa Farm Papa Farm news right and as you can see now on the top over here once I hit a nice little refresh Papa found news is changed so you can see now based on our folder structure we can go ahead and Define us pre preset um sort of conditions that we want to do so I want to inject something into the head I can use the head.tsx we've got loading we've got error with all these special reserved file names again check out that next.js video If if you're confused at any point right so at this point we've got all of our interesting stuff that we needed okay so what we want to do now is jump into the build so I have a nice little deployed version here so I'm just going to quickly pull that up on the screen and this is going to be our reference version right here okay so at this point this is going to be the reference version that we're going to affiliate ourselves with so you can see right here we've got a nice website right so we're going to break this up into different chunks the first and natural chunk to do or in fact the way I like to do this if you've seen any of my builds is I like to go ahead and just comment out the structure that we want to go ahead and move forward with right now what's really nice about this new approach is we can actually separate a lot of the presentational logic so if I go into my layout.tsx mode what we can actually go ahead and do here is actually separate the actual page itself versus the overall layout so this is really really nice and it's actually a really clean approach so I'm going to firstly go ahead and imagine we have the body of our app down here but inside of the body I actually want to go ahead and I'm going to have a div which all of the body will sit in and the children sorry is basically the rest of the app right so this is going to be the page.tsx which gets rendered here but inside the body I want to have a header and at this point I'm going to render out a component called header now it's worth knowing that any component inside of the app folder is in fact a server component a server component there's a very big important learning step here about server components components versus client components check out that video but I will be explaining in today's video as well so we're going to create a header component header.tsx inside of here rfce to create our header component now first thing I want to do is hit save go back into my layout and go ahead and import it like so now you can see we have a header but what's really beautiful is notice how our page logic is completely separate from our layout so you can see now we've actually got this abstraction which is really really neat right so I prefer this approach I think it's really nice I think it's a lot more cleaner of an approach moving forward in the next year's World okay so at this point what I want to do is go into my header and we're going to start pretty much building out our header right from the get-go okay so first thing I want to do is change this header to headers like so and that's very clean then what I want to do is go ahead and introduce a div and we are going to be using the hero icons Library so first thing I want to do is go to the hero icons Library so let's open up heroicons.com and this is a Tailwind icon Library really nice icon Library simply click on the documentation Tab and this will lead us over to the install instructions so we're going to go ahead and install here are icons of forward slash react okay so take that over to our code command J to pull up barcode and then what I want to do is split the terminal bring it over to the side and I want to go ahead and simply do yarn add or if it's npm npmi right to install this will go ahead and add in the uh the dependency into our project now what I'm going to do is I'm going to import the following so we don't need import reactor at the top that's very nice so I just need to go ahead and import the following like so and if you are wondering how I'm searching through those things then all you need to do is go ahead and check out this page right here so you can find all of your stuff here outline solid or mini variant and you simply change a solid outline or mini at the end and then you import like so okay so at this point I'm going to go ahead and pop in the bars icon at the top okay so I've got the bars icon at the top so let's go ahead and do this right now and you can see a big bars gets popped in okay then we have a link which will take us to the home page so at this point I've got the link right here which is going to take us over to the home page so as you can see right here I'm going to go ahead and just show you right now so we've got the link like so so we've got the papa Farm news we've got this left section middle section and the right section okay so this is going to be a grid so this overall um div is going to be a grid layout so I'm going to say grid and on by default from a mobile view upwards it's going to be grid Columns of three okay we're going to give it a padding of 10 and the items should be aligned in the center right so this is really clean so far okay and um one second guys and then we're gonna go uh forward and we're gonna introduce a link so in this case a link nice now this link is going to come from the next JS link right so in this case that's perfect okay and then we're inside of him now then in next year's 13 typically in xs12 we had to introduce an attack inside here we don't need to do that today right we actually don't need to do that now now it actually automatically puts in an ATAC Force so in this case I could go ahead and put in an H1 to make it you know symbolize something important and then we're going to say the papa Farm news okay perfect and then this needs a href so in this case we're going to Simply go to the home page if that's the case and I want to do something called prefetch false because if by default it will pre-fetch the page if it finds that link is present so in this case you can see we've got the left side the middle and the right side because we're having a grid column three and we only have two children which means we have the right side that we still need to fill out so let's go ahead and add that in right now that's going to be a div we're going to have a dark mode button that I'm going to go ahead and eventually code so dark mode button is to be completed and then we're going to go ahead and actually add in a button and that button is just going to have subscribe now because what I'm doing here is I'm setting you up to go ahead and extend this project in a way that you really want to so if you wanted to have a paywall do you know to go ahead and allow people to read certain articles you could go ahead and do that as well right so I'm just adding in a button there I'm going to style it a little bit for you guys and then you can feel free to go ahead and do it whatever you want with it after that so by default I'm gonna have this hidden on the mobile view and then it's only going to pop in on the inline upwards right so I'm going to pop up medium screens upwards the background is going to be a slate of 900 the text is going to be white padding X of four uh we're going to do on a large screen I'm going to introduce padding X of 8 and then on a smaller screen padding y of two but on the large screen padding or Y of four so you can see we've got these nice little break points sorry padding one F4 and these are basically everything I write by default is mobile first and then if it has the following breakpoint it means on a medium screen on a large screen so forth then you apply that so by default padding wife too otherwise if it goes into a large screen increase depending on why depending wire four okay we're gonna give it a rounded four approach that button's nice and rounded and then on dark mode we're going to say background should turn to a slate of 800 so yes Tailwind has this amazing dark modifier and if it sees that it knows exactly what you're trying to do okay hit the refresh button and we should see a lovely looking bun right so on a small screen you can see it disappears that's what we wanted okay really nice so at this point that's looking pretty damn juicy so now we're going to go into our class name type in Flex items should be centrally aligned with that dark mode button but I want to justify it towards the end so it's pushed all the way to the right and then when we eventually introduce that button for dark mode we're going to do SpaceX of two right between that and the final component now you're going to find that the hot reloading doesn't work that nicely at the moment so you're probably gonna have to go in and put the command R to refresh your page manually at times that's okay right it's fine all right so at this point now you can see that that's looking good we need to get this middle looking the way that we wanted it I needed looking like the papa Farm news right and you're looking clean so for the H1 tag I'm going to go ahead and say that it should be a font serif which gives it that old English type of look right the proper British look right so in this case you can see this now if we introduce this Ctrl R then your commander the pop-up Farm news right looks a lot more like a News website now so at this point we're gonna then introduce Flex one because we are going to make actually I'm going to come back to that in a second let's do text should be center right so text should be Central there we go and now it looks very nice look at that it's just clean all right so look at that oh mate oh my God Perfect all right now in the papa Farm I'm gonna go ahead and just introduce a span right so in this point I'm going to introduce a span cut out Papa Farm I'm gonna pop in inside of the spine so what I'm trying to do here is only add a class name to the Papa found bit of text and what I want to do is give it an underline I'm going to give the decoration so the thickness of that line a value of six and I want the underline to actually be a orange color of 400 right and now just like that we should see a nice go underline and as you can see there's a problem with our spacing here so you can go ahead and do the following trick to get rid of that so you can go and add a little space here you can add another space over here as well if you would like to right so you can do it a few different ways and in this case you can see the trim comes into effect so sometimes what I like to do is simply add in our own over here like that right so at this point now we've got a nice little that looks pretty good right that looks really nice so things are looking pretty good so far uh we just need to go ahead and style out um oh no okay so that's actually the head a bit pretty much done awesome stuff okay so this is looking really nice and guys um honestly we're about to push 200 likes already absolutely incredible the video literally just started so thank you smash that like button if you're enjoying this we have so much content in today's video that you're gonna learn from okay so the header is now pretty much almost done right we now need the navigation links and we need a search box right so again this comment approach is what I like to do navigation links are going to be here and the search box will allow us to type in something like this or World Cup right hit enter and eventually the goal would be that it simply comes up on the search field like so okay so if we clicked in search um I think it's on my local right now that's why oh there it was just a little DeLay So in this case search results for the World Cup right so a lot of stuff happening here um yeah I can't control the news right in this case so there's gonna be loads of articles I don't know what's coming up but in this case it's nice okay it's just looking pretty cool um so now we're going to go ahead and introduce the navlinx component so nav links component so let's build that right now creating the navalinks component so navlinx.tsx close that up rfce and first thing we want to do is simply import it like so so Ctrl spacebar at the end pull it up to the top really really nice um Sonny is looking so serious today thank you so much dude uh I think that's what he means uh yeah sometimes I like to get in the game face I mean I like to be a bit fun as well but on that note quick little War break because it's been half an hour we haven't even had a war breaker all right so good morning from Malawi what's up so Zeb says finally I got you live I learned a lot from you you're my role model thank you so much dude I appreciate you okay let's keep going strong guys New Zealand Mao in the house what is up so we've got the nav links here so I want to do the following here I want to go ahead and create a nav component so we're doing this for more SEO purposes and then I want to have a map function that goes ahead and actually runs through all the different links so these different categories these are categories are supported by those uh available at the media stack kpi so what I'm going to do is I'm going to create a constants file right and this is going to be effective for later on so head over to our top layer add a constant.ts file all right now at this point what I want to do is simply add a const with the individual categories inside and you can see I've got a custom type here which is a category array okay so at this point what I want to do is I need to create that custom type definition right so I need to create a typing dot d dot TS file and this allows me to add in my own custom type definition okay and inside of here I'm simply going to make a type which is going to be a string value of either one of these values okay so this point you can see it's going to be um type category is either business or entertainment or general or health or science or sports or technology so if it's a type category can only be one of these strings okay so in this case now you can see if I hover over it you can see it's a category type and because it's in the typings.d.ts file we don't need to import it so it's a very nice little trick that you can do okay right so this is pretty sick um let's go back to our code and I'm going to import that like so we don't actually need the the old school import react from react anymore that's deprecated we don't need that anymore right and I do in the house what's up all right so we've got the categories now we pulled it in now what I can do is I can say categories.map and for every single category I want to do the following I just need to go ahead and I want to put in something called another link right so I'm going to create a nav link component so not a singular not plural and this is going to take a few different things right it's going to take the is active and we're going to check on what that is in a second it's going to take the category that we're actually inside of ourselves so in this case we're going to pass in firstly the key so we should always pass in a key when we're mapping through something then we're going to pass in the category itself and after that we'll sort out the is active and that sort of stuff so which allows me to do that so if we're on the sports page it will do that and so forth okay so what I'm going to do now is I'm simply going to [Music] um go ahead and categories not my what's my error here what have I done okay that's good that's good nav link oh yeah so we just need to create our nav link component so in this case we've got nav links we don't have nav links angular so now I've link dot TSX now rfce great we've got a nav link and what I like to do here is pass in the props so in this case we're going to pass in our props come through here but with es6 we get destructuring so I'm going to split that apart get the category out and I have to write my prop definitions like so okay so we're gonna have to write in our own prop definitions so for the prop definitions I'm going to actually pass in two things I'm going to pass in the category and the is active which is a Boolean value it could be true or false right so is active we'll handle in a second but it's probably worth pulling it through right now okay so I have links and at this point guys we need to import it okay so we now got an issue because we're missing the is active prop okay so for now what I'm going to do I'm just going to say is active true yeah just to satisfy it for now just temporarily right then we're going to go ahead and into our nav links I'm going to render out a link so this is going to be a link component from next forward slash link and in here we're simply going to go forward and we're going to have a for the firstly for the href we're going to have a string interpolation so back ticks forward slash news forward slash the category so if you click on that link it's going to take you to forward slash news four slash category and inside of there the text is simply going to be the category that you're clicking on okay then we have the option to style it so at this point I'm going to go and say class name equals and I want to have it to be underlined it's going to be a deck actually sorry we're going to create a nav custom nav link style and I'm going to show you how to create custom Tailwind classes so in this case inside of styles globals we have our Tailwind base and here what I can do is I can inject my own custom Styles into any layer I'm going to inject one in fact into the components now okay and I'm going to create something called the nav link component okay and in order to write Tailwind in this class I simply have to write the directive apply okay so that's that pretty simply now I've got a bunch of different sizing and styles that'll go on here so what I'm going to do is I'm going to paste it and show you what I'm doing so when I hover over it I want to underline it I want the underline to be 400 orange text should be Center thickness of two for that underline when I um clicked on it when it's active I want it to be underlined the underline should be offset which means it should be dropping a bit lower so in this case you see how it drops a little bit lower right then we've got rounded four padding four and a bunch of little other styling things including my capitalizer when I hover I want the transition to happen only for a transform so when it scales up and down so in this case I'm scaling 110 of the 110 and the duration should be 200 and ease Out means that when I go into it it should be super fast but it should ease out right so that's that's how we get this effect so you see when I hover over that offset that's what we're doing here right cool so looking pretty nice and now I've got the nav link component and let's just check on that for a second so if I refresh you can see look at that I get that applied to all of them so really nice kind of approach that we're taking here okay so at that point we can move forward and we can now actually have where I have nav link I'm also going to say if it's active right so I'm going to do some custom styling here so what I need to do is I need to put this into a curly bracket use our Square uh back ticks have our string interpolation and say if it's active so if if is active then I'm going to inject the following it should have an underline decoration should be orange so basically what I'm doing here is I'm forcing the hovered State on it if you're actually active so if the page is actually active right and I'll show you exactly how I plan on doing that as well so underline offset let's do a value of four the font should be bowed and I want to do the text being large okay so at this point now they're all active remember because I forced it on them okay so at this point we can go back to our nav links and let's just make our is active State a bit more of a makes sense situation okay so now if we go back to nav links I'm going to go ahead and use something called the user path name function from um next navigation right now as you can see this is a hook now server components are not allowed to use Hooks and as I mentioned anything inside the app directory is now a server component so what I've done here is inside my header the overall header is a server component but only a small fraction of ink which is the navigation links should use the client so by writing use client this now trans basically converts it to a client component now I can use hooks on that and it means that it will load this when the window mounts on the page so now I can get access to like the path name on the mount okay and what I'm going to do is I'm going to create an is active function this is going to take a path right which is a string and it's going to go ahead and return if it's true or not and how am I going to do this well basically what I want to do is I'm going to say if the path name I'm going to split it by the forward slashes because imagine I could be in like the sort of I could be in um let me just explain this a bit nicer so let's just split I'll pop the last value and I'm going to say I'm going to compare it against the path right so what I've actually done here is imagine I'm on um my site.com forward slash news forward slash technology right so if I'm on here what I've done now is I've split everything so what it will do is it'll give me an array of three values right so essentially this will convert into three different values so I'd have one value two value three value so I've got three values in my array now okay then I pop which means I'm taking this last value out of the array so now what I've done is I've taken that into and I've just got the last value then I compare this to the path now what I'm going to do is on the categories as I'm gonna go ahead and I'm gonna go to is I'm gonna pass in is active and I'm going to pass the category as the is active prop so what we've actually essentially done here is now we're checking if I am at forward slash news forward slash business for example and the text matches with business it's going to go ahead and do exactly that right so it's going to go ahead and then have the following so now as you can see here use forward slash Sports and it goes ahead and has the active say so that's done that's how we get that effect okay really really nice little trick okay now with the nav we're going to go ahead and do the following I want this to be a grid and the grid should have by default four columns right so on mobile view I want it to have a four column approach so in this case like four columns and then as it gets bigger I want to change it to a seven column approach right so the Taiwan needs to be a bit smaller so text extra small and on the medium screen I'm going to say text becomes small you can feel free to customize this however you want by the way there's no right or wrong this is just how I've done it we're going to infer a Max width of 6xl so that way it doesn't get too crazy we're going to center it once it's got that Max width and I'm going to give it a border on the bottom of uh one right so now if we were to refresh the page you can see now I've got the Border bottom I've got the padding around it as I get smaller I will change to a grid of four bum really nice really nice right look at that perfect all right so that's looking super super clean guys um now we've got 300 people watching across channels we smashed past 200 likes let's get to 300 400 500 oh man I love you guys okay so at this point that's that's perfect right that's exactly what I wanted look we got the animations everything looking Sleek okay so let's go back a level now so we can close these two files out we can go back to our header we've done our nav links the next challenge search box let's get that done so at this point we're gonna go into our header and as you can see the benefits of making responsive design a component at a time means that when you combine them all together you have this beautiful application that just neatly entangles and it just works right it's just beautiful really really clean so at this point we're going to go ahead and do search box I like to think of this like the header is always the warm-up when we're coding if you notice that it's always like the header starts off it's the warm-up and then we get into the real kind of nitty-gritty graphql jumps in steps in comes in all this kind of cool stuff uh apis get dealt with you know but it always starts with a header have you noticed that right it's like a football match you're warming up so at this point we're going to create a search box component search box dot TSX rfce bam and now with this one I'm gonna simply go ahead and pop in so let's firstly import it like so so bam save we're gonna get an error because it doesn't return anything then we can see the search box should be there okay so the search box we're gonna have it like this and it's going to be responsive to the dark mode as well so I want to make it a little quite nice in that sense so this is going to be a form because I want it to be submit so you should be able to submit this form okay then over here for this we firstly don't need that we can clean up our function like so then I want to go ahead and have an input field right so this input field is going to be what we're going to be typing in the search value for then we're gonna have a button the button is going to have a type of submit because it's going to be a submission button and over here for that button we're going to Simply say search okay so this is the overall skeleton that we have going on then I'm going to go ahead and install sort of instill some Stars into this so first things first I don't mind says Papa Farm that's what I'm talking about guys all right so max width 6xl MX Auto then I'm going to say Flex so Flex justify the items between and the items should be Center and a padding of X of five so that way it's not touching the side as well now as you can see look what's happening right so justify between pushes them apart but this ain't using up the space right it's kind of a waste of space so at this point I can just say Flex one and just like that now if I refresh bam it used up the full space right don't worry that's because I just I don't know how to refresh and it wasn't ready right so it had a hydration mismatch so at this point we could say Flex one now I'm going to add a bunch of other styling we'll say which should be full by default height should be a value of 14. rounded should be small so the corners want to be round off small the placeholder on the um uh you know on any view should be 500 uh text should be a gray of 500 as I type in the outline I want to get rid of that annoying blue outline so we're going to say outline none and then we're going to give the background a transparent color okay the dark value we're going to change the text so when it goes to dark mode the text will change from Orange 400 okay and then I want to give it a nice little placeholder so let's go ahead up here give it a placeholder and this is just going to say Search keywords right I don't know why I turned well Posh for that Search keywords right so that's pretty nice now you can do this a few ways you can actually have this you know like be a client a seven component only but in this case I want to actually disable the input if you don't and I don't want to have like I know there's a lot of ways you can do this I actually did it as a server component first but we're going to convert this one to a client component because I actually want to go ahead and use um a nice little bit of State trick right here right so you don't have to remember it's fully customizable thank you one of one for the five uh check I think donation because as a beginner would you recommend starting with typescript over JavaScript when in fact later on everyone's pointing towards typescript no you need to learn JavaScript first typescript is a superset of JavaScript so if you don't know JavaScript and you're trying to learn typescript it doesn't make any sense you have to learn the bass then you have to add on typescript okay okay so in this case let's move forward we need a piece of state so I'm going to go ahead and create a piece of state to keep track of the input there's loads of ways you can do this um so don't think this is the only way where we're going to add the use State hook we're going to pass this in so we're going to import that from react and now I'm going to map this to the input so as the user types in the value is going to be mapped right but as they type in I need to actually update the on change request now a lot of you always ask me what is that this Auto completing your text is GitHub co-pilot it's just helping me out a little bit right so that's what I was going to type in it's just Auto completes it for me beforehand okay I'm still coding don't worry so as I change as I type in it fires off an event and then I update the text with that value right so now if I type in you can see nothing's broken that's what you should be checking for let's go ahead and save right now hit refresh and we type in that is what you want if it's not typing in you didn't connect it properly okay so now once that's done I'm gonna go to our button and first things first I'm going to disable the button disable the button if there's no input so if the user hasn't typed in you shouldn't be able to do anything okay then I'm going to go ahead and give this a styling based on I'm going to say the text should be an orange button of 400 and then I'm going to go ahead and say if it's disabled so you see how it's really nice about Tailwind is you can actually access all of these different things then I'm going to say it should be a gray value of 400 okay so now you can see if I refresh if it's gray the grayed out and then only when I hit that it becomes active right so you can see then it becomes a search active button right so you can feel free to customize it as much as you want afterwards that's completely your call okay pretty cool so now when I submit the form what the hell happens nothing at the moment so I need to say on submit and then I'm going to create a function called handle search Okay so let's create this function at the top we're going to say const handle search right now so const handle search you guys are incredible honestly everyone's like proper focused as hell today right so this will fire off an event which is always attached to a click Handler and also the reason why I had to use the used client is because we're tapping into a Handler right so any kind of Click Handler any interactive Handler such as on click on submit you have to convert your server component into a client component because it essentially needs to know when the the element is mounted to the window it can't do that on the server because there's no window to mount on right it can pre-render things but it can't do that so that's why you have to convert to a client component that's why we have used client at the top so we can use stuff like this otherwise if you try to do it without it would just call you out and it would say oh you can't do that you need to convert it so at this point nice little trick you hover over this at an event you can get the type definition that you need copy it get rid of that and now I have a perfect type definition bow and stops complaining we can import our form event from react and just like that it's ready first thing I want to do is prevent the default Behavior so it doesn't refresh if we don't do that it's going to go ahead and refresh okay which is going to break things out and we don't want that and then I'm going to have some defensive programming I'm going to say if there is no input right so this is uh kind of a pattern right so you can see yes we are preventing it here but you should kind of get into a habit of doing some defensive programming so if there is no input even if some developer came along accidentally got rid of this if your code will still protect at that level as well okay so it's just a defensive line it stops the execution if there's no input now if it is correct I want to redirect them to forward slash search and I want to pass the term as something called a query parameter right so in this case I need access to the router so I need the router and here we can use it use router object and we can import it from the next navigation don't make this mistake the has two used rules next navigation is next.js13 next router is next year is 12. it is important that you do not mess this up right otherwise you're going to get an unexpected Behavior okay so at this point we've got to use router and now I can go ahead and do what I'm trying to do so at this point I could say if so router.push and I can go to forward slash search forward slash the input okay and what I'm actually going to do here is I'm not going to do it just like this you could do it that way to be fair I just realized um or you could actually go ahead and do a query param so I'm going to use a query param for now which is also completely fine but yeah you could actually just go ahead and do a dynamic route as well that also works but in this case I want to do a query program I've done Dynamic route before in the last video I think it's nice to mix it up so in this case I'm gonna say equals term and then we're going to pass it in like this so that's a query param so nothing sensitive goes in the search field so we don't care it's fine right so in this case I can type in like Hello World hit enter and as you can see we get uh term equals hello world awesome that's really great okay so nice now um the benefit to having that um without sort of you know the actual Dynamic card would be you could probably do some ISR in it but I doubt unless you have loads of people searching for like Ronaldo World Cup or something that would make sense but okay I'm not gonna go too far into it yeah so at this point this is it's quite nice we've got the behavior looking exactly how we needed it and we've got this down to what exactly what we wanted okay so I think at this point let's head back over to our header and our header is officially complete okay so header looks pretty great so far so now the next natural thing is let's head back over to our page.tsx which is our home page so this is all this and as you can see what's so beautiful no matter what page I'm on now my layout is complete okay so really really nice little bit of behavior there now I do want to go back into my layout and I want to enforce one thing before we continue on and that is that the body right so the body right here I want to give the entire sort of app a styling I want to make the background white and to be honest with you technically we should be using something like a gray it's more sort of clean more it's more friendly on the eye right so believe it or not that is actually a lot more neutral to your eye than a clean white that's just a UI tip right so that is actually a lot cleaner than this because the contrast of that is actually hella different to what I had previously right so BG is probably too solid to notice but maybe like a gray of 200 so even that I don't really like that but okay I'm going to keep it 100 for now okay so we do BG gray 100 then I'm going to say on dark mode the background is actually going to go to a zinc color of 900 okay then we're going to say the transition should occur for all the elements and the duration will be 700 so I want it to be a nice slow transition right so on the actual app if you can see it has this nice slow 700 millisecond animation right that's how we do that okay cool then for the div surrounding the children so if you notice here everything here is within this maximum width constraint so what I can do here is I can go ahead and put inside my div a class name to say Max with 6xl memex Auto and as you can see now what's going to happen is all of the children's you see home page now it's not over here it's got this Max width constraint so you can see once we set up the layout it's so nice right we have no we haven't got this headache of kind of like meddling around with things our code is separated and it really makes sense way okay so quick little water break absolutely incredible retention almost at 300 likes already amazing and so far for peace we're doing we're doing very well actually okay so let's continue on guys so I love this music honestly it's so cool um so that's pretty damn great so what was I gonna do right so back to the page so over here now what I want to do is again I'm going to mark it out so I'm gonna eventually have a news list component oh I love this song right we're gonna actually have a news list component this will take a news prop right so it's gonna have a news prop on it and eventually we're just gonna pre-render the data in a server component like fashion here right so over at the top here remember this is a server component which means I can make it an asynchronous function and we can do some really cool stuff right so before you're wondering how the hell did he make that async well because we're using xjs13 that's the beautiful thing about it we can actually do that okay so before we do that I'm going to show you a nice little trick as to how we can go ahead and progress things further right so first things first we need to fetch the news data okay so we're gonna break it down piece by piece we don't need this at the top okay so I'm gonna go ahead and say const const news and before we do anything else I'm going to say uh wait sorry we're going to create a function called Fetch news okay and what this should do is it should take in certain categories in which our for what I want to basically fetch okay so in that case I'm going to go ahead and pass in all the categories and here what I'm going to do is I'm going to join them right so essentially I'm going to say categories so categories dot join with a comma right so if you think about what I just did there categories dot join would mean that I would have for example it'll be like a general so a general forward slash business for such does that I've just created a string for that value and then I've just passed it into the value without the spaces right so that's exactly what I've done then that will pass through here now we need to create the fetch news function okay and then I also want to create a type definition for this called news response okay so first things first let's create the news response and then we can go into things a bit further in a sec okay and I'll show you exactly how all of this will tie together in a minute so the news response that we're eventually going to have is going to be modeled around the response that we're going to get back from Step Zen so when we make a query stepson actually does a lot of heavy lifting for us which is why it's so incredibly powerful but in this case what I'm going to do is I've got the type categories let's just pump that down a little bit what we're going to do is we're going to have a news response class A type definition so news response is basically what I expect to get back from the media stack API so this API when I make a call to it I expect to get data back in the following approach pagination and data now these are two different custom types that we're going to go ahead and talk about the first thing that's going to come back is a pagination type object right so in this case pagination will come back in one as one of the object entries okay the second one is going to be data entry now you can call data entry whatever you want you could really call it article if you wanted to I'm going to call it data entry in this case because I can't remember why but somehow that came up but you can honestly change that you can change that to article throughout your app whatever you want but this is essentially going to be the alcohol right so in this case actually you know what let's just make it a lot easier let's just make this article okay so that's a lot easier article okay um yeah okay let's just go with that all right so in this case that's the ALCO um and then so that makes sense the news response is going to have pagination data and the data itself which is going to be of type article okay so at this point now I can go ahead and and you see we get rid of that error we just need to create the fetch news function so I'm going to go into my photo structure go to package Json level go here create a new folder called lib okay this is going to be lib or it could be utils whatever you want right lib is usually something that we use I'm going to create a new folder inside of it called Fetch news I file sorry it's gonna be a typescript file now inside of fetch news this is where we start doing some of the magic okay so this is going to be an asynchronous function all right so this is going to be um I believe we have steps oh yeah all right so we've got um const fetch news equals stepson is in the chat right where are they I'm just trying to look for them I've got so many things in my um oh yeah there we are hey what's up steps then I see you now yes so we are jumping on the steps then in literally just a second right so we're gonna have an asynchronous function here and we're eventually going to go ahead and pass in the graphql so I'm gonna map this out for us sorry so graphql query we're going to map out graphql query then we're gonna have a fetch function right and this is going to be using with Nexus 13 sort of xjs 13 um caching basically let's just call it that and then we're gonna go ahead and return and then we're going to have a sort function so it's going to sort all the all the articles with the picture first sort by images verse not images present right and then we're going to return the result response right so this is the flow that we're essentially going to be doing okay now first things first is the fetch news is going to take a few arguments first one is going to be the category okay and this is going to be an optional argument it doesn't have to be there but we're going to basically go and say it should be a category or a string value the string value is because I might concatenate them for example if we go back to our page.tsx in this case I concatenated a bunch of strings okay so you can see we gotta be a little bit careful on that front it's a category or string right then we're going to have keywords this is going to be one eventually when I have search function ones we're going to say string and then I'm going to have is dynamic okay and is dynamic is basically going to be the difference between how I determine if a page is going to end up caching so in an ISR Fashion whereby on build time the cell will pre-build all the pages in xjs and then it will revalidate them every 20 30 seconds right this prevents the API getting exhaustive it means more up to more efficient way of loading the pages is also available but we are going to go ahead and actually have um search results be dynamically rendered as in the form of a server-side render so at this point we want to have that is dynamic toggle to true so all of this is going to happen trust me it's actually really damn cool how we do this okay so first things first we are going to install a library called a graphql request right so in this case I'm going to install something called a graphql request so in this case it will go over here install graphql request this is all the prep work before we can connect over to Step then and set up things like that so here you see npm ad graphql request and we're going to install graphql okay head back over to our code command J and we're simply going to go ahead and pop this in like so I'm going to say yarn add oops add and as long as you can put a space between them you can install like five six seven a million dependencies David kiss what is up I see you in the chat what's up guys and also remember hit that little join button at the bottom of the screen if you love to support the public fan you're going to get little treats available only to those members and I can know I can notice you immediately in the chat all right it's hard to see everyone sometimes there we go and then before we can kind of you see this is throwing an error because we haven't exported our fetch news function right so in this case I need to just go ahead and Export the fetch news function that's good and then go back here we simply need to import the fetch news function like so and as you can see this is freaking out because affection is not returning what we need right now it's not returning anything right which is why it's broken so that's installed great let's go ahead and hide this out now we get onto the interesting part this is where we're going to go ahead and connect to the media stack API so first things first we need to create a media stack API account okay so I'm going to show you how we do that so head over to mediastack API go up to the top and simply click sign up for free right in this case I've already created an account so I'm going to go ahead and just log into my existing account so I'm doing that exactly right now right so mediastack.com is what you're looking for so this right here so I didn't show you mediastack.com right so in this case um you want to go to mediastack.com and then you want to go into a sign up for free so I've already done that once you've gone ahead and signed up what you will see is the following page okay so I will show you right now but I'm going to show you in a way that I can kind of hide something important right so give me one second guys right so once you do that you will reach the dashboard screen right so you'll reach this section here now as you can see we've got the dashboard we've got the three-step quick start guide so this will introduce us to the media stack API you can upgrade your plan if you want more so in this case just for the demo I've upgraded mine so that way I don't die out but for you guys you will get 500 free requests and I'll show you how you can not exhaust those if you do it carefully okay so you want to copy this key this key is very important I blurred it out so that way it doesn't get spammed ahead right so I'm going to copy that key and then you've got the base URL here now if you scroll down there's a bunch more information so I'm going to go ahead and scroll down right now so if you scroll down it'll show you an example as to how you can go ahead and make a live news reports historical news or news sources so essentially what we're going to do now is we're going to use this but to go ahead and actually make a connection to step Zen's uh curl import statement okay so it's going to be pretty pretty cool all right I'm going to show you how we're going to do all this so first things first we need to go ahead and just copy this but first remember the access key was super important so if I scroll a little bit up there was an access key I want you to copy that access key okay so I've copied my access key and now I'm going over to my code right so I've copied my access key I'm heading back over to my app now go to package.json I'm going to create a environment file so.m.local this is going to be our local environment file okay so at this point what I want you to do is simply type in mediastack API key and again if you don't put next public here then it will not be present on the client okay so we don't want this to be present on the client because there's a secret key which is nice about server components we have more room to protect our apps right by not exposing public keys because we just care about the render happening on the server and then the data can fly towards the client so at this point super secret key goes here right so super secret key that I just copied goes here so I'm going to go ahead and paste that now and then close this file right so I'm going to do that right now so I'm pasting in my super secret key right now um whoa this is dangerous stuff well I saved it close the file done okay so now I've done that if I hold up over here and I go back to my terminal we should see that I had a little change so if I restart my server now it will go ahead and load the environment files you see this from environment.local okay so that's what we want to see that's great right and we'll probably get an error here because we're not even we're not actually doing anything here so if I was to move that out of the way you can see we've got this behavior and this is happening by the way because I'm on the dark mode right now so I want to quickly go back to my layout and let me just double check yes I'm on dark mode by default um I'm gonna go ahead and get rid of this just for now so you guys can see what I'm doing until I Implement dark mode okay because it's by default using my system preferences Okay so cool now we've got that inside of our um inside of our environment variables we can continue on so what I now need to do is make a we need now I need to set up our steps in so step then is where we're basically going to go ahead and build out our graphql API in a really really easy fashion this is what I love about it I've used a graphql in the past and it's just a little bit of a pain to sell steps in are basically the middleman they allow us to have this easy interaction between our graphql API and whatever data sources we need and they make it so easy to set up okay so I'm going to show you just how you can do it so let's firstly go over to our dashboard so you want to log in head over to your dashboard I'm just going to quickly hide the screen while that loads so that way there's nothing sensitive comes up on the screen and then what you want to do guys is you're going to need your API key now when you do initially set up there will be a moment where it pops up on the screen I'm going to see if I can find mine in the dashboard so I can show you how it will potentially look okay so at this point I can actually show you mine because it's not fully exposed so let's go ahead and show you so if we go into our steps then you'll reach this dashboard okay here you've got your endpoints you've got this really nice new dashboard that you can explore and you can here you can actually go ahead connect to the different endpoints and you can query them so this is from the sub the Reddit build you can see there's a bunch of stuff here so this is literally like a graph graphical playground so this is really nice right the guys over steps in have heard our feedback they keep on coming back with this awesome stuff but this is the important part we need to go to our account and we need to go ahead and do the following right but before we do that I actually want you to click the getting started guide okay so we're going to click on getting started right here and this is what you want to do you want to install steps in globally right so first thing first install globally onto your machine then you want to log in right so here it will give you your username so in this case I've got a username here you want to go ahead and do that it will prompt you for a admin key this is very important right this is different to your API key this is your admin key so you need to do this step first I've already done it okay so um I love it like if it's only leak size techniques um yeah so this is it so I've already done this uh right now so we don't need to I don't need to do that so you need to do that and then you'll log in on the CLI okay now heading back over this is the API key so I want you to copy this okay so copy that API key not the admin key the API key okay this allows us to access steps in and execute queries then what I want you to do head back over to your code open up your environment file I'm going to hide the screen so you thought I was gonna slip but I didn't I didn't slip right and then what I'm going to do is I'm just going to go ahead and hide one of my keys for a sec um give me one moment say super secret okay so look at this I I've learned tricks guys honestly I know how to get around this right so steps in and I'll show you my screen in just six steps in I API key when you add a new field here for steps in API key all right so one second so [Music] okay so at this point we're gonna go ahead and add in our next a stepson API key so at this point you can see I've added in my super secret API key right so you want to copy that value I just showed you this one copy it and then you want to go ahead and paste it over here right so so you wanna I'm gonna go ahead and paste in my values and then I'm gonna hide them right so I'm gonna hide the screen so this is your super secret stuff okay so I'm gonna go ahead and do that right now all right so I'm doing that just right now as we speak I'm popping that in so I've got my keys saved it and I've closed my environment file done nice right so everything's set up all right so at this point um that was smooth right smash that Thumbs Up Button if you thought that was funny right almost 300 oh man the lags are flying today this is crazy all right if you're watching a replay make sure you smash that like button so at this point we have our environment variables set okay so again restart the client um so that way you get the new environment variables awesome stuff okay now at this point I want you to do the following so now we can actually go ahead and set up our initial um steps and environment so we're going to go ahead and open up so what I'm going to do to make it extremely clear is I'm going to just simply open up another terminal completely so we've got the first one running the app the second one is going to be here I want you to type in steps in it okay and at this point this is going to initialize steps in inside of our project now you don't actually need to I think you could just do code straight up the back but we're going to do that okay for now all right what would you like the endpoint to be called so I'm going to say hissing quokka is fine they gave it to me bam hit enter now it says create a stepdad environment okay so let's look in this step then config that's our endpoint right so kissing a quokka is great now what I can do is I need to basically have our first pool of data right so heading over to the getting started section which was over here simply click that and then you can go down here now you can pull in your data from anywhere there's graphql on points there's rest API SQL no SQL Super Bass all that kind of cool stuff is supported out of the box by the amazing team over at steps in so now what I want to do is I want to pull in from a rest API so I'm going to do this now all we need to do is we have to pass in an example of the request that we're going to use okay then we're going to pass in the header in which like if we do have an author any authentication you can go ahead and do that as well I almost slip there right so at that point you can go ahead and do that so we just need to do steps then import curl so right so what we're essentially doing here is we make a call request steps that will literally look at the response that it pulls back and it will create an API right and the type definitions and all that kind of stuff around that in a graphql fashion right so really like mind-blowingly cool right so um yeah and there's also other things you can do here so you can actually go ahead and do other endpoints query names and all this kind of stuff but I'm going to keep it very simple for today's build so heading back over to our code what what is the API endpoint that I need well firstly remember we go back to our quick start guide this one right here right so this one over here and this is exactly the kind of layout we need it's going to be API mediastack.com forward slash V1 forward slash news access key okay so um that's what I essentially want but I don't want to have to make a connection to this or call this from my client graphql should be doing that for me instead I should be making a call to my from my client to um steps in and then steps and handles the rest okay so uh let's do that right now so what I need from this is I need to copy this all right and I'm just going to quickly check something on my end for a second because I need a value that I've completely forgotten um right so okay so what I now need you to do is in fact what I'm going to do is I'm just going to prep something on my screen so that way you can do the same thing so key goes here okay so you could go ahead and actually do this in a full approach where it actually predefines everything for you but I'm just going to show you a basic example and then we're going to add to the the definition that it creates for us okay so what I need you to do now is go ahead and this is the example structure that it requires sources categories countries and all that kind of stuff so what we're going to do is we've got this right here right so I've created a dummy sort of uh request so V1 news and then I'm passing in the access key so your access key should technically go here okay so what I want you to do is access key you had previously paste it in there right so paste it in there that's completely fine right and that's that's good that's very important you have to replace this with your access key right the steps no the media stack API key the one that is available by scrolling up on this page right so if you scroll up there's a API key there right so you want to copy that paste it there so I want you to do that right now so I imagine I did that then it's gonna say outsources and sources and we just got two examples right there okay so what I'm now going to do is I'm going to do this exact command on my machine but I'm going to write the following I'm going to say steps in steps in import cow like so and I'm going to do this exact command okay and remember your API key has to be there replaced okay so I'm gonna run this command in my terminal right now okay so you need to do the same thing stepson import curl and I'm going to run that right now I'm going to hide my machines that way it doesn't expose anything that I don't want to exposed so I'm just going to run that right now so um if you only don't need to start there we go okay so I'm running that in my terminal right now and um oops I've made a little silly mistake there's an account report oh sorry I've actually made a mistake there it should be steps in import curl yeah so I've done step 10 count import of silly me right so steps in import curl and then your url okay so I'm doing that right now and oh in fact okay I'll show you even in a better way I'll show you an actual even better way so at this point you could say steps in yeah and this will give us a nice little prompt okay so at this point I want to go ahead and do the following commands I'm going to paste this value in so I'm going to paste my one in but my one's got the actual full value in there right so I'm going to do that right now I'm just going to hide my screen so nothing important gets exposed um so I'm popping in mine right now so I'm popping it in with the access key appended to it and so forth and then I'm gonna go ahead and hit enter [Music] and then I'm going to hit enter as well so it's asking me a few questions here I've just left everything enter enter enter enter and I made a slight mistake here right so I can't remember what I did here so I'm just going to go ahead and give this another quick try so give me one second guys [Music] um okay and then for this I'm gonna do give me one second and I will show you exactly how I do this um okay in fact what I can do is actually show you something a bit nicer than this so let's do and okay so um it was in fact that's an important all right so I did this a while back which is why I just need to figure out so you've got some live debugging here I'm just trying to find the exact command I used okay and I made a silly mistake last time which I'm just trying to find that the fix for right now so give me one second guys and I will show you how we do this so this is exactly what we should be seeing all right so we're going to essentially do this request right here um and now what I'm going to do is I'm just going to go ahead and pop this in the command in a second right [Music] right so the one that I needed was in fact [Music] okay I made a mistake right this is why so I know exactly why it happened so we're gonna go ahead and do step then import I'll show you what that problem was so what I was doing here guys the incorrectly was I forgot to put curly um quotes around it okay so I've got to say something import and then you have to put your quotes around it and then you have to make sure that there's no affordable backslashes right so this is very important okay so that's what I forgot okay so now I'm going to do that exact same command so I'm going to say http there we go and then I'm going to say API I pass in everything that I needed and what I did here was actually slightly different so I'm actually going to copy this so I can show you it afterwards and ABC bear with me guys on the replay you can fully slow it down and watch it as you want to right so I'm running that command now and then it starts to command and it did it okay so this is perfect this is exactly what I wanted to show you so how can I show you this in a nicer way let's go ahead and hide something on the screen so once that's done what you should see is the following okay so this is perfect right so what I want you to do is this is the command I wanted so you should run that command I've hidden it and then it should say successfully imported schema curl from steps in so this is what you actually wanted to do step 10 import curl then you pass in the API API stack news forward slash access key and then you paste in your access key here okay so paste in your access key over here and then what I've done is I've added in countries and I've added in a limit uh 100 and offset and a sort published just descending right but if you really don't care about all of that yet and you kind of get getting too much difficult you can get rid of all of that and just do that okay so just do this and replace your access key and it will work it will be perfect that's how you do it make sure there's no backslash here right because sometimes that can break things as well so this is the Ultimate key command that you need okay so I'm going to keep that on the screen there just so you can go ahead and do this and obviously when I push this to GitHub that's going to be the example I'm going to have on the the bottom so if you want to go ahead and get this you can get the code at GitHub the link is down in the description right so example import that's the one okay so now what I can do is I can hide that and I can go over to our um the file that it generated so in this case steps in config no so it's not this one it's inside of our Co Index right so here this is exactly what we wanted now look at this look how incredibly powerful this is so I bear in mind I did not do this right this is where what stepsen was able to figure out on its own based on the response that it got given so what we did there is we made a query to the media stack API and then this returned all the information that we actually needed right so in this case if I was to run the actual command um in the in the browser so I'm actually going to do that right now I'll show you so if I do um API stack if I run that Command right now in the browser so I'm just going to hide the API key so in this case I've hidden my API key but what you'll see is this is the response that it basically does when I make that API request I've just changed it right now the access gear so you see pagination came back we've got the data coming back and so forth so it saw this response and steps in and generated all the type definitions everything that we needed to go ahead and build a model around this so that we can make a graphql interface happen right and they actually did all this in the background in like a second it done that so fast it was crazy right so heading back over to our code you can see here's our query so this is the magic part right here's the query now I'm going to make a few changes to this right because I'm actually going to extend it so I'm going to add the keywords I'm going to add in so I'm going to add keywords in over here I'm also going to add in categories so I'm also going to add into countries categories and the access key likes are perfect okay so that's actually exactly what we want and then in this case we've got the root which is basically The Returned type definition and here's data entry so previously we had article remember it was just article um so in this case I could probably change that to Arc one it shouldn't break but if it does we can revert it okay so this is really nice so at this point Savvy programmer what's up I see you AO tefira what's up so we've got the pagination everything so what I've done here is you want to match these type definitions as close as possible in your typings.ds.ts file so in this case you can see here the only one that we've some or got changes for is this the image and the authors sometimes are not defined so you can see pretty much one to one replication right and even here what you can do is you can make that a type like so right so you can see pretty much we're protecting our types by having identical type definitions this allows us to reduce the number of buds in our code okay so once that's done what I want you to do is head over to your terminal and type in Step Zen stop hit enter okay so really nice that was pretty tricky to go ahead and show without actually getting all of the things on the screen so I've got an error here okay so you can't actually change that so we have to make it like that okay so that's fine and in this case you can see it deploys hissing quoker to step Zen right now as you can see guys here we have the example request so you can make your a request using the following information and you have to pass in your API key if you want to know your API key all you have to do is run this command step then who are my dash dash API key in your terminal and it will literally give you your key as well right so you can do that replace that as well right but in this case we don't need that or so this is the live API URL all right so hissing quoko so if I was to go into my steps in dashboard over here and I go into endpoints we can actually now see if I go into my Explorer we should be able to see hissing quokka here as well right so it should be take a second maybe to go ahead and refresh uh hissing quokka so hissing Coco there you go and as you can see my query access key all of this stuff right so you can either use the steps in dashboard or you can actually use your Local Host while it's running and it's on localhost 5001 and this will give you a graphical interface right so in this case you can click export it will show you a code that you can use you can show the Explorer and you can go ahead and build out your queries like so so in this case I'm going to use the following to go ahead and test it out so I'm going to put data in so I'm going to pop in all my data like so okay so I'm just going to say I want all of this information back I want the pagination data back I want everything back right so this is graphql request happening then what I can do is I can basically pass in some parameters so for the access key I'm going to go ahead and hide the screen right now and pop in my key right now okay so I'm popping in my key um let's just pop that in like so and I'm running that command um one second sorry I've completely made a silly mistake here yes I'm running that Command right now and then what I'm going to do is I'm going to basically hide my key okay so there you go so what I've done now is I've shown you a demo access key request so I put the access key I actually had that as my real access key value it wasn't this fake one and then you can see it returns back all the data so now we have a awesome graphql interface and step then does the fetching on their side all we're doing is we're basically interfacing with step Zen right so steps in gives us graphql API we make requests we say hey I want this I want that say if you don't care about the response like the account limit Offset you can get rid of those you can get rid of this they earn you can only request this if you want it all right so really really nice stuff right so um Sonny was like I'm gonna protect the API key better than my girlfriend that's so jokes okay and here you've got the query so this is actually quite important this part so what I want you to do at this point is grab this okay and we are going to update this a little bit more in a second but I want you to just grab that for now we're not using Apollo client but that will help us out a little bit okay so um this is quite nice so so far I'm gonna go ahead and just uh set up my screens a little bit there we go okay amazing stuff so we've got we've got past that hurdle right so stepson's done the hard work and you know what's incredible guys that literally took like two seconds once I had the right command two seconds the whole thing was done like try setting up a graphql API and try doing it yourself it takes a hell of a lot longer than two seconds but I promise you that right so at this point now um someone wants a uh the anthem I see you I see you I don't know if I can see it on my screen right now so we will get to that in a second there we go let's do this I see you I hate you guys I hear you there you go so so we're doing pretty well right so we've got the steps in graphql API out so let's jump back into our code right now nice and this is basically the next step now so we need now I need to go back to our fetch news and we're going to start implementing our fetch stuff right so let's um head over to our fetch news so we're in there right now and what I want to do is remember I copied that query right so the query from uh where was that from the API so graphicals you can either use this one by the way so you can fully do that and type in ABC pop in your data and see you can just do the exact same thing hit play and in this case it's unauthorized because I gave in the wrong access key right so it's completely fine you can do this as well and it comes over or in this case you can go to the graphical one I had open a second ago right so you can go to either one of those that's fine so at that point I copied in the following query from the graphical API right so I think they might even give it here I'm not sure let me just see add new query noise it doesn't show here the graphical one showed us there as well right but in this case we've got we've got to make a query okay so first things first I'm going to import my gql from that Library we installed earlier right so graphql request import gql this allows us to have graphql sort of queries inside of our code okay so first things first we're going to go ahead and name this query and then we're gonna go ahead and basically say query my query and this has to be my query at the moment because that's what the name we gave it when we set it up okay so that corresponds to if we look inside of our curl you can see here my query right so it's the same thing so in this case my query and then we need to pass in a few things right so how do we make this Dynamic right now you can see it's a static value I don't want it to be static I want to pass in a few of my own values so the top query here what I do is I put in a uh parenthesis and I simply pass in variables so there's three things I want to customize the access key the categories and the keywords so I'm going to pop those in like so now notice how this is not typescript it's slightly different it's like the graphql type definitions and this is saying that a string is required categories are required but a string for the keyword is not required okay so quite quite cool way of doing it and then over here rather than this we're now going to go ahead and do the following so I'm going to go ahead and just have it set up in the phone in the in the following way so access key is going to be passed in the dynamic value that we pass in here the categories are going to be dynamic countries for now I'm just supporting England right if you want to be the US you could also say GB us India everything that you want to have on there you can go ahead and do that but right now I'm just doing GB to make life simple I only I only want the the British news right now for this example okay but you can have like anything that's supported on their docs you can do that okay then I'm gonna sort it by published descending or if you want the other way you can say ascending as well and I want the keyword as well okay so really good stuff so far we've got all of the items selected okay so that's great and then we've got the page count limit offset total okay next things for next things after that we've got our graphical query so part one done now we need to do a fetch function with next.js's caching okay so what I'm going to do here I'm gonna say we have a cons we're going to say we have a request or let's just say the response right so at this point I'm going to say a weight I know his function is an asynchronous function and this function is going to be a fetch function okay now what we actually need to do now is I need to make a fetch to the correct API URL so in this point you see this row this over here that's the one that we need okay so you need to copy that Command right here right so oh no um we actually got this when we launched it so when we did um okay so that's hidden none but when we did um steps and start it shows this Command right so that's the one that you want so we're going to go ahead and pop it in okay and then we're gonna go ahead and pass in some object information okay so first things first is going to be a post request so the post here is the method is going to be a post request secondly we're going to have some caching right now the caching is very important to understand what I'm doing here so please pay attention rewind it if you need to this Dynamic value so in next year's 13 I'm not going to dive so far into it but I'll give it a brief explanation as to what we're doing here we have two types of two types of information we have static information and dynamic information Dynamic information means every time a request comes in you should fetch Fresh Value right fresh data so you should make that request fresh every time so if I say it's a dynamic so the way we do this is we set the cash rule to no cash right oh it's no yeah no cash and then this means that every time the fetch is made it will always get the brand new value from an API then we have static data stack data by default actually has a caching mechanism but we can use something called the next config so so it's a revalidation property and what this does is we can set something like a revalidate property to 30. this means that let's imagine I make a request now it's going to go ahead and get that request fresh right or at build time it will have that request but after I make that request 30 seconds will start to go by now if anyone else makes a request in that same 30 seconds they're going to get the cash value so the one that I previously got they're just going to get that value so in 30 seconds only one or so request is going to be made to the API and then this the cached value is going to get served in that 30 second period after 30 seconds it's going to refetch the new value on when somebody else comes in and it's important to know they're going to get the odd value they're going to trigger the the revalidation so then the cash value will then get updated and then for the next 30 seconds everyone's going to get that cash value so you see you've got the static incrementally updating value and if you don't have revalidate property then it's just going to be at build time but you want it to kind of update right so you want to have ISR that's that's what the benefit of it hope that made some sense if you did Smash that like button right because it's always tricky to explain this stuff but yeah um so we've got the method post now I'm gonna say the cash so all of this is going to be based on if is dynamic is true or for uh false right so at this point we've got the cache so if it's Dynamic it's going to be no cash which means every time I want you to server side renderer AR says completely use local storage users yeah I will at one point um and then we're going to say default so people think I'm not live this is live I'm telling you and then we got the default right then we've got the um next rule so remember I said there was a next drawer now what I'm going to say is if they uh if next if Dynamic is passed in we're going to pass in in the next property we're going to pass the revalidate of zero which means that I want no Cash Plus I wanna I don't want a revalidation wrong right otherwise I want it to revalidate to every 20 seconds right so you're always going to be up to date with the latest news within 20 seconds once you hit that page right so you can make it really like 10 seconds aggressive six seconds 20 seconds I think it's fine right even for breaking news 20 seconds within that information is really pretty good right so um and it stops you from exhausting the API quota because it's going to Cache those values so if you had a million people on your website it's not going to do a million fresh server-side rendered requests if if it's not Dynamic right but if it is dynamic it will make a million server-side rendered requests but if it's not then it will just make a million cashed requests so you won't be slamming the media stack API it'll make it once and then it'll just keep serving it from whatever so a server which is really clean right really really clean right so at this point now I want to have the headers now the headers are quite important here so I'll explain this out so we've got the headers content type application Json because we're passing in some Json information in the form of the graphql query so this we're going to stringify pass it through then we need authorization so we set up our steps in API key earlier what we have to do is do backticks capital A the Nike and then space and then here right and this was actually given to us when we launched our thing so I'm going to show you this actually again I'm going to run steps and start so it shows you our example so you know where the hell I got this from right and if you do not know where to get your steps in API key remember just run that stepped in who are my API key command in your terminal you'll get your key set that as your environment variable and then do this right so this means that every request it will pass along our API key as well okay so that's really good and then we need to pass in the body okay so for the body I'm going to do Json stringify and then I've gone I need to pass in some data here as well so what I'm going to do is I'm going to pass in the first argument which is the query now query is the actual key and the value so in this case I'm just going to pass in the query itself and then we need to pass in something called the variables because this is what step Zen expects when it gets a request from a rest API okay so let's do this right now lib libraries here what's up we've got variables let's do variables right so like so and here what I want to do is I want to pass in the access key the categories and the keywords okay so access key categories and the keywords now the access key is the media stack API key because remember step Zen is the one interacting with media stack so it needs the access key for that graphql request that I showed you earlier right so this one right here that's how we're passing it in so you see what we're doing we're actually going through steps in and we're making these requests okay now once that is done it's going to be quite important and I just like to have a little console log here that tells us if you're loading fresh data or not right so I'm going to say console log loading new data from the API for the following category categories and keywords right it's just a handy little thing to have on your debugging right then we need to have a sorting function well before we do that I'm actually going to go ahead and pass the response that we get so we're going to say const news response equals a weight the response that we get here dot Json right so we're going to pass the information that comes back so this will actually execute give us back some data and then it will go ahead and be in the form of the news response right here and then all we need to do is simply do a sort basically what I want to do is I like to have the articles with the information present uh first right so with the images I want to show these ones first and then afterwards I want to show the ones without so I'm going to make sure you how to make a quick and simple sort news by image utility function and then we can go ahead and Implement that right so very very straightforward function here so um let's do undo this so I'm going to create a oops inside of our lab I'm going to create a sort um news by image dot TS function and here what I'm going to do is I'm going to say export default export default function and this is going to be sought news by image right and this is going to take a news object which is of type news response right so the response that we got back is going to basically take that as an object right then what I want to do is I want to do two different splits right so from that news that comes back I'm going to have a bit of data inside of it right so what I want to do is the first thing I want to do is I want to get all of the news with image so what I'm going to do here is I'm going to go access the data that comes back remember let's look at the example response I'm going to access not the pagination I'm accessing the data right that's an array I'm going to go through and I'm going to filter out any of the ones with image null okay so filter it out so that way in this array I've got the news with image I'm going to do the exact opposite for the items with the um without the image so in this case without where I'm going to filter that as well then what I'm going to do is I'm going to make a new response which basically code that consists of this exact structure but this array I'm going to rearrange it right so I've got all of the image ones first so how do we do that so the way we do this is we say const I'm going to say sorted use response equals remember I want to keep the current structure of the news right so I want to say um pagination should still be there so pagination news pagination right and you could actually go ahead and spread the news uh like this and then go ahead and override it but I'm just going to show you explicitly so pagination should stay the same but the data is going to be the following it's going to have the news with images first inside of the array so I'm spreading those out first and then you're going to spread out the news without images right if you want me to write a make a tutorial on the spread Operator just let me know in the chat right now right Andre Smith what's up dude good to see you here and then what we need to do is simply return the sorted news response sorted news response like so okay so that's perfect right now I simply go back into my fetch news and I pass in my news response that I got okay so let's go ahead and do that right now and all I need to do now is basically the response that comes back is as such right so news response comes back and inside there's a data object called my query okay and this will actually have the data that we kind of need right so the news is basically going to come back in here so what I want to do eventually after that is return the news so in this case I can simply say return news now trust me let's go ahead and give this a try let's give it a test let's see how this has all happened and let's see if this actually works are you ready guys if this works I want you to blow up the light counter we're almost at 400 likes as incredible thank you for tuning in right so now I'm going to go ahead and test this out head back over to page then we're going to go ahead and say fetch Newsday our news response equals await fetch news passing the categories and then I'm going to console log out the news so if this works because this is a server rendered component we should see the console log inside of the news so I'm going to go ahead and check this right now so let's go ahead go over to pop Prime news and refresh the page and we get a okay look at that guys boom we have the data that's amazing that's exactly what I wanted right so look all the data comes back in the server amazing stuff that's exactly what we needed okay so I'm just gonna pull that up there so you can see right now oh also you you might notice that it says can't resolve encoding so I find this issue quite a lot so what I would recommend is cut your server just do yarn add encoding okay oops add encoding I love this song honestly I love it so much this one and then do then then do the start your server okay the yarn Dev right so now what you'll see is if I run this so let's go ahead and refresh let's pop this a little bit smaller okay now you can see I get all the data back for the news that's amazing and this is going to have all of the categories because I passed in all the different categories right so it will have right now it's probably only fetch the general stuff because that was the first but we should see other categories in here as well it depends on what the up-to-date information is because the last bulk of the information could have just been general information which is most likely the case right but that's perfect that actually worked amazingly right so now what we can do is we have our news right perfect stuff smash that like button because that worked perfectly as I wanted it right so now we've got the news so now what we got we gotta do is make this awesome pay uh this is this is a really powerful bit to be honest right we're going to create this news list component and this is going to be one component I'm going to reuse a bunch of places right so and trust me I've made it so clean I'm excited for this bit right so now I'm going to say uh news list newslist component.tsx right and now we're gonna fly I'm telling you this is where I guess really really interesting right so we're going to create an RFC Component News list and this is going to take a few props the props are going to de-structure to become news so we're getting into a heavy flow state right now we're going to remove this out of the way and we're going to go ahead and introduce our prop Dev type definitions like this right this is going to have the news response object inside of it so news response okay now with this we someone says I should become a professor thank you I love that all right we're going to say this is the main tag inside of here I essentially want to render out all the articles all right so all the Articles should be listed out here so I'm going to create an article component but before we do that I'm actually going to go ahead and pull in my news list component so here I'm going to go back into my page and I'm going to go and pull this in so we're going to say news list component pass in the news like so yes just like that okay and this just this way we haven't used this component inside and you see no errors no nothing that's a good sign that's what we want okay so now what I need to do is create an article component so article dot TSX rfce this is our article component the article component will actually take in a few props it's going to take the individual article right so the individual article it's going to be we have to again Define our props so we can say type props equals and this article is going to be of type article okay remember we've done all of our type definitions earlier right so uh yep so that's gonna be a article and this right here we're going to pass through the values over here so what we're actually going to do now is we're going to map through that news right so we're going to say news dot map news dot sorry this is really nice to actually let me look at that oh time definition is on point that's what I'm saying like news data Dot and then we've got our you see all the time differences are correct like they're they're correct and then it helps us out with coding so now we can say for every single article that we map through oh these are the OG Papa fam songs right now all right we're gonna render out the article but we should also be passing in a key right so this one I'm just going to give the article title as a unique value because we don't actually get the article ID which is a bit annoying right um and then we're gonna go ahead and Pop That in so bam hit save and just like that we've got loads of Articles here they're showing up on the screen but we don't actually see the data of it right so what I'm going to do is first I'm going to set the styling properties of this so that way once we do get the stuff on the screen it will actually look a bit better so we're going to say grid on the mobile view I want it to be a grid column a one by default so grid columns one by default then we're going to say on the medium screen it's going to be a grid columns two so grid columns two and then we're going to sound a large screen it's going to become grid columns three right so grid actually works really well for use cases like this give it a padding of 10 and a gap between every component of 10 as well Gap right so that just like that you can see like we have on on the medium screen that goes to that and on that screen it gets to three awesome stuff okay so now we go over to our Mario's what is up dude good to see you here that's what I'm talking about quick little water break as well this is incredible the energy is flying right now we have so many viewers still tuned in amazing right look at this let's go real truth says under like thank you dude thank you all right so the article now so we're actually going to use the correct SEO tags here so we're gonna say article and I know that sometimes they probably ain't 100 accurate but it's it's close all right it's close so this point firstly I want an image right someone say if there is an article image remember they could be undefined so if there's not a coinage then I want to go ahead and render out an image tag where the source is article dot image but the alt should be the article.title and then I want to give a bit of styling so The Styling that I want to give I've saved us a bit of hassle right I've gone ahead and popped in like so and then we've got the image tags like so let's pop that in height of 56 width of 4 object cover rounded top large Shadow there we go so look we've already got the images in all right and again I don't control what's on the news I just see like this is just pulling in live news right now okay so you see that right now we've got that and then we've got the Articles beneath it which aren't rendered out because we only have image right now okay so at this point we've got the image then we're going to have a div right under that div we're going to have another div okay so right now the goal is that we get to this screen right so we're turning our current look into this right now okay so in this one we're gonna have a h2 tag which is going to be the article title right so the article title here is going to pop in and you can see look we start getting this nice little bit here all right Rich you see that's getting a free plug and we've got a section and inside that section we've got a P tag and this is going to be the article dot description okay so now you can see we've got the article description in that case a new new thing came straight in the new live as I mentioned this is a live right the Finish thing does look really good right it looks really clean and also do not forget we're going to be implementing that beautiful thing right um somebody says why aren't we using the new nexgs image tag so the reason why we're not using the next shares image tag here good question is because we can't tell if the domain is going to be from one place or another in which case we can't trust that domain if we can trust the domain or if you have a middle step where you have a preprocessor where you can you have you know exactly where the domains are what the domain that comes in because remember you have to whitelist the domain so that way next.js can efficiently go ahead and optimize those images but if we don't know the domain we can't just whitelist everything it's unsafe practice right so we got the section down and then we're gonna have the footer of the section as well now the footer here if we're going to have the P tag with the article source so it's going to be article Dash Source oops sorry source and then we're gonna have a dash and then we're gonna have a P tag and this is going to have a live timestamp right but for now I'm just going to say article dot publish that so article.published app okay so at this point let's just see what's going on right you can see look we've got this and look at literally new brand new news is coming in like is it live right so it's literally coming as we speak okay so at this point and what you might find guys I want to actually stress this point right what you may find is you're going to run out of the quota pretty fast because there's only 500 responses right so what I suggest you do is make a request to that API endpoint like I did so like here right then what I want you to do is copy this information right so copy everything you see and then go over to your code and create a response response dot Json file paste it in there okay so what I'm actually doing is I'm creating mock data right so what I would recommend you do is you do this because that way you can stop running through your quota so go back to your page.tsx and simply import it right so I'll show you a little trick import so this is a nice little trick when you're developing import the response from that response right so a response to Json and what you can say now is you can say news will be that or the response right and now what this is going to do guys is it's actually gonna basically only pull in the uh the data from that request right so in this case it's not a good example because I've got um I've actually got a big enough quota but in this case if you did this you would have the correct one right so this is obviously not showing all the images but if you did need to do it then um as soon as I just got a new keyboard on your laptop no no but then um at this point yeah so do that do that trick and you want one for your quota okay in this case I don't need to I've got I bought the upgraded quota for this exact reason um but in this case that's cool right so this is actually gonna be the live information but do that please otherwise you're going to be like I'm gonna get comments saying I'll run out of my quiver and it's a free plan I don't want to pay this so that's the way of getting around it and then when you're ready you can deploy it and then you can leave your live one on okay so at this point guys what I want you to do is head back into your news list right back into your article and we're going to carry on styling so we've got the lifetime stamp which is looking pretty ugly right now we're going to make that a little better in a sec and then under the div we're going to have a read more button right so read more button and that's going to eventually direct us to where we need to go so let's start this up all right first things first the article I'm going to give it a bunch of styling I'm not gonna run too far into it I'm just going to show you what I put on the screen you can feel free to pause and I'll just run through a brief styling so a couple of background colors dark color for dark mode Flex it up Flex column so everything stays in the column view around the corners Shadow should be over it and when I hover it I want it to have a bit of a scale effect to it right a background should change very slightly when I hover it and I want the transition to apply to everything 200 milliseconds ease out so which means I get a nice animation so if I do that now you can see look okay but right now it's it's assuming I'm on dark mode right so what I'm gonna do is I'm gonna actually go back to my original layout and I'm gonna put back in my dark mode there right I'm actually going to implement dark mode in a second right so I'm Gonna Leave This on here because right now all the colors are off but we're gonna we're gonna code in the dark for a second right and then I'm gonna after this I'll Implement dark mode so we can actually show you how to flip this and fix exactly what we have right now on the screen right so next thing I want to do is apply some other styling so here for the outside surrounding div I want to do Flex One Flex Flex column so this div should take up the majority of the room that's nice and then for this inner div this is going to also be a flex one and it's going to take up the majority of the room and it's going to be a flex column itself okay so let's pop this in like so I need to refresh so it kicks into effect nice now for the H2 I'm going to add in a bit of styling it's going to be a font serif so a bit of a it's a roof I think yep it's gonna have that nice sort of like you know use article feel to it um and then I've got my section here which I'm going to say class name and uh we're gonna say Flex one so by default because I like to use dark mode and everything which is why you're seeing dark mode automatically appear right now okay so right now you can see we're all we're starting to get some margin top at the bottom so it's starting to look decent it still was very confusing and I also need to basically clamp the text so here you can see um if I you see right here now for example if if the text goes on for too long I don't want it to basically stretch the entire page out right instead what I want to do is I want to clamp it so I'm going to install something called line clamp an extension so in this case I'm going to type in line clamp Tailwind okay so line clamp tailwind and we can see this pops up right here now this is an awesome little blog that they wrote and it explains how to use it to use it all you've got to do is install the lime clamp mechanism and it basically allows us to have a bit of text where it basically goes ahead and does like for example this will go ahead and say like here dot dot right so it's nice little trick you can do to keep your stuff pretty neat go into our second let's open up a third let's do yarn add Ln line clamp and then you simply have to go into your Tailwind config go over here to your plugins and require this line right here just like that and just like that we've upgraded our Tailwind okay so now we have line clamp and as you can see our intellisense even picks up on it okay so your intelligence should also pick up on that as well you can use truncate but truncate is only for one line I want it for like six lines and then I want to trunk it that's why I use line clamp all right but good spot right good good little bit of observation but that's why we use it so footer I'm gonna go ahead and pop in the following Styles like so okay let's go back and check it out so now you can see a clamped it right so it looks pretty nice so far um there you go okay so that's pretty pretty cool remember not all of these articles come back as like you know more than that so it's completely fine if we want to clamp to two just to exaggerate the effect we can do that so now if I did that we can see like it clumped two lines right so you can just leave it on two lines if you really wanted uh that's also fine but look you can see basically you can also work in that way but look it's actually looking pretty good right it's looking good okay so this point I want to add in the dark mode because right now this is super hard to figure out what the hell's going on right so let's add in dark mode and pause right so we're gonna pause here for a second because it's looking pretty cool I want to add in dark mode and then we're going to add the search do the pages all that good stuff we're moving at a very good Pace today right so first things first we need to add in our dark mode so how the hell do we add in dark mode well first things first we'll go into our layout I just repeated myself sorry I was thinking about something um inside we need to surround the body with something called a provider okay so provider um somebody said you could use a truncate with fixed height width yeah you can but it doesn't always work the way you expect right so here this is by default is server components right so there's a trick we can do here because to use any provider like redox or or any kind of State Management provider including a theme provider right we need to have client-side rendering but how what if I don't want my entire app well there's a pattern that you can use in Nexus 13 to save yourself here this is basically whereby as long as we pass in we can have a parent higher order component which is a client component but as long as it receives server components as a prop or a child then it's okay right so you can do it that way so I'm going to show you what I mean by this so we're going to create a higher order component here called providers right this will eventually wrap the entire body now this provides this class I'm going to go ahead and create like so providers providers.tsx okay now from the layout what we can find which is kind of Handy is if I go into my product do rfce and now for this top section I want to copy where it has children right so I want to copy the exact same um arguments that it has over there in our providers so I'm simply going to pop that in there so this will also have children as an argument and their prop types is just a react node and then it's also going to render out the children inside of it okay so you're probably wondering okay where are we going with this right so at this point I just want this provider to use client right now now the biggest confusion I had here was but surely if I make this use decline then everything beneath it is also our client component well no that's not actually how it works because this is actually a a child or a prop or inside of this and therefore next.js13 is smart enough to know that you can still use you know it still wants you to be able to use server client components separately as long as you do it in this pattern right there is also an incorrect way to do this but you can check the docs out for that okay so there you go now inside of here this provider patent this is where you could basically put in like your redox that kind of stuff if you really needed it to okay but now what we're going to use is something called Next themes so if I head over to next theme so I'm going to go into nextsteems.com Google it and you see the first npm package is the one I need okay and I'm gonna load this up and show you an example of how we do it so I'm going to use yarn to install it and it's essentially just a nice abstraction of uh what we could do manually but I don't want to hear it manually right it's an infraction of themes right so basically what it's going to allow us to do is you can see that theme provider this is the next gs12 way in the underscore app photo we're not going to do that we're going to use a simple different approach to it okay so what I want you to do is just follow my lead on this okay so here I want you to Simply import the theme provider that's the first step import the theme provider okay easy as copy this simply pop in the theme from us now our theme provider is wrapping our component then we have to pass in a few attributes so I'm going to say enable the system now what this does is if my system by default as you can see is already doing this but I just want to explicitly show you if my like preferences are dark mode I like to code and do everything in dark mode it's just easier on the eyes um it will go ahead and use my preference or my Mac OS settings right so that's why you saw it previously but I want to show you that you can actually disable that if you want and then I'm going to do attribute class my attribute class and because of this what I also need to do is go over to my tail in config down here and I also need to change the setting here so the one that I need to actually change is the I need to add in a dark mode class section here so there we go dark mode class all right um and yes season says can we Nest multiple providers like authentic yes you can that's exactly why we have this provider class right um until these providers update their own code with uh like the use client directive you can't do it outside of this pattern right you have to use this pattern to make sure that it's enforcing it otherwise you'll get an error saying well well you can't have context and all this other stuff because it's a server component okay so this way it works perfectly so this works nicely so the first thing I need you to do now is we need to go ahead and add in we need to so this is the the top level setup for us right so everything's kind of done at this point now what we need to do is head into our header so command p is how I did that little shortcut we are inside of our header and here we need to create a dark mode button okay so I'm going to go in ahead and create a dark mode button right now dark mode button dot TSX the reason why again my header I want it to stay as a server component my component that can in fact be a client component right so this one can use the client so you see what we're doing here we're optimizing it we want our majority of our components to be server components the server can take off their the main hit of things and then our clan commands are the small things that require it that's our new mindset with Nexus 13 okay so how do we go ahead and configure this well first things first I'm going to make a few different Imports right one is going to be the use theme from next teams one is going to be the state and use effect from react so one is going to be the Sun and Moon icon first things first I need to go ahead and get a few things from our state so I need to set up two a piece of State called the mounted this means basically I'm going to use this in a very careful way because I don't want to basically Mount this component until uh it's mounted on the window the reason being is on the server it doesn't know you're going to get a mismatch error if you don't do this because it basically is trying to render it like hang on is the person in dark mode or in light mode I don't know so we have to wait until it mounts the screen so you can check their preferences and everything like that and then it will do it otherwise what happens is your server will have one result your client will have another result and you have something called a mismatch all right so you get this annoying error on the screen right so now what we can do is to fix that Arrow we can just say um we can have a use effect which says set mounted true right and this basically means a use effect is going to run on the initial Mount by having no dependencies here we can set Mountain into true if you find this hard check out the replay um of my old video where I explain all about usefx is a really good video and honestly I'm not saying it just as my own we've got very good feedback on it and we are here on the screen Jay will plug it afterwards or he'll Chuck it in the chat right now right so in this case a very very good so set mounted true and then what we can do is we can set our defensive brace right so defensive coding hitting if it's not mounted just don't return it that return null for the beginning right once it gets past that point so if it is mounted I simply needed to go ahead and check the following if the theme is of system it should be the system theme okay otherwise it should be the theme that the user has set okay so that's great and then here what I want to do is I want to say if the current theme is dark right then I want to render the following or else I'll render something over here so let's see how we can go ahead and configure this well first things first if it's a dark mode I want to show a sun icon and I've got a bit of styling here with a yellow sun and I'm basically going to run a on click function here which is again why I need to use client and I've got hooks here so again use client and this will if I click it it will set the theme to light and if it's already on the dark mode if it's on light mode sorry then I want the opposite I want a moon icon with a darker icon that will set the theme to dark so let's see if we did all this correctly so hit save go into your header simply pop in your dark mode button like so and just like that we should now see on our screen if we refresh so let's go ahead and refresh and I've got a hydration error here so this is because um I've made a mistake somewhere actually uh we will come back to that in a second so that's exactly the error I was talking about previously and this I believe is because of um okay so I know why this is happening so if we go into layout it's because I'm trying to render my head separate so firstly we can move that remove ahead because that's in a separate component let's go ahead and do this now let's refresh and that's it yeah because I was trying to render the head the red head is actually rendered in a separate component so we can do that separately and it accounts for what we just did right so that will prevent the error from happening so now you can see if I click on this look at that whoa look at that clean guys smash that like button oh that's so beautiful and look at that and it just knows like it's just cleanly no and it remembers like if I'm on dark mode and I come back to the screen bam it does it right really beautiful stuff like look at that look oh on that note I think it's a well-deserved water break absolutely incredible stuff killing it right now awesome all right smooth switching and just like that you have light mode in next year 13 which can be tricky in the beginning but you see how we've done that right so um so let's go ahead and continue on strong we're doing amazing guys let's press forward so at this point now what I want to happen is I want to go ahead and set up the uh the the read more button and this and then we're going to do the search and so forth so I'm going to move a relatively different uh Fast Pace right now okay so at this point I've got the all right so we're gonna go into my article check this out so we've got the read more button so uh read more we're gonna go ahead and build this out so article read more button right so I'm gonna go ahead and create a read more button okay so don't worry guys we should be fine in just a second right sometimes it has a little hiccup it's completely fine right so just if you have a problem with refresh it will be all good so we're going to create a dark mud a button right so in this case no we've done that read more button sorry read more button I think we're good now read more button.tsx there we are rfce right so read more button perfect stuff hit save and we should be good all right so at this point read more button and then what I want to do is I want to go ahead and um okay so my connection seems to be picking up now so it should be fine now I just had some bit of a glitch but I think we're good now all right I think it's back yeah I can see the streaming is actually a bit stronger now okay so now what we can do is read more buttons so yeah I see we're back okay perfect right so read more button hey we survived right we don't let any of that stuff break us I saw my my bitrate drop and I was like oh okay scary all right so read more right we're gonna power through this one guys all right so article let's go ahead and make the read more button now so read more button the struggles of being live right so at this point now inside of read more we're going to go ahead and have the following so this read more is going to have a article passed down into it because we get article popped in here so article will actually get the article Parts through and then in the read more we're going to have our prop definitions be defined like so so at the top here we're gonna go ahead and have type props and this will be the article time okay the props come in here we're going to destructure the props to get the article out and this is going to have the type props all and this is going to be a client-side component but this is going to be for the read more button at the bottom there this is going to be a client-side component so use client we're back we're back yeah we are nice all right so we're gonna have at this point at the top we're gonna have use router so don't worry if you had a little hiccup there just feel free refresh your page and you'll be back on the papa fam so we don't let this stuff be us it's completely fine guys no we're good all right so use router and then at this point what we need to do is I've got a nice little function here and what I'm going to do is I all of the article details I'm going to streamline it into a query parameter and then I'm going to pass that as a get parameter request in any URL request okay so I'm going to show you how we do that right now so for this one uh we're gonna have a button rendered at the bottom with a bit of styling so I'm going to go ahead and pop this in like so and we've got a handle click function so the handle click function I'm going to go ahead and run like so oh my God what's that right and then here what I'm going to do is a nice little function so what I'm doing is I'm taking all of the object entries right so this is the article itself I'm mapping through the key value Pairs and I'm basically making a query parameter so that way I can fit all of the information from the query into a argument the reason why I've done this is because I want to basically have this in the URL nothing sensitive is here so it's actually fine to do so all right then I'm going to go ahead and create a URL from that so I'm going to basically direct the user to forward slash article with a query string appended okay and then I'm going to console log that URL so we can see it on our side so that way I know if anything's wrong and I'm going to push the user to that URL okay and then we're going to go ahead and refresh our styling should be down everything should look much nicer okay so at this point now if I click read more what we should see is you can see also got passed in and all the information about that article got passed in over at the top right in a nice kind of query parameter before because we haven't created that page so I'm going to create that page right now this is where you can see the power hour of next js13 because we don't have to you know mess around during the the layout again we just create the page and the rest is handled for us right we are back with the viewership don't let any of this streaming nonsense you know where freezes and stuff hit us down we are going strong keep enjoying this one guys all right so um Jake just gave me the all clear we're actually clearer than ever right now right oh okay so at this point I want to go ahead and create the following so we've got um we've got a where is it going yeah I'm going to create a new uh article screen right so in this way to create a new page so forward slash article what we're going to do is go ahead and create a new folder and we're going to create article now inside of that I'm actually going to go and create a page.tsx this is a new page rooting structure again you can watch my video if you're not sure about it okay so this one's going to be the article page right it's the article page now we can go ahead and actually redirect the user to that article page so if I was to click it read more you'll see when you hit the Oracle page but the layout is still there really cool really powerful right I'm telling you it's really great how this works all right so at this point now the article page we can actually simply have like you know only what we essentially need here to be shown on the screen so the search params all of those details like the parameters up in the top over here at the right so everything I pass through I need to access that okay so the way to access that is we need to access those type props right so in this case let's go ahead and do that right now so we've got the search params that come through here that's how they basically come through right you've got your bunch of stuff and one of them is the search params this is going to include the it's going to be in the form of article information so we're going to just pass it like so now here what I'm going to do is I'm going to include a check right which is basically going to go ahead and say if there is no article passed in then I want to do this not found operator from next navigation and what's happening is because it's server side rendered we can actually check that really nicely right so I'm going to show you a little sneak peek here of how I do that so before we render anything I'm going to say if the search params uh exist and the object entries are length to zero so basically if you haven't got any parameters that are passed in here and there is no search params return or there is no such params return the not found screen so if you've basically imagine you tried to come to forward slash article uh without any information at that point you probably want to go ahead and just you know remove this right so and then you want to show a 404. so if I try to go to article right now um and I got rid of all this information you'll see a 404 which is nice that's exactly what I wanted but if it's got information you'll see the article page right so I'm showing you several ways of doing it and there's so many different ways you can mix around with this kind of stuff right and then we're going to define the article here so article it's going to get rendered out here and then we're going to go ahead and do the following so I've got a section inside and everything is going to happen inside of this section so first things first I want to put an image on the screen if it exists so in this case article.image is there and the article in fact we need to go ahead and pull it from the um the search params so in this case we're going to go ahead and pull our article from the search params like so okay so let's refresh now you can see I get a nice little picture right so this is pretty cool let me get an uh I mean a clearer picture so we haven't got we haven't actually got the the home screen set yeah so let's do something like um the FIFA one or okay everything's just depressing news oh my God okay I'm gonna do this dog one right she see this I don't know what this is all right again I don't want to be uh that's getting a plug here because I'm going to click on him and then inside of this what we're going to do is we're going to have a div oops I'm gonna have a div and inside there I'm gonna have H1 with an article title with a bit of styling okay it's a little bit of styling here class name padding X and 10 axes uh padding on the x-axis of ten wow I'm glitching myself and then we've got a div here and inside of here we're gonna have H2 with the buy with the source and with a P tag right so and then with the last one as well so I'm gonna pop these in first like this all right so in this case now you've got the the source so in this case then null right but you could have a conditional you know thing here saying you know no or on unknown so you could say this or uh unknown right so if it was unknown in this case you could do the same let's say just unknown um whatever messed up um or unknown that's fine right so in this case we'll come back to if it's no you can do a check but basically you can do that check yourself right um I'm not gonna spend too long on this and then we're gonna have a P tag right now the P tag is going to have the article published at date so it's going to have the article.published at time and the class name here is going to be padding left of four okay and then for the surrounding Dev here I'm going to have a flex box with a divide of two which gives it this nice little arrow a nice little sort of divider there you go just like so okay if we go ahead and show this right now we've got this nice little um section right here for that okay so you can see our nice little divider is there and if we do this it turns into a nice dark mode divider okay then we've got our P tag with a description of the article okay now obviously if this had an idea I would probably do this a little bit different but in this case uh we don't actually have IDs for this from this media stack API so this is why we've done it right so everything is looking pretty nice and if we go ahead and move a bit bigger you can see that we haven't got the the section styled correctly so I'm going to add a bit of styling in for the section a bit of responsive styling so you can see Flex column it on a mobile device so in this case like so let's do it right here so if I refresh let me Flex column and then if not it's going to go into this view right there so I think I've mixed up one thing here so I want to show you something so in this case um my header title okay oh yeah header title this one I need to create a header title class so go into our globals.cssr and we need to actually create a header title style okay now for this one I've actually gone ahead and done the legwork for us so I was wondering something don't look right here at all right so I've got a bit of styling here you can feel free to pause the video and literally take that that's what I was looking for right so in this case you can see we've got our news report and if it's bigger on the on a mobile view it goes Flex row otherwise on a phone view it goes Flex column well that's pretty great well that works the way I wanted it right now you can go ahead and optimize the images to change size and all that kind of stuff based on you know the clarity of the image but in this case for example a bigger image is going to show and then it will just go ahead and show it like so okay so you've even got the buy here you can see the editors come in and all the news is coming in so this is really cool right and if you don't have an image it will simply not show it right so here you can see look at that see and if it doesn't have the image right now we've just got an ALT tag pop-up okay but you can feel free to add in a ternary operator to have your own image and stuff like that you can feel free to extend this as much as you want okay so that in fact is the page that is done with uh I'll put something a bit more you know nicer on there that in fact is the news article page done okay next up we're going to do the search page right oh my God some of the news isn't positive I'm sorry guys I have no control over that right so at this point we need to do the search thing so the search page so now I've already got this functionality where if I'd open like World Cup hit enter you can see I get 404 but the search with the term World Cup comes up so let's go ahead and build that page uh Jay says all the depressing news had to pop up now I know I know so in this case we're going to create a search page so search is a folder inside of it we've got the page.tsx and what I'm going to do here is I'm also going to actually have something pretty cool I'm gonna have a um um I'm gonna have the a custom layout and the layouts Stack Up on each other right so I'll do that in a second the rfce and this is going to be the search page we don't need this all right and I'm going to show you why I love this so much right because you're gonna you're gonna be like wow that's all we needed to do right because we've done the coding in such a way where it's extensive it's reusable so really I want you to enjoy what we're about to do right now okay smash the Thumbs Up Button if you find what I'm about to do very cool so imagine at this point we're going to import our fetch news function and the News list components which we already created earlier right everything's created earlier and remember because our fetch news function was created in advance to support keywords categories all this stuff well now all we actually need to do is make use of it right so we're going to pull out our search params from the props like so in this case we've got the term string that comes through and then what I'm going to do is I'm going to have a fetch call right so just like I had in my home page right I had a fetch news call where I passed in categories well in this case now I'm going to have a different fetch call and it's basically going to be for the general so I'm only going to search through General right so we need to make this an asynchronous function you can see I'm making a asynchronous score I'm passing it I'm searching through the general stuff if you really wanted to you could actually put past in all the categories like I did previously then we're going to pass in the search params term and then we're going to say true because this is going to be dynamic data remember the third one is dynamic right so this will server side render this response now what's awesome right I can go ahead and pass in my news list pass in the news and I can even have an H1 tag which has search results for the term and we've already done all of the header title reusability letter before as well so just like that because we coded it well you can see barely any code here but guys check this out check this out look at that it automatically Works off the box if I type in YouTube hit enter bam I get YouTubers if I type in uh Microsoft we should get Microsoft Microsoft tech support there you go scam oh man okay right so again I don't know why everything's good depressing this week but Google look at that wait this is amazing right so what on top of Google Search is the news is coming up right but the World Cup is the topic right now so there you go right so we've got the World Cup news right look at that the what's incredible about this is you see just by coding things correctly then we don't even need to write a lot of code the reusability does the work for us and just like that is so damn powerful so literally what was that like five minutes not if that I just built the whole search page because we built things correctly in the beginning so that's the importance of doing it correctly and because we've got the new layout component we don't even need to mess around with that anymore alright so it's truly truly Game Changer in that aspect right so in that case we don't need the layout component right we don't actually care about it this works perfectly for us so that's done now I guess we have the aspect of what happens if I click on entertainment right it's easy oh that's not ideal well that's not ideal that's not what I wanted so at this point now I actually want to go ahead and have um something a little bit different I want to have the actual page pop up right I don't want a 404. I'm I was thinking that's why I went a bit blurry there and then I'm going to go ahead and basically have the following so in this case I'm supporting something slightly different I've got a dynamic routing param so I've got news forward slash a dynamic value it could be entertainment it could be something else it's different from a query pram so in this case how do we support Dynamic routing inside of next year's 13. a very simple in fact here we have news then we have another folder inside of it called um category so this could be whatever you want it could be ID it could be category in this case I'm doing category now make sure you click on that and then you click add new file so this is not inside news it's inside of news category then page.tsx okay we do an RFC and now inside of this page what we can do is we can say this is the news category page okay and as you can see now if I refresh we get the news category page on its name and also look how our focus is working so you see that our focus is actually working now because we set it up earlier to do so the is active prop right now this is again just because we've done it earlier in the correct way it works exactly as we needed to we can go ahead and clean up our code we're going to acquire our type definitions for our props and we're going to go ahead and destructure the following out of our props so params are passed through as a wild card so that wild card value whatever it was called so in this case it was called category right so this was called category if it was called ID then the type definition should have to be ID instead of what we have here okay so this would have been ID if it was there and then what we're going to do is destructure it so we've got our category right and very simply I'm just gonna go ahead and import the requirements that we need so I'm going to go ahead and import the required fetch news news list that we need and then I'm going to do the fetch the basically again as I mentioned we've done all this hard work before we need to make this asynchronous so we can do a server side rendering okay so in this case that fetch news category and because again this is the beautiful thing about if you code this is what I want to stress guys if you code well look how simple the code then becomes I look at this right code news news response weight fetch news and now what we can see is if I go down here I'm gonna have H1 which is simply going to have a header title with a category on it so it'll tell you what the title is and again reusable Tailwind component Uh custom names and then we've got the news list itself okay so if I do that now and I hit refresh Health news if I click on sports sports news if I click on entertainment entertainment news and just like that that works brilliant right so we are almost almost there but there is a thing to know now because we have certain pages on our website which use static data in particular all of the genres General business entertainment Health Science Sports technology all of this stuff is basically we could technically do we could basically pre-build these Pages at build time right so if I was to do it right now these won't actually be pre-built right so basically the first user is going to get this long annoying weight so what we can do here is we can actually tell it I'll tell you what you need to pre-build these Pages at build time and then what it will do is it will enforce the ISR rules based on the fetch news because we're already we're already enforcing it here so this will take care of the ISR element so the incremental static regeneration which ensures that the cache is always validated within 20 seconds if or you can however long you said I do if you're if we don't pass in is dynamic otherwise it will fall back to server-side rendering but in this case at this page I watch I want to pre-build these pages right I want to pre-build them so what we can do is we can use a special function here from next.js13 called export async function and the actual name is called generate static params so this is golden right this is actually a golden sort of thing that we must use here and what I'm going to do here is I'm I'm going to import all the categories because that's how I know which pages to go ahead and do now all this requires is that we part we just need to Simply return a mapped function of all of the different categories and it has to be category it feels idea I'd be giving ID back and so forth right so in this case I'm going to say return categories and there you go that was actually the one so in this case return categories dot map so basically I just need to return it in a specific criteria so in this case I say for each category I'm going to return an object now in this case you can see it's saying params but really the key here is going to be whatever your wildcard is so in this case if this was ID the key here would be ID okay and then I'm going to go ahead and say the value in this in our case is the category right so in this case you could pass in like imagine if it was if it was ID here it would be ID but for every single item it's going to Loop through so in this case ours is just category okay and this will literally tell an xjs that you need to pre-build all of the pages for basically it will go through and it will build localhost three thousand however the domain is news business it will then go ahead and do the same for news entertainment it will then go ahead and do the same for news General it will do the same for news Health it would do the same for new science it will do the same for news technology and so forth right until we're finished so now next.js knows to go ahead and pre-build all of these right so it knows to pre-build these pages right and then after that because the fetch had the revalidation rules inside of it it will then keep those cash values up to date so I'm going to show you and prove to you that this is actually what goes on and I think after that we're actually done so I'm going to deploy off that so we're actually doing incredibly crazy right now so let's go ahead and power through this I'm going to show you right now how we can prove that that actually works the way it does so let's do that right now so uh uh we're gonna we can leave that running we can close this one and as you can see every time I run through it does what we need to do oh and we actually need to eventually remind me please we need to go ahead and change this to a live timestamp in fact before we deploy let's do that right so let's do that right now before we deploy so I'm going to create a live timestamp component which is going to replace a lot of our interesting things right so I'm going to go ahead and create a live live timestamp component right so lifetimezone.tsx and what I actually need to do here is install something called a react timer go right so this is a nice little uh a dependency called yarn add react time ago and what I'm going to do is I'm going to basically create a functional component called react timer go and this is what I need right so it's going to have a some it's going to take time as props and it's going to return the timer go uh component like so but here you can see it doesn't have the correct time definition so I need to copy that one I'm going to do yarn add Dash D capital and that's because we only want the type definitions for the developers right we don't want it in the production build so you can see that gets rid of the issue now for the Articles so inside of the Articles where we had article published app now all I need to Simply do is go ahead and pop in my um my new component so here I can simply say inside of the P tag I can go ahead and pop this open pop this open and I can go ahead and say live timestamp and I can pass in the the article like so all right and this one is actually going to be the um this takes some time there you go right and just like that if I hit the refresh button oh sorry I need to actually run the app so yarn run Dev we should see a live relative timestamp of when that news was published let's do that right now so you can see okay six days ago perfect if we go to our general news we should see the most up-to-date information so 30 minutes ago this one was gone ahead and reported 30 minutes ago that one was reported and so forth right look at this 39.44 again I have no control of the news that you're seeing right now that's just that's just real news sadly all right so in this case some of the stuff there I have no control and we also need to do that for one of our articles so in this case here where we have a timestamp inside of the page we're gonna do that over here as well so inside of the article page I want to do the same thing where we had our article published at so same thing happens here I'm going to say live timestamp and here I'm going to pop in at the time so time equals article published up hit save and just like that 32 minutes go relative bam just like that incredible I am incredible stuff all right so now we've got the timestamp implemented everything's looking damn beautiful we've got the search functionality then so World Cup hit enter it will go ahead and search that page right now so bam Works through we've got this Dynamic effect going on we can go ahead and even check out the individual sections so if I click into sports it highlights Sports and notice how it kept that there because it didn't even re-render it then the new streaming technique inside of um next js13 we've got this lovely ability here to go ahead and change the color of the cards like so really beautiful stuff right and in fact I need to add a shadow here because that's the only reason that it's looking a bit funky right now so the article itself I believe it needs a shadow so if we add a shadow larger I think that might do it for us let's do that right now know I think in fact yeah if we had a shadow large that's a little bit more clearer yeah so Shadow large a little bit nicer um and then on the bigger screen we can even do a shadow XL there we go all right so that's the only reason why it's a little bit tricky to see there but now a little bit nicer to see the spot right as you can see the nice little there you go that's a bit cleaner to see now we can actually see it popping out a little bit if you really wanted you can add a you know an additional thing but I kind of like that look okay so at this point amazing stuff um what if we want to benefit from the Nexus 13 um loading right so oh my God there's some news from oh God okay so um what we found the benefit of the new loading section so if I want to go to sports for example let's go ahead and introduce the new loading State as well so if I introduce a loading.tsx page this is a brand new feature in xjs which basically means that if I'm blocked at any point so in this case I'm blocked yeah it's awaiting the news to come back whilst it waits I can have a loading screen on the page and any fashion that I want so I can go ahead and do the following where I can actually have a component that looks something like this so I can have a functional component and it just says loading news feed right let's go ahead and hit return now check this out guys absolutely incredible stuff watch this right so if we refresh and let's just go back to the um the home page loading news feed did you see that it says loading news feed look so it's very fast but if I was to throw the connection I was actually going to try and optimize it which is even better but in this case it's so fast it still does it right even if I do slow 3G it's still going to do it um yeah it's still going to do it because it's very clever right how it does it it's it's actually caching images and stuff as well so let's do no throttle and I just want you to catch that loader in the beginning right so if I was to go ahead and do the following I mean what we could do here is to force it right I could actually go ahead and say page and I can use GitHub to say set timeout for three seconds right and then you just get that code quickly there we go so let's go ahead and do that now so if we look at that loading news feed three seconds later bam look at that so if there's ever a block here in this case so if I do this now that loading news feed bam and it's using react suspense to do that so absolutely incredibly powerful and you also have one for the loading state right so look at this absolutely incredible stuff we have our awesome popper Farm live news app with everything next year is 13 has gone down powerful right steps in incredibly powerful allow us to create graphql API all that beautiful stuff just works seamlessly right so I'm going to show you now how the quickest way that I know how to deploy this now you can do two approaches here you can go ahead and deploy using the virtual CLI which I made a whole video on you can watch it somewhere around here or you can deploy to GitHub and then you can actually connect your GitHub repo there's so many ways to do it but I'm going to show you the Versailles CLI way because it's kind of cool right so firstly you need to install the for sale CLI I'm not going to run through that you can simply do that by heading to just type in for sales CLI in Google it'll show you how to install the CLI it's npm i-g of the cell and then you can go ahead and do that but once we've done that I've already logged into my other cell um don't have a cell uh login right so in this case you could do Versa login I've already done this so now if I type in the cell right check out this right if I click inversell setup and deploy so in this case I'm going to say the news app on YouTube yes enter right loading Scopes so I'm already logged into Sunny Sanga on the cell so at this point I can go ahead and click enter all right and then it says link to existing project I want to click enter which is no I don't want to link it to an existing board what's your project name that's fine we can do that one okay great what directory is your code located in it's in the current directory enter fine setting up the project they upload some of the data there you go and now you can see it's going to run next build next therefore and so forth do you want to modify these things nope I'm happy with that it says deploying the news app so at this point we should have done um a build first to be fair but what I want to show you is this is going to fail because we haven't set our environment variables so I'll show you how an easy way of doing it so go into your environment variables right now click it and I'm not going to show you right now but I'm going to click it I'm going to copy my environment variable so I've copied them right now I'm going to come back okay so I've copied my environment variables they checked I've done command a and I copied everything go into your inspect all right so it gives you a little link here to inspect the build process this is so sick right it's so powerful what I want you to do is go to news app YouTube uh click on that top bit click on settings go into environment variables and simply click do command V right so paste so I'm going to go ahead and paste right now right so I'm going to show you what just happened right so I'm going to pay I clicked paste I literally don't command um V paste and then I'm simply going to click on Save and I'll show you exactly what I did there right so at this point I done command V initial it copied in like so and then I want you to click on the save down here and you can toggle in the different production preview development environments and that kind of stuff as well okay so check this out someone says is it live it's definitely live right so I'm gonna just hide that for a second I'm clicking save okay and now you can see I have those environment variables loaded here okay so what we should see here is you see it failed now the reason why it failed is because of the it didn't have the environment variables in there okay so I want to show you two things that just happened firstly if I do the cell environment pool I can even pull those environment variables down right so at this point if I go ahead and open up this new file that came in dot m so I'm going to open that up right now this is actually created and I'm just replacing my environment variables here so you don't see them so in this case this pulled in the following environment variables into the file it pulled in all this stuff right now the ones that you remote paid like the most interesting ones were these two these two are the ones I just added on the CLI and this actually had my values in there I promise you I had my values in there okay so I'm going to go ahead and undo those and now what I'm going to do is I'm going to say the cell I'll let you know I'm going to do yarn Beyond build okay so yawn build you could do for cell Builders I really don't matter at this point um yarn build so I'm building it out and now I want you to pay attention to is remember I told you that generates static params and notice how it builds out the pages for each other so the console logs are coming out because I still left the console logged in you should probably remove those but look what I said remember I said it's going to build out those pages it did just that it built out those pages as stack generated pages and then it's got the refetch mechanism under it so it keeps on caching uh keeps it up to date right so check this out now that we've got the build in our output folder I can type the cell bam hit enter and wait for it guys right now what this is doing the vessel connections already made the build log is right here I can go ahead and open this up like so thank you so much for Apple Adamo for the 10 donation I appreciate you dude thank you so much all right so I want to show you two sides of the story right so at this point now while this is loading up you can see this will the CLI will tell me what's going on or we have the build process right here so the build process is literally building out this would literally build the pages so actually to be fair I didn't need to do yarn build it was actually running the cell build on the there and anyway right so let this run hopefully we have no other issues but if so I think we're damn good right this is actually incredibly good so far collecting the page data it should go ahead and successfully collect all of the data right so hopefully no issues come on yes there is in my log so I should probably get rid of those and then look it pre-built the pages done what we needed to do build was completed and then it's going to go ahead and push this out to a URL so wait for it wait for it guys wait for it hey there we go and look at that and it even gives me the preview URL here now I did show you how to deploy a CLI app to production you can check out the video over here it's going to be linked in the description Jay's gonna check in the chat right now that's how to deploy any app with the vessel CLI but I want to show you both right some of my videos I show you how to push to GitHub but just wanted to show you how to do CLI I think it's really cool so this is on the preview environment you can push the front by doing the cell dash dash prod all right but let's go ahead and check it out bam just like that just like that smash that thumbs up button oh my God look at that beautiful absolutely beautiful dark mode light Mode's working if I click on Sports just like that works if I type in Ronaldo just like that wait for it wait for it you can add a loader in by the way there look at that just like Ronaldo news comes up bam perfect stuff absolutely incredible light mode dark mode everything that we wanted inside of a build today like look at that guys absolutely incredible boom I hope you've enjoyed that that was damn powerful let me do a quick run through of exactly what we did today we went ahead we bought this in beautiful UI absolutely incredible UI it's live right now you can believe you can go check for yourself why everything's working the way we expected it we got dark mode we've got server components we've got client components we've got the new app folder structure inside of our app I showed you how to deploy with the vessel CLI we had server component logic and when and how to convert them to client components when needed we showed you the provider pattern in the first initial layout so you now know how to do providers with the client-side bar right we have Dynamic page ring in a bunch of different situations like you can see over here with the category we pulled our information from the media stack API so we had all this beautiful knowledge being passed in live data news from the media stack API steps in came in incredibly powerful to go ahead and power this up if you want to go ahead and use it remember the first link in the description use that link when you sign up to step 10 because it's going to help support foreign be honest with you it helps us out I hope I can keep on giving you free content if you do that so it helps out a lot alright so make sure you use the first link in the description you can check out the new dashboard absolutely incredible you've got code Snippets all this useful stuff and um yeah there's so many questions that people are having I can see in the chat right now and remember guys if you want more information if you want answers to those questions head over to propertyatt.com join our community and our Flagship course if you want to go ahead and build everything out right so zero to full stack hero is where we have a game changer level of community right the course is jam-packed with over 100 hours of content everything you could possibly want to learn from those web development is in there and I teach weekly coaching course inside of there so make sure you definitely make sure you definitely check that out oh I can I can hit myself what the hell okay um I'm gonna mute that what the hell's going on so make sure you definitely check this out and then um if you do want to make sure oh yeah that was me there okay I was wondering why can't I hit myself all right make sure you check this out popularity.com course and if you want to go ahead and get daily coding challenges into your inbox then go to the first link at the top pumpereact.com forward slash the University of code it is live the literally the first one of our first I know another daily coding challenge goes out in about an hour and 20 minutes so if you want to sign up and get your first coding challenge an hour and then every single day you're going to get daily coding challenges over at the University of code I promise you we put so much time and effort into this and this has been the by far one of the best ways that we've seen students achieve their sort of you know development in terms of their fundamentals their JavaScript knowledge just by having daily problems given to them so make sure you check check out the University of code links to zero to full stack hero links to the university air code links to step then setting up everything is in the description if you want access to the code feel free to go ahead and check out the proper GitHub repo and remember if you want access to the music playlist the University of code we give it to you for free once you sign up right so thank you for tuning in today absolutely incredible we just pushed over 400 likes that's the way that I like to end things off I'm going to end this off the way that we do the only way we know the proper fan way thank you for tuning in guys you learned next year's 13 typescript Tailwind all this incredible stuff like dark mode just a final final look at the build today that we went ahead and built out incredible really such a fun build to go ahead and be able to teach you guys and if you are watching this on the replay please please please drop a little rocket emoji to show me you made it to the end of this video as always guys it's your boy Sunny AKA huffler react and I will see you in the next video make sure you go ahead sign up to this sign up to this build right just do this build right make sure you do it add it to your portfolio get that dream job crush it and I hopefully we'll see you in Xerox full Sakura but thank you guys for tuning in here's the papa fam build as always guys I'm gonna rock out the way we know just Chuck your chime right now what are you watching from if you're still watching and uh it's been a pleasure always today guys I'll see you in the next one peace [Music] foreign

Channel: Sonny Sangha

Views: 57,940

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

Length: 158min 30sec (9510 seconds)

Published: Wed Dec 07 2022