Next.js Tutorial - Part 8 | Static Site Generation (SSG) | getStaticProps and getStaticPaths

hello youtube today we are going to talk about static site generation in next j/s you may be familiar with this term if you ever used Katz bjs but if you don't know what this is think of it as you instead of serving your pages at runtime okay so your user goes to a blog post or your e-commerce website and instead of you go into the database to get the product they want at runtime you do that once at Build time and then at runtime because the product is the same for all the users in your website you just serve them with the HTML of the product okay you can still enhance that HTML with JavaScript so it's not purely static as just HTML and nothing else no you can enhance that after after the fact and so to show you an example I build this microphone shop over here okay so this microphone shop is literally building on top of get static props and get static pads to new methods in excess that we will see in two three minutes time so what do we have here we have a page with five microphones in reality in our database we have 18 microphones okay and we are displaying them in pages of five so when we do the first load you can see in our HTML that we receive we can go over here to the network refresh the page and you can see that the HTML we receive is immediately the five microphones okay so we receive only five microphones and nothing else okay the last one is this blue Yeti microphone so this is the one we are saying if you navigate to page number one for example or page number two you will receive five more microphones and those five microphones once again this was statically generated okay so we are just receiving this HTML already pre-rendered at build time there is no server-side rendering in this process that I'm showing to you if was built for example at bill time in Jenkins or Tim City or Circle CI whatever built this system that you use okay so you can also click and navigate even though the second page I didn't spend too much time doing styling but you can see that you have a full ecommerce website with just static files so you don't need to spend a lot of money in servers imagine that you have 1 million requests a month to this specific page if every single time you need to go to your database your database needs to increase you need to pay more for your database while you do it in SSG why so static site generation you just serve HTML files from a CDN for example so it will be super fast to reach your users so you can also use this concept in conjunction with normal applications for example you can have some pages that are building this way statically and you can have another pages for example your dashboard for your users you can be using your traditional way so these will work really well in applications or at least in pages that are the same for every single user ok so with that in mind let's now jump into vs code where I will show you how to build this application over here in vs code we have a new next application I already went ahead and created these folder with Sun microphone images and on top of that I created this migration file with a database table called microphone with some microphones inside I think they are 18 microphones with their brand their model their price and a putt for the folder over here in the public ok so the next step we probably should do is to make sure that our database is well created so let's say test migration for example it's probably a good name and what are we going to use well as I said we are using sequel Lite like we used in lesson number 4 and number 5 so if we type secret light over here and we open sequel ID you will see that we have a method called open okay so we can copy these methods over here and what's happening in this method while I'm typing this is that we are opening the sequel Lite connection okay so let me just import this from sequel Lite and let's do the exact same thing with sequel Lite 3 because we will need both sequel Lite and sequel Lite 3 so now that those two are imported we can say sequel Lite dot open so at this stage our database connection is open then what we want to do is to migrate and let's just say that we want to force that migration to make sure it happens and now we can test that the migration went through and we have all the microphones in the database doing the typical DB dot all select star from microphone right and if I do console dot log I can do Jason dot stringify microphones no oops no and we will use the typical first places to be then Jason okay and I was about forgetting these await so now if we run that one and we say test migration we should now see oops this file name doesn't exist so let me say a proper filename microphones dot sequel Lite I think it's a good name because we are selling microphones in this application so I will just expand this one and you can see that we have the 18 microphones that we created so this is good news right the next step we probably want to do is to make sure that we will create a type script model for our microphone so when we send a microphone to the client and to the server so it will have types so how to do that we will create an interface called microphone and that interface export interface microphone and that interface will F and I which is a number we will have a brand which is a string we will have a model I think I created a model right let me just confirm I can even copy pasties it's easier I don't need to remember everything that way so it's a string then we have a price which is a number and we have an image URL which is also a string so at this stage we have a model for our microphone so now we can go to our sources we can even close this one let's just copy this because we will need that bit and we can even go to our source pages and index which is the root of our domain so over here we can say that index will receive index props will receive some microphones and it will be a type of microphone right so we can import this one and now when we do this so microphones we can say that it is of type index props so over here whatever microphones we are going to receive we will have them already type this microphone array which is great right the next step is we can go again to this sequel light documentation and if you see they are teaching us how to export these as a function because we don't want everywhere to be doing ODB that open passing the name of our database then reading is just too much too much boilerplate let's say so we can come here to our source and in our source create a new file called open DB probably it's a good name isn't it so we have this open DB file okay and we can do this upper case just too much so this one now we will point to microphones dot sequel right so it will point to the exact same place that our database we created over here so this is on point so the next step and this is probably something that will be like what so let me just show you why you will probably say what get static props and we have get static props okay and we say it's a sink context and let me just return this for typescript you know not compliant so we will say props microphones and then empty arrived for now that way that doesn't complain at us okay so what I said that you will say what what's happening over here so now in these get static props we are sure that we will only run on server side so we can do something crazy like this VB equals to open dB okay and this open DB now we can just type any query you want over here so I'm lazy as you know so I will come here and I will even copy-paste this one okay so I will copy place that one so we can just say over here microphones and if everything goes right we can say pre tag we close the pre tag and say Jason dot stringify exactly the same that we did before so microphones no four but this time it will be in our browser right so oops I closed this in the wrong order so wrong order now it's in the right order right so let me say npm run dev and while that one is running we can even go to our browser just to force it to run okay and while that one is running and compiling and doing his thing we can just come here and see what's happening over here we have this get static props and these get static props will only run on your server side on top of them this is quite different from get initial props or get server-side props because this one these get static props will only run at Build time okay it will not run at run time these runs at build time so whatever we send over here to our component next will generate some HTML and some JSON with the data we sent and if you want you are not forced to do this but if you want you can in a CDN so you don't even need to have a back-end server to serve this first page for example which is great if you have let's say more than 18 products in my case and you have let's say 300 products after we do the second page we will come back to do some small optimizations ok but for now let's keep it basic and by now our next day a server should be running and it is we have this by G over here it's probably not the prettiest page you will ever see but you have a page over here and this is the first part so we were able to show data on our browser if you open the browser and let me just increase the bit the font size for you and we refresh you can see that the first load is immediately our data over here so everything is coming from our back-end server it's good we have that bit done so what can we do over here now well we can do it a bit nicer right so let's just say this let's say microphones so return let's say a div and we can delete this one because we don't need to add one anymore and we will say microphones dot map and over here we will have a microphone so we can say link and inside that link oops we can have an anchor tag let's import this link and this link is coming from link from the next slash link ok and over here we can say a giraffe equals to slash I D ok this doesn't exist yet we will create it in a in a minute ok and over here we can say oops okay slash microphone slot dot ID okay so over here what we can say is microphone dot brand brand Plus microphone dot model okay and so over here now we are looping through all our microphones creating a link tag and in that link tag we have inside brand and model so let's open our browser again well it looks ugly but at least we have the URLs over here so if we open that we already have all the URLs that we are pointing to so right now I will just commit what we have over here to our github so you can follow step by step and I will come back in a second the next step even before we start to do some styling with material we should probably do the second page in order for us to understand how it works so let's go to the second page and let's call it instead of slash ID let's call it slash microphone slash ID so we will have to change these in a bit but let's just go directly here and create a new folder called microphone and inside that microphone folder we will call it ID dot tsx if you remember from the first part of this series that square bracket means that we have a dynamic parameter so over here we will do export default function microphone detail for example and we will return just to test if it's working hello world okay so let's go back to our browser and let's say microphone slash one and doing microphone slash one I can see that now I have that alle world over there it seems like it's working right so the next step is for us to say okay this microphone detail will need some properties right so let's do export interface microphone details or detail map details expand microphone and microphone is our interface if you remember and this interface already has the ID the brand model etc samia's linked to link will complain about the fact that we have an empty interface over here if that's the case in the company you are working you can just do this type microphone equals to microphone and those two are equivalent okay so which one you do you are good to go so over here we can site ID name brand ah sorry not name brand model I don't even know how to type brand anymore brand model price and image URL and it will be of type microphone detail props okay so now that we have this one over here right we can even do something nice let's say that we have a div and we will create five days right one two three four five yes five divs two three four five and we will do ID and let's just copy this one over here and let's say brand the next one is model and the next one is price and the next one is image URL right so over here we are printing all the properties from this component but now it's slightly different than the previous page we did because the previous page we did was just a single page that we were generating right now if we just do this export cost get static approps of get static props okay and we do a sync context oops not that one I'm sorry a context equals to this one and we can make this terminal slightly smaller if we now say okay I even know the type of properties that I'm going to return so I can even say which type of properties I'm going to return and now that I know which type of properties I'm going to return to my component we can even say okay so props and props will be ID that we can say one etc even before we do that we can go to our database once again so let's say DB open database right and over here now we want one microphone alone we don't want all the microphones we just want one so we can do a weight vb.net instead of all and we do select select I don't know how to type anymore select star from microphone where ID equals to one parameter okay and the parameters that we are going to receive from context okay let me show you ideal context thought parameters dot and in our case we just care about the ID and this ID will be of type string so we need to take care of it so let's say that we have it s type string right so we can do just something really simple like a plus before and it will do the trick for us so if you come here to the console and you have for example five if you put a plus before it kind of a parse int okay so it just cleaner so if we have this and we are already returning the ID and we have a microphone over here so what we can do is we will return the microphone itself and now these one this component will have access to the microphone from the database and that's good if in the context we are already receiving an ID so in order for us to receive those IDs we can have export Const get static and this one is not props is static parts okay and I saw that I have a typing a typo over there so this one is get static pads and we can also put types over here in our case it will be an ID okay and it needs to be of type string because when we go to a URL in our browser it will be a string that tree that you put on slash three or slash four it's a string behind the same right so let's say I think function okay and what is the format of what we returned here okay the format it will be we have a fallback that for now we are going to say Folsom and over here we are going to return an array and this right now inside as an object and that object has something called params which are the params we are going to receive there okay and these params in our case it will be an ID and for now we can just say 6 to test the 6 ok so we have that one so what should happen over here we can even say - ok ib of 7 so that why we have to and you can see oops in the wrong place oh my bad so runs IV of 7 ok so let me just event this one so now we have two IDs let me explain step-by-step what's going to happen at Build time next year's will see that you have a get static but looks inside this get static paths and it will return these paths one by one to our function called get static props these get static props will run and let's say the first time runs with six it sends six to our microphone detail our microphone did I will render sweet six and the second time this function the get static props will receive seven it does the query for seven gets the microphone with IDs seven sends the ID as seven to this component and this component renders so we will have to HTML generated with JSON files let's go to our browser and see what's going on over here so if we refresh at the moment we have a 404 for the one which is expected because we are only sending six and seven putting six we now see everything from our six waiting seven will also work okay putting seven will also work putting eight will now file right and you may ask well so we need to send all the IDS we need here well it depends on your application imagine that you have an application wait I don't know 300,000 products and only 20 of them people are going there every single second well those 20 or 25 or 30 products you can put them over here okay people will seed those 20 30 superfast and what happens if you want the others to still work well that's why these fallback exists if we put this fall back to true look at what will happen by default on build time we are only building still 6 & 7 but at runtime ok if I go to let's say 10 ok I put 10 over there and then worked but look at what happens let me see if there is something in the terminal to show you so we don't show anything because we don't have any console on but what's happening is at runtime next we'll run this new value over in the get static drops in the server ok it will create kind of a web service for you and sends the JSON properties to you so if you see on the network you receive this JSON properties over here and you you receive them as SSG static site generation ok and it's true for the ones for example the number I think it was 6 and 7 right if we go to number 7 ok we also receive sorry we received them directly over here so it's already pre-built going to let's say 12 or 13 I don't know 12 is a good one you see that the preview is empty after a while almost immediately after we do a call to our server oops wrong one we do a call to our server ok you can even see that this kind of web server created from next for us ok so it will generate these JSON that we can download and then we put it in our page when you are using this there is a property in the router if you want to use that one okay called is fallback so let me show you import use router from next slash router okay and we can say whoops my bad I'm doing too many typos today I don't know why so if we say on the user router we can say router equals to use router right and in this router you can see that we have something called is fall back and this is fall back will run for all the paths or all the URLs that are not specified on this one and by the way I can minimize this one to get us some space so over here now we can even say something like if if router dot is fallback right we can say return and now in the field in the future not now in the future we can do something nicer but for now we can just say loading I'm sorry for the wait okay something like this it's probably good enough right so if we go back over here and we do for example let me just refresh and now let's do 18 okay so for example 18 look at these space over here I can even increase the browser for you oops a bit too much and when I click on 18 you will see that loading I'm sorry for the white and then when it's done you see it if we go to number 6 and number 7 it immediately shows what it has to show there is no Wis fallback running over there the good news is if you read the next year's documentation usually now that I went to PI the number for example 18 it already knows about 18 so the next time it's in kind of a cache and it's served immediately to your to your client okay so over here now let's just make this fully functional because at the moment I think we are our coding it yes we are our doing it so what can we do we can come here and say the following Const microphone IDs okay DB we need to open the DB okay let's copy this bit I'm so lazy so I can cite microphones all and I did these over here right so now I have all the microphones and I just need to do one thing cost microphones microphones IDs equals two microphones dot map and now over here I want to map my ID to string okay because we need them to be strings okay so we will have to do this I'm sorry so we will have these IDs as strings or even better right because we will need them in this specific format so we can copy this one just do these and let me just do another enter and so we can do return return that format and we will do a dot ID dot two string right and now we have this microphone IDs that we can pass over here in the pot and probably in the future we can have better namings for these variables because this probably should be putz and now if we have pots over there it's much nicer this way right but don't focus too much in naming by itself for now so if we open this one over here and we firstly refresh this one we shouldn't see the fallback anymore and the fallback is gone as I said three minutes ago if you have a really really big website with 300,000 you should use really specifically just the ones you want put the fallback to true I don't know why open my command line put the fallback to true and having the fallback to true your builds will be much faster because don't forget all these runs that builds time so if you are putting a lot of stress in your server at build time and you have 300,000 products even if each product takes only one second to run you are waiting 300,000 seconds okay so you need to be careful in what you make running in your server versus what you when I say server at build time versus what you make to run at run time so you need to balance those the next step we can do is to start to use something like material UI to make our page look a bit nicer so in order to do that we can just kill our process that is running for NPM run dev into NPM install - - safe material dy / core and I think his material ey / icons I think so if not it will file and we will fix it so while this one is installing and let's minimize it a bit we can go to our index and over here now this URL is completely wrong so this URL should be microphone /ib the same applies over here so we will have microphone /ib we can even fix this style a bit more but for now we can ignore it we can even go to the application that we did in the 5th part of this tutorial which is over here in part 5 and we can just copy paste three files from here which is the underscore app the underscore document and the team dot j s if you don't know what those are you can watch the video of part number five but is literally everything you need in order for you to render server-side your material ey styles okay if you don't put those three files over there your browser will load your application it will look a bit weird because no CSS is being applied then when your app general initializes in your browser it will generate the CSS and it will kind of come back to life but you don't want to see that flickering right so you want your server-side rendering to immediately everything to your browser completely rendered and completely final so in order to have that we can just open these three files okay and we can just take the chance while material UI is being installed and hopefully I didn't file in the name of the libraries looks like I didn't which is good so this one is document that the Jas because at the time we were not using typescript yet but that's the good thing about next year's you can have some JavaScript files some typescript files so in our case we can have those three files as normal JavaScript okay so let's go over here and create now oops actually this should be the document dot J s2 and this one should be up dot J yes right I named the wrong one sorry so this one should be up dot j s and this one should be document dot j s right sorry for the typo so now this is the document and we need one last one which is the team component so let's click on raw copy paste this one and I was using I think the background of the pages Rev I think I was red or some weird color yes it was red so let's make it white for now you can then play around and make it look nicer on your own okay so now that we have these three documents or those three files this is document this is hap and this is the team so everything seems to be fine we can start to run this application and while our brought our server will compile our application we can just refresh this one and while that is happening we can open material ey documentation okay so material ey documentation we can go to components right and inside components the component we care immediately is the other or bar I think they call it up bar exactly and this one we want it across every single component in our application so what you what we can do oops my bad I click three times I guess so what we can do is copy this one right let me just make this two also copy the import so we can copy this one into our app dot J s because up dot j s it will be on every single page our components are inside that small component bit okay this is kind of the routing of your application every time you change component is only that bit that changes everything that's outside is not changing right we don't want it statically we want it fixed to be always fixed at the top of the screen and now we can just copy paste blindly all these imports shall we let's do this so let's just blindly copy all those imports let me just see if we don't have any class name over here yes we have obviously and we don't care about this one as well and instead of news we can call it Microsoft not Microsoft microphone shop okay or some nice name that we can think of so let's remove this one and now going to our browser we should refresh yeah we should refresh and now we have a microphone shop okay so this is looking too big but because I have the zoom for you guys okay so now it's time probably to remove the zoom and we don't need zoom anymore okay we can even do something which is to have the known dance version of it we can have a variant as dance okay and we can say where is variant I think isn't the toolbar variant to side dance and so it will look a bit smaller okay so if we do this as you saw the bar is now a bit smaller we can even remove this but we can keep it over there now we need to make our body a bit to the bottom so let's just put bit of a box and a box in a materially why it's quite commonly used to do what I'm going to do over here so I will put margin top of let's say eight times eight yeah basically every single unit of those is eight pixels okay if you don't change if you change it it can be more or less but by default is eight pixels so what we are saying is we are multiplying it pixels by eight so we will have 64 pixels of padding to the top okay so let me just import that box from material UI / core / box and this is upper case actually okay so that one will compile and now when we go back to this microphone we should have now the microphone with a small space so this is starting to look a bit nicer so the next one we can look for is the current component because the cards probably will look nice in our pagination so let's come to card and let's see a card that looks nice for us these ones with the lizard probably they look good for us so let's click here and let's do kind of the same thing we did before so let's copy this card actually we don't need the actions we can remove the actions immediately after but for now let's keep the actions let's just close everything because I'm a bit overwhelmed by the amount of things I have on the screen so what we can do is I can put everything inside here right and now I can just go to here copy paste all the imports just type script stops complaining to us okay so we do this and now type script if it's well behaved should no longer complained who has right let me just cancel these organising boards and it's still loading safe please okay so it's saved we can just do these and typescript is no longer complaining we can just remove the card actions because I don't think we will need card actions okay so we can just format these let's go to our browser just to see how it looks like okay so let's go to our browser click over here and refresh it and everything oops I'm in the wrong place I want to go to the list so if I click over here I should now go to the list and in the list we should have a bunch of cards I think 18 one per each of our components which that's what we have okay and the cards are over here so it's looking okay ish okay so what can we do after this moment well we already have the cards right and if we have the cards the next step is to start to use for example the image as the image we are receiving from our microphone so microphone dot image URL so we have that one we can say something like the halt and the halt for us it can be the microphone brand pearls the microphone model so let's say that we have microphone dots Marvel Plus we can put a dash or a spice microphone dot brand actually it should be the opposite but for our test probably is just good enough and we can say the same thing for the title okay so we can say the same exact thing for the title the next thing we can probably do is to come here and actually now we should really change this because this is the titles brand and model okay and so we don't have any description but we can just keep this kind of a lot of nipson over there is not a lot of mixin but we can leave it over there like if it is lorem ipsum okay so we have some text to look for so we have these these looks fine for now so if we are that we have the microphones kinda there okay which is not too bad they are there we can then take a bit of time to resize the photos then do in to those things but they look okay ish let me just do something which is probably putting a bit more height on our components so with 200 it should look slightly better right and yes it does slightly better then we can take a time to render or rerender this slightly better but for now I think it looks good now the next thing what we want to do probably we want to put two side by side and in order to do that in material we can use something like a grid and so let's use the grid and once again I will show you that we can do almost everything we just copy pasting from material okay so if we have a grid we can just go over here and let me just do this and then I will update dead one so if we go over here I can do agreed inside the grid we can make a container right oops I did a mistake we can have agreed instead of this div we can put the grid right we will close the grid at the bottom instead of these deep oops and we close it over the her right and so now we can just copy one of those grids right and delete all of them and now this grid is in the right place so we just need to close the grid after the link we close the grid so now we have everything that we may need for the grid let's just import this one from material ey so it will stop complaining in a second as soon as V s code understands that we did the import and so we can now format and we will have agreed this grid probably should be accessed twelve which makes sense and we can do SMS six and I think it will be quite okay we can say a bit more spicing and now we can go to our browser refresh and now we should left to side by side right let's just wait for our browser to refresh and now we have to side by side so it's starting to look a bit nicer as I say you can make it look even nicer if you want to I will not touch much more on that because then it will become a material UI tutorial okay but I can do a commit at the end of this with a nicer home page so you can play around with this on page okay but for now before we finalize the video I just want to show you you remember when we spoke about the fallback and I said immediately at the beginning that if you had 200 pages or something like that it would be super nice for us to twelve pagination well if you want to do that I will teach you how to do that pagination just in a second let me just commit this for you to have this initial one and then I will teach you how to do pagination in order for us to do pagination we can open our index dot TSX and we can think that these get static drops will F as well I get static pads like we did for the second page okay but this time instead of iterating through the elements that get static parts will iterate through the pages okay so these get static drops will just receive the current page we are on so we can do this constant current page is equals to the context dot params dot current page okay and we can say that this is of type string and this can be actually undefined as well in in the initial page okay if we just go to the root of our repository it will I always a repository sorry to the root of our domain it will be undefined so we need to say current page number is equals to current page or zero okay and now we can say plus at the beginning okay so we have this and now the next step we need to do is okay we need to have the minimum and the max of our page let's say that we have pages of five elements each we have 18 18 microphones so if we have five we have a page between one and five another one six 10 11 15 and 15 to 18 so we will have four pages in total so we need to grab the minimum of the index and the maximum of the index of that page and that's easily done this way we can do current page put current page number times okay five in this case because we will have by Jesus five and this five you can even start it probably in your database or somewhere else for now I will keep it there art coded for the maximum we will have current page number plus one okay times five so let's do a small exercise if our current page is zero because we will have the pages as zero index placed if the first page is zero the minimum will be zero up to five and we want one up to five so we can say in our query bigger instead of bigger and equals and for the maximum it will be five for the page number one which is in reality page number two we will have 1 times 5 which is 5 for the minimum and for the maximum it will be 2 times 5 which each 10 which is 10 so we can do this over here where ID is bigger than one parameter and I be smaller or equal then the parameter so the parameters will be min and Max and I think this makes sense at the moment so let's refresh not refresh let's format this one we have the minimum and the maximum being used over there I think it makes sense so let's just run our application and when we go to the first page the first page should only show five elements to us let's open these over here refresh and while that one is refreshing we can just come here just to look around to see if we didn't forget anything because this one can be string or an array of strings so when it reaches over here we are casting it to be just a string and then if it is not defined we say it's 0 and then we do the plus again the trick oops to parse to integer so it looks like it's okay right let's go to our browser and it's still compiling so we leave it over there and we can start to create another page and this one we can call it current page current page is a good name okay so we will have a current by oops I created this as a folder not a folder so as a file current page dot TSX so just for this to compile we can say function some component it really doesn't matter for now so we can say div hello our dev server also filed so let's see why is our dev server filing we can see UPS cannot read property current by job and defined and he is absolutely right because these parameters because we don't have get static paths yet they are not defined so we can do that small question mark and so it just goes forward okay so when this one builds we can come here refresh and it will build eventually we should only see five microphones and yes we just see five microphones so what we want to do now is if we do two for example which is page number two we should be able to navigate to the second page now it will file because we just returned hello that's what we have over there right so what can we do on these this page well we already have this component and there and these get static props they are working exactly as we want so why don't we do something smart over here so let's let's just do this let's import our component let's also import our get static props okay and we can do the following export default index okay we can also export our get static props okay and the only thing we need to do over here now is get static parts okay and we can say get static but which is good it looks good we can say that it is asynchronous and this will be a function oops this will be a function of that type so let's just import these bad boy over here and let's just return for an example like two pages so let's return an array let's say that the full-back is full so for now the pads it's an array with params and let's say that I think the parameters we are expecting here is current page these name needs to be the same okay and so we can come here say current page and pass the number two okay so when this builds this will build for page number two so let's try and see if this makes sense at all so way to number two I can click refresh and we got the second page of microphones if we go to page number one for example it will now file because page number one is not even defined so we get a 404 it looks good it really looks good so what what can we do over here we can just leave it like that or we can just do the query from the database let's just do the query from the database at least you will have something fully functional so I could stop here but let's just do the query from the database it's probably better so let's do cost dB goes to await open beta biasing right let's import dead one okay we import that one and we do no wait that oops not awake yet divvy that get select count star and we can call it total so we immediately distract this total okay and then we say from micro microphone I don't even know how to type microphone anymore so we get the total of our items so what else can we do with this total well with that total we can say okay we have 18 microphones so let's see how many pages can we have so we can say number of pages is equals to Matt dot sale of total divided by five okay and why do I have that Matt dot seal okay if we have 15 divided by 5 is 3 okay if we have 18 divided by 5 is 3.6 or something like that I didn't do the count the the Matt sorry but it will be probably 3.6 so even if we use a normal round it will work but imagine in a case that we have 16 which is 3.2 or something like that if we have the math dot round it will say that we only have 3 pages which is not what we want we want to have 4 pages because we want to see all our elements so if we have those number of pages what can we do immediately after this one well we can pick this one and convert those number of pages in something like this ok so how can we do that well we can create it this way Const but equals to array and when we do new array okay sorry all right yes when we do an array the array over here receives the number of elements that we want to create so if I do this it says you can see that da-rae Lent and URL and for us if we have three pages we can pass it over here okay and so now what we need to do is to fill the array with something and I will explain you why we need to fill the array with something so if whoops I put our plane mode for some reason so if we go over here and we do new sorry array of three for example we have the array with empty okay and this is from somewhere else ignore that one okay so what can we do we can say fill and now that we fill the array with something we can do map and from this map we can say okay I ignore the value but I care about the index okay and so caring about death index we can do the following we can say that we will return parameters and inside those parameters we will have a current page oops we will have a current page and that current page will be index to string okay so doing that and opening this one we can see that we have page 0 1 & 2 but if you remember we said that the pages will start on 0 which is fine but the page number 0 it's already there we don't want to touch that page right because we don't want two different URLs to the same page that will be bad for your SEO so what we want to do is to add 1 & 2 but not 0 so what can we do we can come here okay let me go back to this over here let me just copy what we were doing over there because it's entertaining what we were doing so we can go over here paste that code and what we can do is okay so we do plus 1 and at the same time we do plus 1 we do minus 1 over here and this one should be the number of pages otherwise I will be art coding it so now the number of the the pads over here should just match one and two and this is exactly what we want we should have one two and three let's compile go back to our page and now page number one is there page number two should be there as well and page number three should also be there right with oops I clicked enter again my bad so we should go to page number three and page number three only yes three items at the moment because it's those three sure microphones and by now you probably see that I'm seeing a lot of microphones but if we go back to 0-0 should be a photo for because we don't want the user to navigate through this one but if they do like that they will see the first page as a non-work I will leave for you to start to put a button here to say page back and pay it forward because now you know the basics you just need to on the button to check in which is the current page you need to pass also the total of pages and checking the current page for the zero it's easy so for the back button is easy you can just check if the current page is not zero if it is not zero you can have a back button for the next bite you just need to check that this current page plus one is still not bigger than the number of total pages and you can have a button here to go back and a button over there to go forward or at the bottom if you prefer it really doesn't matter so I really really hope this video was super helpful to you I think this is a really nice feature from next as I said at the beginning I think some people will probably move away from Gatsby to next Jay s just because of this feature because you don't need to have any knowledge of graph QL or something like that so you can also use these type of features with get server-side props or get initial props so imagine some pages of your application are super static and you only change them at Build time well you can just build some of the pages like this the other ones you still do them in the old approach which is not that it's just the the older approach you do it that way and you can have an I breathe application where some pages are static some other pages are dynamic you can even have pages for example internal pages in your application after you have login so you don't need to have the Google SEO or something like that you can even have those pages just doing a normal HTTP GET over here at the top let me just close this one where you just do for example if you are using SWR which we already have a video on the channel you can do a call over here right you can have data equals to use SWR of slash cement point and you can just do that even though these will run on your clients browser at runtime not at Build time in your Jenkins or tri VCI or whatever you use circle CI whatever but this is super powerful it can save a lot of processing power in your environment so I really hope this was helpful if you enjoyed this video please like the video subscribe to the channel and I will see you again next week bye bye

