Next.js Tutorial - 23 - SSG with getStaticPaths

in the previous video we tried to implement static generation using get static props for a page with dynamic route parameter when we navigated to the page though we were presented with an error get static parts is required for dynamic ssg pages and is missing for slash post slash post id so next yes is basically telling us we need to implement get static parts whatever that might be to get rid of this error but what exactly is get static parts and why do we need it to fix this error let me explain that first for our example we are asking nextges to pre-render or statically generate the html for a route which contains a dynamic parameter post id you can see the same here in vs code however we also need to consider the fact that a dynamic parameter indicates we won't be having one single page we would have multiple pages for different values of post id the html for the page would remain the same but the data would differ for every post id so nexus is telling us hey the post id can be 1 2 3 or even 1 million i have no clue what possible values the post id parameter can accept so i need you as the developer to tell me what post ids i need to consider when generating the pages at build time if you don't i'm going to throw an error that you have not specified the path parameter for pre-rendering this page which is exactly what has happened in our case we have asked nextgs to pre-render this post id page but we haven't informed what are the possible values of post id and the way we inform that is using this get static paths function let's see how to implement it for our post id page in the same page file where we specify get static props that is post id dot js file we also specify get static paths which is again an async function so export async function get static paths and from this function we need to return an object this object must contain a paths key this key determines which paths will be statically generated at build time the key is an array of objects each object contains a params key which in turn is an object that contains the route parameter with its value so object the route parameter is post id we need to specify a value let's say its value can be one so what we have done here is inform nextgs to generate the post id with post id parameter is equal to one if we go back to our post list page though we are passing in three posts so let's make sure we generate three pages so i'm going to copy this object paste it twice and change post id to 2 and 3. make sure the post id parameter value is a string and there is one last thing the returned object must contain another key called fallback we will talk more about what role this key plays in the near future but for now set its value to false all right let's save the file and head back to the browser and test this out so localhost port 3000 which is our home page navigate to slash posts and from here click on an individual post you can see that the ui is now displaying the post id title and the body we have fixed the get static parts editor from before if i view page source we see the data here as well we have successfully pre-rendered a page with dynamic parameters so to summarize what we have done in the get static props function we have extracted params from the context object that gets static props automatically receives and from this params object we get hold of the post id route parameter we make the api call fetch the data and pass it into the page component as props we've also made use of the get static paths function to inform nexus of the possible values that post id.js page should be statically generated for one two and three all right now that we have an idea of static site generation with dynamic parameters in the next video let's understand what happens when we build and serve the application thank you all for watching make sure to subscribe to the channel and i'll see you in the next video

Channel: Codevolution

Views: 62,671

Keywords: Codevolution, Next, Next.js, Next JS, Codevolution Next.js, Codevolution Next JS, Next.js Tutorial, Next.js Tutorial for Beginners, Next JS Tutorial, Next JS Tutorial for Beginners, Next Tutorial, Next Tutorial for Beginners, Next.js 11, SSG with getStaticPaths, getStaticPaths, SSG with getStaticPaths in Next.js, Next.js Tutorial on SSG with getStaticPaths

Id: TOIRxWQPgi0

Length: 6min 0sec (360 seconds)

Published: Sun Jul 11 2021