Next.js & Contentful Site Build Tutorial #7 - Generating Paths

Key Takeaways

all right gang so now we have our recipes listed here and when we click on one we go to a new page using that recipes slug in the path so this page is being driven by the slug components over here this thing right here this is what we see because this file and file path matches the route we go to but we need to generate the static pages for these routes so that when we visit one each one shows its own data for that recipe so if i'm on this one it shows the recipe for my my potatoes if i go to this one it shows the recipe for the marmite skewers etc now the way we do this in next js is to use the get static paths function inside the slug components now if you're unfamiliar with this then definitely check out my next js crash course first where i talk about this function in detail the link is going to be down below but basically this function is responsible for finding out all of the paths or routes which will use this component as its page and then next js can generate a static page for each one of those paths at build time right so to do this we basically need to find out the slog of every recipe we have in contentful because they will be the paths for each of the pages generated so the first thing we need to do is start to communicate with contentful now in order to do that we need the contentful clients now we do that over here inside the index file so i'm just going to copy this stuff from here so we can use it inside this log file as well so first of all the import statement at the top and then also i'm going to grab this thing right here where we use the create client function and we grab the environment variables we need to connect to it so let me copy this dude and paste it over here now this time around i'm not pasting this inside a function over here we pasted it inside get static props because in this component in this page this is the only place it's going to be used inside this function but in this component we're going to be using it in two separate functions and we'll see that shortly so i don't want to place this inside one of those functions because then it's only scoped to that function and we can't use it in both then so i'm creating it at the top level outside of both functions first of all now we need to create the get static paths function so i'm going to say const and then get static paths and set that equal to an async function then inside here this is where we're going to use this client to get all of the entries and find out the slug for each one so that next js can generate a static page for each one we also need to export this so we'll say export in front of it all right then so first of all let's get all of the entries using this so i'll say const response is equal to a weight and then it's the clients dot get entries like so and remember we need to pass in an object with some options or rather just one single option here to say what content type do we want to get so we want to get the recipes content underscore type and set that equal to recipe that is the id of the content type that we want to get so this gets us all of the items all of the recipes and it stores them inside an item's property on this response right here now ultimately down here we need to return an object right and inside this object we need to return a paths property now the value of this should be an array of path objects so a lot of different objects like this this is what next js will use to build our static pages for each path so the array of objects are going to look a little bit like this we'll have each object have a params property then that will also be an object and inside here we're going to have a slug property and that is going to be the slog of each item that we get now it looks a little bit complex right but we have an array of these different path objects so there'll be several of these one for each recipe and in each one of those objects we have a params property to specify any route parameters for that path we only have one route parameter in our paths and that is the slog so we have a slog property in this object where we say what the slog is of each item so this is ultimately what we want to return now in order to do this in order to generate this array i'm going to use the map method on the items that we get back on this response right here so i'll say const paths is equal to response dot items dot map now inside here we fire a function for each one and we get access to that individual item now we want to return an object for each one and then that object will be placed in an array stored in paths so the object remember looks like the objects we had down here where inside this we have a params property which is also an object and we specify the slog parameter and we can get that from item dot fields dot slug all right so now here we have that array and we can just apply it down here so this now is gonna work now next js is gonna know all of the different paths it needs to generate and all of the different static pages for each path now because this name and this name are the same we can shorten this so it's just paths and then this automatically uses this value all right so we have the paths property now we also need to return one other thing and that is a fallback property and that is going to be set to false now this basically means if we go to a path that doesn't exist in these paths right here we'll show a 404 page instead of a fallback page now we're going to talk more about this later on in detail when we implement fallback pages and incremental static regeneration but for now let's just set this to false meaning if they go to a slug or a path that doesn't exist so forward slash recipes forward slash abc which doesn't exist then we're going to show a 404 page instead of a fallback page all right then so now we're returning this array of paths right here next knows to create a page based on this component right here for each of those paths or routes so now we'll have a page for each recipe but we also need to access the data for each individual page now to do this we need to use the get static props function for this component much like we used it for this index component over here so let me just grab this thing i'm going to copy it and come over here and i'm going to paste it right here now i'm going to get rid of all of the stuff inside of it because i don't want that we're going to flesh this out from scratch so again we need to use this contentful client right here to interact with contentful so again get the item the single item this time that we need now you might be thinking well we've already got all of the items right here well yeah but this is done at build time right and we make this fetch request to get the items so that we can generate the paths this thing right here is to fetch a single item based on the page that we're on and that item then is gonna be injected as a prop right here so we do have to make these separate fetches so first of all i'm going to say const response is equal to a weight client and then dot get entries like so now inside here again we need to specify the content underscore type and that is going to be recipe now this right here is going to get all of the recipe entries and we don't want to do that we just want to get a single one but how do we know which one well after next js runs this right here it generates those different paths and pages and for each one of those different paths it runs this function so it's going to run it in our case four different times and each time it runs it it passes in a context object and on that context object there is a params property and that params property is going to contain the slug because it's just this object right here so params.slog is going to give us the actual slog of that particular recipe that this is running for and we can use that slog to limit this request to just get the item with that slug property so instead of accepting context i'm going to destructure the params property from that context object and that is just going to be this object right here so i can access the slog on this now so to only get a single recipe based on the value of a field we add in a second property right here and this time it's going to be in quotes and we want to say fields dots slog or whatever field we want to match now we want to match to the slog and it's going to be params.slug so this is how we can kind of limit what we get back from contentful we can say we want the slug or any other field to match this value now if multiple entries match that value it's going to retrieve all of those but we know that the slug field is unique so it's only going to get one now this still returns an array so response to items is going to be an array and in fact we can just destructure items from the response right here if you want to that's fine as well so it's going to be an array even though there's only one item inside it because it doesn't know at this point there's only going to be one item it might be several so it always returns an array so we have to remember that now down here we need to return an object so we can inject the props into the component so props is going to be an object where we have a recipe prop that we want to inject and that is going to be items but we just want the item inside that the first item so zero and that means we're not passing in an array as a prop into this now we're just passing in a single item object the first item inside this array okay so now we could destructure that from the props right here recipe like so and all i'm going to do for now is log that recipe to the console like so save it and refresh over here so you can see we're on veggie marmite skewers if i inspect right now and go to the console we see we have this single object this single recipe and we can see it is the veggie marmite skewers if i go home i'm going to clear this and then choose a different one like cheesy marmite toast so let's go there open this up and we can see now we have the cheesy marmite toast so now we have that inside our component we can go ahead and output the data from this recipe inside the template and we're going to do that next