Next.js 13 Crash Course #8 - generateStaticParams and its variations

hi guys welcome to another video of next js13 tutorial series I will talk about statically building web pages the routes and the same thing I talked about in the previous video but the difference is that I will be considering the dynamic routes this time that if let's say that this is the node a route that is created over here and it is just printing node over here right and in the previous video I talked about how we can statically create this component in our DOT next folder during the build time so the users when navigate to that route they just see that page pre-built in just few milliseconds okay so currently the nodes have this page which I have opened and it will statically build this page and call the API and it will show the result uh in the in the dot next folder first of all again if you haven't seen the previous video let me run the npm Run build command again for for all these routes for this project so it is taking some time and here you can see that it's going to call all the to-do's and it's going to create its folder in this dot next folder so it is optimizing the build so let me first open this up and if I go to the server if I go to the app and if I go to the notes okay it's not done yet so let's wait for it and see what's the result it produces so it's generating these pages so if I go up you can see that it has created these pages right and now you can see that it has created this nodes.html here so it means that whenever user tried to hit this notes page they will just see all the list of this page all the content straight away within milliseconds so they don't need to actually open up that route and it's going to call the API again and then the results are going to be shown so let's say that this notes.html is generated now what if we have a dynamic route node which is in the square brackets so in the square bracket means that it's going to take unlimited number of values means slash notes slash one slash two up to like billions numbers or any alphabets the combination of alphabets and numbers in this route so which file is going to be created with which name so it doesn't know that that whether it should be the node.html1.html or what is it so let me first fill up this node page it is currently empty so I'm going to copy the whole code from here like this and I'm going to paste over here so Json Place folder actually provide us a way to render a single node as well okay and I'm going to change the name a bit from notes to note and for now that this is it and in this component I am going to call that function get node data and it should be async because we are using a weight and this is not an array of notes it should be just note okay and here I can just show the node so note Dot title right now it's just like the previous file and again uh before I go further I have just added this link from the previous video that uh it is just having this note ID over here and whenever we are going to click on the detail of this note uh we can navigate to this page okay the detail page of that note and it has a dynamic route now if I run my project first let's see if it's working it's loading up that data in this file so let me run npm run Dev first and look at the browser so what is showing so here I have already loaded up currently it's showing note because earlier this was only showing the note now I am loading the one means that I'm calling the API with the id1 of North so let's see if it shows the title uh of it so it's taking some time let's see where it has compiled so yeah it has compiled now it's loading so here you can see that it has printed the title of that particular note so it means that the API for Node 1 is working fine and we don't need to pass the one connective we are not taking this ID from the URL instead we are just taking it from uh from passing it directly over here so let's update it a bit but before that let me build this file so it is again I have not passed the second param like the no Store Cache equals to no store so it creates the file in the next dot next folder now let's it's almost same as the notes okay and the API being call is just like the notes file if I run npm run build now let's see that whether it creates the build file for this Dynamic route which has the name node in our DOT next folder or not okay so I think it's already built now let's go to server go to Pages no the app and the notes Here you cannot see that it has created any file related to this node Okay the reason is that it is not considering it as a static name for any route but it is dynamic okay it can contain unlimited number of values so in the dot next folder it cannot create unlimited number of files like the one dot html2.htmlabc.html or anything okay so in the previous version of next JS there was a function that we used to do uh that was the get static paths that let us create fixed number of dynamic values that we let next JS to create the build file for only those values for this particular route let's say that we only want to create the build file for the IDS one two three and four only and the rest of file I don't want to create uh pre-built the component for that particular IDs the other than the one two three and 4 so how do I gonna do this so next yes 13 actually gives us another function and I'm just going to create over here first let's export so async function and the name of that function is generate static params okay and here I'm going to return that what are the IDS that it needs to create in the build file the dot next folder so I'm going to return it an array and the name of that Dynamic file is node and I'm going to send pass it a string value whether it's a number but I need to pass it a string so let's pass another string node another one and lastly for the 4 as well okay but before that let me change the name of this component from nodes to note and actually I needed to create it in the notes for Let Me revert it like previous so let's save it now I'm going to paste it over here okay so it has created now let me receive these values over here so for receiving this it's going to be received within the params key key okay and the type of it is going to be the parents node and the string right and I can get the each node ID from the params.note variable so parents if it contains then I'm going to pass the note and I also need to receive it over here so ID string and now for making it Dynamic I'm going to change it dynamic so I'll just remove it dollar ID okay now let's save it now I'm letting nextges know that whenever I'll run the next uh npm run build command it's going to consider these four values only for this particular route means it's going to create one dot html2.html 3 and 4.html within dot next folder and the all these files should be pre-built means the data with these IDs one two three and four should be generated at the build time and should be stored in the dot next folder so I'm going to run npm run build now and let's see whether it creates the files for these four values for this particular route or not okay so I'm going to first open it so it's now generating static Pages first let's verify from the terminal so look closely that it has created these four files right means our logic is working now if I go to the app and I need to go to the nodes folder so here you can see guys the one two three and four dot HTML have been created so it means that these are pre-built and will be loaded within milliseconds to the users who are going to access this app on the production right and there are few more variations of it that we can configure which we are going to talk just now let's say that we have this thing to be a Dynamic route with the unlimited number of params so to make it as I mentioned in my I think second video so I'm going to add three dots before the note it means that it's going to take any number of params like slash 1 slash a slash ABC Slash Slug slash note ID slash node title any number of uh values right so how we can achieve this thing right so in order to achieve this we can actually pass like let's say that we want to support particular uh array of values like first one should be slash one slash a so we are going to convert these values within array so I can pass this 1 and a means that it's going to support one slash a uh for pre-building this particular file okay so let me remove the rest of things first it takes time to update these so 2 dot b right question rated now now let's run and pre-build these files I I think I have I saved it so let's take some time and it's building and first we will analyze over terminal whether it has pre-built these two routes or not so it's pre-building now let's go now you can see that it has pre-built one slash a and two slash B now if I go to dot next server app and the note and here you can see that it has created the folder one and then a DOT html2 and then B dot HTML so this is how it's managing pre-building files for these Dynamic routes for the unlimited number of Route values now let's talk about another ways let's say that we have the two Dynamic routes over here let's say that we have this notes and inside it we have another folder which is also dynamic so let's say that ID and this is just for elaboration so I'm going to just revert everything and I'm going to remove the array so in order to support that ID we are also going to write the ID equals to and its value then right so next time when we try to pre-build this and try to access it it will be received within the params.id just like the params.node and it's going to create these files within this next folder and it's going to support the pre-building of these files now let's say that we have we want to support all these things all these IDs So currently if I see my all the nodes then it's going to show up I think 200 IDs so in order to pre-build all the IDS of this these nodes and we want to exempt the remaining values in the URL so then we can use the map function so let's do it so I'm going to write to those equals to await fetch and I need to fetch the IDS of all the tutus so I'm going to copy it from here paste dot then response and response dot Json now I'm going to return just like I returned the previous array I'm going to create that array using the map function so to dot map to do and it's going to be of any type and here I can construct all the to do from here so to do dot ID it has to be to string right so I think it's working there is no syntax error so it's not because the value of node I'm going to delete this ID this is just for elaboration and also I'm going to rename it and remove the dot dot dot from here okay so let's try to build this and see I'm just curious about the color of this keyword node so npm run build now it's going to iterate through all the IDS of these to-do's I think there are total 200 to do's and it's going to iterate through using the map and uh let's see if it has created so chunks these things so first load JS shared by all there is an issue I think it has created so the node So currently it has not generated so let's see what's the issue in it so I think there has to be this thing I am going to add the parentheses right now its color is changed so I forgot to add this parentheses starting and ending now let's save it and now I'm going to run npm run build command again and I hope that it's going to generate the files for all the IDS of the tutus so it means that whenever user tried to enter into so you can see that it is creating these files from 210 files so it's successfully generating the file so let's wait for it and just to elaborate again that we are creating this function so that uh all the IDS or the prefixed IDs that we are going to send using an array or using any algorithm in order to construct that array we want it to pre-build those files so the user can see those components those routes uh quickly visible on the web pages so I think it's almost done let's let's go to the server and let's go to the app and I'm gonna go to the notes folder so here you guys can see that it has created all the files up to this 200 total files okay so I think there were 200 IDs uh I'm not sure why it was showing the 210 here so let me now run npm run Dev we cannot actually see this thing uh in the development mode but when we will deploy our app on the production then it's going to work all these files so now just to test whether the IDS are working fine and how many nodes are there actually so it has compiled let's go and I'm going to go to this reload this page and also I'm going to load the notes route as well so I can see all the page so now you can see these are the title just ignore the design and the layout we are just focusing on the functionality right if I go to the detail so you can see that it's showing 197 and the title so the functionality is working as well and this is how we can generate and pre-build any number of uh Pages for the dynamic routes whether it's the dynamic for one param Dynamic for the multiple params and uh and nested Dynamic routes as well I've shown you all these three variations so I hope that you have liked my video and you have understood the concept it's up to us what's the logic of our application and what is the requirement so if you like my video don't forget to subscribe my channel and hit the like button if you like it thank you so much for watching

Channel: Programming with Umair

Views: 5,543

Keywords: generateStaticParams, next.js, next.js 13, next13, nextjs13, routes, nested routes, react, how to, tutorial, learn, jsx, tsx, typescript, frontend development, web development, links, navigations, router, routing, fetch, cache, api, server side rendering, client side rendering, CSR, SSR, ISG

Id: 9goIlPIFNzE

Length: 19min 26sec (1166 seconds)

Published: Fri Jun 16 2023