Next.js & Contentful Site Build Tutorial #5 - Using Images from Contentful

Key Takeaways

all right then so we're outputting all of this recipe data now on the home page and that's being driven by this recipe card component which is embedded into the homepage right here and this recipe card outputs a lot of information but we don't output the image yet the thumbnail so that's what i'm going to do now and to do this we're going to use the built-in image components that comes with next and this auto optimizes our image for us so let me import that up here to use it import image from next forward slash image like so now we need to pass in a source property into this image so source and we'll set that equal to something it's going to be dynamic now we can get this source from the data if we take a look at that in the console over here i'm going to take a look at the data open one of these then go to fields and then look at thumbnail right here so if we open this up we can see this also has a fields property we need to go into because the several things that we need or that we can get rather from this thumbnail so one of those is the file that's the thing that we need to output and we want the url property of that so that's the source right here and also inside this file property we have details and we have the image property with the width and height we will be using that in a minute as well so we have to kind of drill down into these different properties a fair way to get this url and these different height and width properties now also notice we don't have the https or http in front of this thing here so we have to manually add that ourselves so what i'm going to do is come over here and inside source i'm going to concatenate some parts of a string so i'm going to say https colon and that's all we need because we have the double forward slash right here and then i'm going to concatenate with that the thumbnail which we destructed right here and from the thumbnail we want the fields property because remember we have to go into fields again once we're inside thumbnail so dot fields then we want the file property then we want the url now then this is not going to work out of the box and let me show you this i'm going to save it and come over here and you can already see this big fat error and it says right here image with source and this is the source and it says must use width and height properties so let's do that first of all let's add in a width property so we'll set that equal to thumbnail dot fields dot file then we want dot details then we want dot image then dot width so we'll do the same for the height and this time it's going to be height over here and height right here so if we save this again still not going to work we're going to get a different error this time and it says we have an invalid source prop and hostname images.ctf assets.net is not configured under images in your next.config.js file so basically in order to use this image component which auto optimizes our images with images from an external domain we have to kind of white list that domain and that domain is this thing right here if we take a look if we just comment this out and take a look at the data again save this i'm going to clear all this is this working okay let me just refresh okay so if we take a look at this data again and i'm going to go into the thumbnail and into fields then we want the file and we want the url this is the thing we need to white list right here now it shows you how to do that on the next documentation all we have to do is make a next config file we export an object inside that and we whitelist our image domains like this so i'm going to copy all of this chunk right here and then i'm going to go make a config file in the root of the project because we don't have one yet so we call this next dot config dot js and i'm going to paste in this thing over here now we want to replace this with the source that we need to white whitelist so if i was to save this and then come back to the recipe card i'm going to uncomment this right here save that and come over here this is the host name we need to white list so i'm going to grab that and i'm going to come back to the config file and i want to paste it inside here like so that's all we need to do now i'm going to restart the server for this to take effect so let me cancel out of this process and let me run npm run dev again and then once that's done i'm going to come over here i'm going to hard refresh and i'm going to cross my fingers and hope this works all right voila now we can see all of these images right here and notice how they only load in as we scroll down to them that's the images lazily loading and all of that behavior is taken care of for us by this image component so now we have this template pretty much complete but it still looks crap to be honest so what i'd like to do is add some styles and we'll do that in the next video