Channel: Bruno Antunes

Views: 19,815

Keywords: javascript, next.js, ReactJS, Next.js Tutorial, Nextjs Tutorial, Nextjs for beginners, React Next.js, React nextjs, javascript for beginners, typescript, next.js typescript, nextjs typescript, Next.js Static Site Generation, Next.js SSG, next js static site generation, getStaticProps, getStaticPaths, nextjs getStaticProps, next.js getStaticProps, next js getStaticProps, next js getStaticPaths, nextjs getStaticPaths, next.js getStaticPaths, SSG, gatsby, static site generation

Id: MxlmfI9IxVs

Length: 59min 39sec (3579 seconds)

Published: Thu Apr 09 2020

Reddit Comments

[u/designbyllama]

Good video and explanation of what's happening as you work through it. Absolutely love where Next is going and the fact `getStaticProps` complements headless CMS' very nicely. Not sure what else you have planned for this series but if you cover headless CMS' then Next's 'preview' feature would be a good.

[u/JetFuelCereals]

Hi Bruno! I'm glad to see you are using typescript. It makes life so much easier when coding something a bit larger. Although its full of gotchas... It takes a lot of patience and training. Worst is to see people using <any> all over the place. I've reshared in r/VisualCoding. Hope you don't mind.

[u/Oleg18]

Is it possible to use databases with Next.js????